diff --git a/frontend/src/components/page-view.tsx b/frontend/src/components/page-view.tsx new file mode 100644 index 0000000..e48c97b --- /dev/null +++ b/frontend/src/components/page-view.tsx @@ -0,0 +1,13 @@ +type Props = { + title: string + content: string +} + +export function PageView({ title, content }: Props) { + return ( +
+

{title}

+
+
+ ) +} diff --git a/frontend/src/routes/$slug.tsx b/frontend/src/routes/$slug.tsx new file mode 100644 index 0000000..5c083b0 --- /dev/null +++ b/frontend/src/routes/$slug.tsx @@ -0,0 +1,30 @@ +import { createFileRoute, notFound } from '@tanstack/react-router' +import { useSuspenseQuery } from '@tanstack/react-query' +import { Helmet } from 'react-helmet-async' +import { pageBySlugQuery } from '@/lib/queries' +import { PageView } from '@/components/page-view' + +export const Route = createFileRoute('/$slug')({ + loader: async ({ context: { queryClient }, params: { slug } }) => { + const page = await queryClient.ensureQueryData(pageBySlugQuery(slug)) + if (!page) throw notFound() + }, + component: CmsPage, +}) + +function CmsPage() { + const { slug } = Route.useParams() + const { data: page } = useSuspenseQuery(pageBySlugQuery(slug)) + if (!page) return null + + return ( + <> + {page.title && ( + + {page.title} + + )} + + + ) +} diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx index 9446c5b..3bc8928 100644 --- a/frontend/src/routes/index.tsx +++ b/frontend/src/routes/index.tsx @@ -1,10 +1,24 @@ import { createFileRoute } from '@tanstack/react-router' +import { useSuspenseQuery } from '@tanstack/react-query' +import { pageBySlugQuery } from '@/lib/queries' +import { PageView } from '@/components/page-view' export const Route = createFileRoute('/')({ - component: () => ( -
-

Home

-

Routing placeholder — CMS page will render here.

-
- ), + loader: async ({ context: { queryClient } }) => { + await queryClient.ensureQueryData(pageBySlugQuery('home')) + }, + component: HomePage, }) + +function HomePage() { + const { data: page } = useSuspenseQuery(pageBySlugQuery('home')) + if (!page) { + return ( +
+

Welcome

+

No home page content configured in Directus.

+
+ ) + } + return +}