implement basic story[id] page

src/app/story/[id]/page.tsx

@@ -1,15 +1,42 @@
 // "use server"
 import prisma from "app/lib/db"
+import { columns } from "app/submission/columns"
+import { PageHeader, PageSubHeader } from "app/ui/pageHeader"
+import { DataTable } from "app/ui/tables/data-table"
+import { Badge } from "@/components/ui/badge"
 
-async function getStory(id: string) {
-  const story = await prisma.story.findFirst({ where: { id: Number(id) } })
-  return story
+//ids are string here because they're coming from url params
+async function getStoryWithGenres(id: string) {
+  return prisma.story.findFirst({
+    where: { id: Number(id) }, include: {
+      genres: true
+    }
+  })
+}
+async function getStorySubmissions(id: string) {
+  return prisma.sub.findMany({
+    where: { storyId: Number(id) }, include: {
+      story: true,
+      pub: true,
+      response: true
+    }
+  })
 }
 
 
 export default async function Page({ params }: { params: { id: string } }) {
-  const data = await getStory(params.id)
-  return <div>Title: {data?.title ?? ""}</div>
+  const data = await getStoryWithGenres(params.id)
+  const storySubs = await getStorySubmissions(params.id)
+  return <>
+    <div className="container">
+      <PageHeader>{data?.title ?? ""}</PageHeader>
+      {data.genres.map(e => (<Badge>{e.name}</Badge>))}
+      <PageSubHeader>Submissions:</PageSubHeader>
+      <DataTable columns={columns} data={storySubs} />
+
+    </div>
+
+  </>
 }
 
 

src/app/tailwind.css

@@ -46,7 +46,7 @@ html,
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui;
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -135,7 +135,7 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular;
   /* 1 */
   font-feature-settings: normal;
   /* 2 */
@@ -1248,6 +1248,10 @@ body {
   vertical-align: middle;
 }
 
+.font-display {
+  font-family: Playfair;
+}
+
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
@@ -1277,6 +1281,11 @@ body {
   line-height: 1rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .font-black {
   font-weight: 900;
 }
@@ -1293,6 +1302,10 @@ body {
   font-weight: 600;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
 .capitalize {
   text-transform: capitalize;
 }

src/app/ui/pageHeader.tsx

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react"
+
+export function PageHeader(props: ComponentProps<"h1">) {
+  return <h1 className="text-3xl font-display font-bold">{props.children}</h1>
+}
+
+export function PageSubHeader(props: ComponentProps<"h2">) {
+  return <h2 className="text-xl font-display font-bold">{props.children}</h2>
+}

tailwind.config.js

@@ -2,13 +2,20 @@
 module.exports = {
   darkMode: ["class"],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
   ],
   prefix: "",
   theme: {
+    fontFamily: {
+      sans: ["ui-sans-serif", "system-ui"],
+      serif: ["ui-serif", "Georgia"],
+      mono: ["ui-monospace", "SFMono-Regular"],
+      display: ["Playfair"],
+      body: ['"Open Sans"'],
+    },
     container: {
       center: true,
       padding: "2rem",
@@ -74,4 +81,5 @@ module.exports = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
+};
+