From 8975263c470ff37e1ebf1e581923f6df5b47ea8e Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Thu, 20 Jun 2024 12:29:56 +0200
Subject: [PATCH] implement basic story[id] page

---
 prisma/dev.db               | Bin 69632 -> 69632 bytes
 src/app/story/[id]/page.tsx |  37 +++++++++++++++++++++++++++++++-----
 src/app/tailwind.css        |  17 +++++++++++++++--
 src/app/ui/pageHeader.tsx   |   9 +++++++++
 tailwind.config.js          |  18 +++++++++++++-----
 5 files changed, 69 insertions(+), 12 deletions(-)
 create mode 100644 src/app/ui/pageHeader.tsx

diff --git a/prisma/dev.db b/prisma/dev.db
index a84c5be02079fa3542ea45313362f7d91ce0dbe8..631ea8bdd2ab06f7822ab0bb2443ea4a04b4db07 100644
GIT binary patch
delta 285
zcmW-cu}Z{16h$-1Op*cN+Gyhw#uV233+e|1#19bJ;0nPMigm;faAiKgEi46*xb2qd
zjLl-9pt7tIPy|r~vGF<0Io-MMl>=E0WPd@}6Iv7Ya`P}1R87*PGb3R=OmTxDY&BaR
zAu%L9e<f%)dYM_xi!HNVWP4`6FzY)9*={$>b2~gv=QU~%Kls8sT1;?{F|JWpOZ{^s
zN(VwHQZY-CidX@ukmZw9ffi)jQ{u$P!zUi_hFdfotMQBxC(f`ON%5c1&XQv1fFfs~
t!cc0#KTI!-;ZEb>8z0>H#S5Nr$Hz3>xx%92QPPgFW8@e*R<Dn9oj;KlNlX9$

delta 197
zcmZozz|ydQWr8&0#ECM_j1xB|H2O12Z+_&jWWdABzm<Xi3IBQit^6xC3p6zIE8Qu`
zNli^nEKX%$V31_e2a*uL%OuWvC#5(srFinzet!WL{ud1VKl#7#zvF+we~bUtX2A_7
z`MLQRS-F79*%?{5Ccl_3161{tf&VlA8=%Uk{8#y}0#zO1=Mey^VgoAU04m%3WW9m{
jP~95_{%`yrfhvFVKj41=RCk`Ag9ogNjcfDk`=SN_jkY|p

diff --git a/src/app/story/[id]/page.tsx b/src/app/story/[id]/page.tsx
index 6630fa7..d8992e7 100644
--- a/src/app/story/[id]/page.tsx
+++ b/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>
+
+  </>
 }
 
 
diff --git a/src/app/tailwind.css b/src/app/tailwind.css
index 83babc0..f2f82c5 100644
--- a/src/app/tailwind.css
+++ b/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;
 }
diff --git a/src/app/ui/pageHeader.tsx b/src/app/ui/pageHeader.tsx
new file mode 100644
index 0000000..21c35ce
--- /dev/null
+++ b/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>
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 7cb7e37..a310c9f 100644
--- a/tailwind.config.js
+++ b/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")],
-}
\ No newline at end of file
+};
+