Spaces:
Running
Running
| import { useState } from "react"; | |
| import { Header } from "components/editor-badge/comps/header"; | |
| // import { Editor } from "components/editor-badge"; | |
| import { TourProvider } from "@reactour/tour"; | |
| import { Footer } from "@/components/footer"; | |
| import Head from "next/head"; | |
| import { useIntl } from "react-intl"; | |
| import dynamic from "next/dynamic"; | |
| const DynamicEditor = dynamic(() => import("@/components/editor-badge"), { | |
| loading: () => <p>Loading...</p>, | |
| }); | |
| export default function BadgeEditor() { | |
| const intl = useIntl(); | |
| return ( | |
| <> | |
| <Head> | |
| <title>{intl.formatMessage({ id: "badgeEditor.meta.title" })}</title> | |
| <meta | |
| name="description" | |
| content={intl.formatMessage({ id: "badgeEditor.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: "badgeEditor.meta.title", | |
| })} | |
| ></meta> | |
| <meta | |
| property="og:description" | |
| content={intl.formatMessage({ id: "badgeEditor.meta.description" })} | |
| ></meta> | |
| <meta property="og:image" content="/badge-editor.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: "badgeEditor.meta.title", | |
| })} | |
| ></meta> | |
| <meta | |
| property="twitter:description" | |
| content={intl.formatMessage({ id: "badgeEditor.meta.description" })} | |
| ></meta> | |
| </Head> | |
| <TourProvider | |
| steps={[ | |
| { | |
| selector: ".first-step", | |
| content: intl.formatMessage({ id: "badgeEditor.tour.step1" }), | |
| }, | |
| { | |
| selector: ".second-step", | |
| content: intl.formatMessage({ id: "badgeEditor.tour.step2" }), | |
| }, | |
| { | |
| selector: ".third-step", | |
| content: intl.formatMessage({ id: "badgeEditor.tour.step3" }), | |
| }, | |
| { | |
| selector: ".fourth-step", | |
| content: intl.formatMessage({ id: "badgeEditor.tour.step4" }), | |
| }, | |
| ]} | |
| > | |
| <div> | |
| <Header> | |
| <DynamicEditor /> | |
| </Header> | |
| <Footer /> | |
| </div> | |
| </TourProvider> | |
| </> | |
| ); | |
| } | |