From d6285e0a21ce70e1eb09e8eda9c25b5cd3fa8b30 Mon Sep 17 00:00:00 2001 From: Soroush Date: Wed, 1 Nov 2023 20:57:40 +0100 Subject: [PATCH 1/3] create structure and [...slug] --- src/components/PageNotFound.jsx | 19 + src/components/ProgramDetail.jsx | 24 + src/pages/program/[...slug].jsx | 48 ++ src/pages/program/data.js | 672 +++++++++++++++++++ src/pages/{program.jsx => program/index.jsx} | 0 src/pages/program/raw.js | 653 ++++++++++++++++++ tailwind.config.js | 8 +- 7 files changed, 1420 insertions(+), 4 deletions(-) create mode 100644 src/components/PageNotFound.jsx create mode 100644 src/components/ProgramDetail.jsx create mode 100644 src/pages/program/[...slug].jsx create mode 100644 src/pages/program/data.js rename src/pages/{program.jsx => program/index.jsx} (100%) create mode 100644 src/pages/program/raw.js diff --git a/src/components/PageNotFound.jsx b/src/components/PageNotFound.jsx new file mode 100644 index 0000000..3e08ca9 --- /dev/null +++ b/src/components/PageNotFound.jsx @@ -0,0 +1,19 @@ +import { Container } from '@/components/Container' + +export function PageNotFound({ id }) { + return ( +
+ +

+ Page not found +

+
+

+ The page you are looking for does not exist. Please check the URL + and try again. +

+
+ +
+ ) +} diff --git a/src/components/ProgramDetail.jsx b/src/components/ProgramDetail.jsx new file mode 100644 index 0000000..45d81ac --- /dev/null +++ b/src/components/ProgramDetail.jsx @@ -0,0 +1,24 @@ +import { Container } from '@/components/Container' + +export function ProgramDetail({ id, name, title, details }) { + return ( +
+ +

+ {title} +

+

+ {name} +

+
+ {details.map(({ description, authors }, index) => ( +
+

{description}

+

{authors}

+
+ ))} +
+ +
+ ) +} diff --git a/src/pages/program/[...slug].jsx b/src/pages/program/[...slug].jsx new file mode 100644 index 0000000..b30b29b --- /dev/null +++ b/src/pages/program/[...slug].jsx @@ -0,0 +1,48 @@ +import Head from 'next/head' +import { useRouter } from 'next/router' +import { Footer } from '@/components/Footer' +import { Header } from '@/components/Header' +import { useEffect, useState } from 'react' + +import { descriptiveTable } from './data' +import { raw } from './raw' +import { PageNotFound } from '@/components/PageNotFound' +import { ProgramDetail } from '@/components/ProgramDetail' + +export default function Page() { + const router = useRouter() + const { slug } = router.query + const [data, setData] = useState(null) + + useEffect(() => { + if (slug?.[0]) { + const data = descriptiveTable[slug[0]] + setData(data) + } + }, [slug]) + + return ( + <> + + State of the Map EU 2023 + + +
+
+ {!data && } + {data && ( + + )} +
+