diff --git a/packages/nextjs/app/challenge/[id]/page.tsx b/packages/nextjs/app/challenge/[id]/page.tsx index d18e1cfb..d938c670 100644 --- a/packages/nextjs/app/challenge/[id]/page.tsx +++ b/packages/nextjs/app/challenge/[id]/page.tsx @@ -1,14 +1,15 @@ "use client"; -import React, { FC, useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; import ReactMarkdown from "react-markdown"; import { useParams } from "next/navigation"; +import { getMarkdownComponents } from "~~/components/GetMarkdownComponents/GetMarkdownComponents"; +import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline"; // eslint-disable-next-line react/display-name const PageView: React.FC = () => { const { id } = useParams(); - const [markdown, setMarkdown] = useState(); useEffect(() => { @@ -18,66 +19,32 @@ const PageView: React.FC = () => { // `https://raw.githubusercontent.com/scaffold-eth/se-2-challenges/challenge-0-simple-nft/README.md`, ); const markdownData = await response.text(); + setMarkdown(markdownData); }; getMarkdown(); }, [id]); + const handleClick = () => { + window.open( + `https://github.com/Quantum3-Labs/speedrunstark/tree/${id}`, + "_blank", + ); + }; return (
- { - return ( -

- {children} -

- ); - }, - h2: ({ children }) => ( -

- {children} -

- ), - p: ({ children }) => ( -

- {children} -

- ), - div: ({ children }) => ( -
{children}
- ), - a: ({ children, href }) => ( - - {children} - - ), - pre: ({ children }) => ( -
-                {children}
-              
- ), - code: ({ children }) => ( - - {children} - - ), - blockquote: ({ children }) => ( -
- {children} -
- ), - li: ({ children }) => ( -
  • {children}
  • - ), - }} - > + {markdown} +
    + +
    ); diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index 04f39608..0a600d62 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -97,7 +97,7 @@ const Home: NextPage = () => { title={challenge.title} description={challenge.description} imageUrl={challenge.imageUrl} - buttonText="QUEST" + buttonText="COMING SOON" onButtonClick={() => router.push(`/challenge/${challenge.id}`)} end={challenge.end || false} border={challenge.border !== undefined ? challenge.border : true} diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx index c37e68ab..83a72be8 100644 --- a/packages/nextjs/components/Footer.tsx +++ b/packages/nextjs/components/Footer.tsx @@ -28,7 +28,7 @@ export const Footer = () => {
    {nativeCurrencyPrice > 0 && (
    -
    +
    {nativeCurrencyPrice}
    diff --git a/packages/nextjs/components/GetMarkdownComponents/GetMarkdownComponents.tsx b/packages/nextjs/components/GetMarkdownComponents/GetMarkdownComponents.tsx new file mode 100644 index 00000000..eaa008c7 --- /dev/null +++ b/packages/nextjs/components/GetMarkdownComponents/GetMarkdownComponents.tsx @@ -0,0 +1,50 @@ +import { Components } from "react-markdown"; + +export const getMarkdownComponents = (): Components => { + return { + h1: ({ children }) => { + return ( +

    + {children} +

    + ); + }, + h2: ({ children }) => ( +

    + {children} +

    + ), + p: ({ children }) => ( +

    + {children} +

    + ), + div: ({ children }) =>
    {children}
    , + a: ({ children, href }) => ( + + {children} + + ), + pre: ({ children }) => ( +
    +        {children}
    +      
    + ), + code: ({ children }) => ( + + {children} + + ), + blockquote: ({ children }) => ( +
    + {children} +
    + ), + li: ({ children }) => ( +
  • {children}
  • + ), + }; +};