Spaces:
Running
Running
| import { useState } from "react"; | |
| import { Header } from "components/editor-icons/comps/header"; | |
| import { DEFAULT_VALUE } from "components/editor-icons/editor.constants"; | |
| // import { Editor } from "components/editor-icons"; | |
| import { EditorType } from "types/editor"; | |
| import { TourProvider } from "@reactour/tour"; | |
| import { Footer } from "@/components/footer"; | |
| import Head from "next/head"; | |
| import { FormattedMessage, useIntl } from "react-intl"; | |
| import dynamic from "next/dynamic"; | |
| const DynamicEditor = dynamic(() => import("@/components/editor-icons"), { | |
| loading: () => <p>Loading...</p>, | |
| }); | |
| export default function IconsEditor() { | |
| const intl = useIntl(); | |
| const [editor, setEditor] = useState<EditorType>(DEFAULT_VALUE); | |
| return ( | |
| <> | |
| <Head> | |
| <title>{intl.formatMessage({ id: "iconsEditor.meta.title" })}</title> | |
| <meta | |
| name="description" | |
| content={intl.formatMessage({ id: "iconsEditor.meta.description" })} | |
| ></meta> | |
| <meta property="og:type" content="website"></meta> | |
| <meta property="og:url" content="https://discotools.xyz"></meta> | |
| <meta | |
| property="og:title" | |
| content={intl.formatMessage({ | |
| id: "iconsEditor.meta.title", | |
| })} | |
| ></meta> | |
| <meta | |
| property="og:description" | |
| content={intl.formatMessage({ id: "iconsEditor.meta.description" })} | |
| ></meta> | |
| <meta property="og:image" content="/banner.png"></meta> | |
| <meta property="twitter:card" content="summary_large_image"></meta> | |
| <meta property="twitter:url" content="https://discotools.xyz"></meta> | |
| <meta | |
| property="twitter:title" | |
| content={intl.formatMessage({ | |
| id: "iconsEditor.meta.title", | |
| })} | |
| ></meta> | |
| <meta | |
| property="twitter:description" | |
| content={intl.formatMessage({ id: "iconsEditor.meta.description" })} | |
| ></meta> | |
| </Head> | |
| <TourProvider | |
| steps={[ | |
| { | |
| selector: ".first-step", | |
| content: intl.formatMessage({ id: "iconsEditor.tour.step1" }), | |
| }, | |
| { | |
| selector: ".second-step", | |
| content: intl.formatMessage({ id: "iconsEditor.tour.step2" }), | |
| }, | |
| { | |
| selector: ".third-step", | |
| content: intl.formatMessage({ id: "iconsEditor.tour.step3" }), | |
| }, | |
| { | |
| selector: ".fourth-step", | |
| content: intl.formatMessage({ id: "iconsEditor.tour.step4" }), | |
| }, | |
| ]} | |
| > | |
| <div> | |
| <Header> | |
| <DynamicEditor editor={editor} onChange={setEditor} /> | |
| </Header> | |
| <div className="max-w-6xl w-full mx-auto relative z-10 mt-10 px-6 xl:px-0"> | |
| <h3 className="font-extrabold text-dark-600 text-xl font-title"> | |
| <FormattedMessage id="iconsEditor.pack.title" /> | |
| </h3> | |
| <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10 mt-6"> | |
| <div className="p-5 rounded-lg border-dark-100 border-opacity-50 border hover:ring-4 cursor-pointer ring-blue ring-opacity-50 relative overflow-hidden"> | |
| <h4 className="font-medium font-title text-sm text-dark-300"> | |
| Rocket League pack | |
| </h4> | |
| <p className="text-sm text-dark-200"> | |
| 6 icons for your Rocket League server | |
| </p> | |
| <div className="flex items-center gap-3 mt-4"> | |
| <div className="w-7 h-7 rounded-full bg-blue"></div> | |
| <div className="w-7 h-7 rounded-full bg-darkGreen"></div> | |
| <div className="w-7 h-7 rounded-full bg-green"></div> | |
| <div className="w-7 h-7 rounded-full bg-dark-300"></div> | |
| <div className="w-7 h-7 rounded-full bg-red"></div> | |
| </div> | |
| <div className="absolute w-full h-full top-0 left-0 bg-white bg-opacity-40 filter backdrop-blur-sm flex items-center justify-center"> | |
| <p className="font-extrabold font-title text-center text-blue text-xl"> | |
| <FormattedMessage id="badge.comingSoon" /> | |
| </p> | |
| </div> | |
| </div> | |
| <div className="p-5 rounded-lg border-dark-100 border-opacity-50 border hover:ring-4 cursor-pointer ring-blue ring-opacity-50 relative overflow-hidden"> | |
| <h4 className="font-medium font-title text-sm text-dark-300"> | |
| Rocket League pack | |
| </h4> | |
| <p className="text-sm text-dark-200"> | |
| 6 icons for your Rocket League server | |
| </p> | |
| <div className="flex items-center gap-3 mt-4"> | |
| <div className="w-7 h-7 rounded-full bg-yellow"></div> | |
| <div className="w-7 h-7 rounded-full bg-green"></div> | |
| <div className="w-7 h-7 rounded-full bg-blue"></div> | |
| <div className="w-7 h-7 rounded-full bg-dark-300"></div> | |
| <div className="w-7 h-7 rounded-full bg-red"></div> | |
| </div> | |
| <div className="absolute w-full h-full top-0 left-0 bg-white bg-opacity-40 filter backdrop-blur-sm flex items-center justify-center"> | |
| <p className="font-extrabold font-title text-center text-blue text-xl"> | |
| <FormattedMessage id="badge.comingSoon" /> | |
| </p> | |
| </div> | |
| </div> | |
| <div className="p-5 rounded-lg border-dark-100 border-opacity-50 border hover:ring-4 cursor-pointer ring-blue ring-opacity-50 relative overflow-hidden"> | |
| <h4 className="font-medium font-title text-sm text-dark-300"> | |
| Rocket League pack | |
| </h4> | |
| <p className="text-sm text-dark-200"> | |
| 6 icons for your Rocket League server | |
| </p> | |
| <div className="flex items-center gap-3 mt-4"> | |
| <div className="w-7 h-7 rounded-full bg-blue"></div> | |
| <div className="w-7 h-7 rounded-full bg-dark-300"></div> | |
| <div className="w-7 h-7 rounded-full bg-darkGreen"></div> | |
| <div className="w-7 h-7 rounded-full bg-red"></div> | |
| <div className="w-7 h-7 rounded-full bg-green"></div> | |
| </div> | |
| <div className="absolute w-full h-full top-0 left-0 bg-white bg-opacity-40 filter backdrop-blur-sm flex items-center justify-center"> | |
| <p className="font-extrabold font-title text-center text-blue text-xl"> | |
| <FormattedMessage id="badge.comingSoon" /> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <Footer /> | |
| </div> | |
| </TourProvider> | |
| </> | |
| ); | |
| } | |