From 66f5b6ff350075191d7a5ce1957a20d601a85cb6 Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Mon, 24 Jun 2024 12:29:02 +0200
Subject: [PATCH] add styled component for create pages, implement at
 create/story

---
 src/app/globals.css            | 170 ++++++++++----------
 src/app/story/create/page.tsx  |   9 +-
 src/app/tailwind.css           | 282 +++++++++++++++++++++++----------
 src/app/ui/createContainer.tsx |  19 +++
 src/app/ui/forms/story.tsx     | 121 +++++++-------
 5 files changed, 370 insertions(+), 231 deletions(-)
 create mode 100644 src/app/ui/createContainer.tsx

diff --git a/src/app/globals.css b/src/app/globals.css
index 1804c65..1f45c80 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,101 +3,101 @@
 @tailwind utilities;
 
 
-/* @layer base { */
-/*     :root { */
-/*       --background: 43 62% 98%; */
-/*       --foreground: 43 73% 2%; */
-/*       --muted: 43 24% 85%; */
-/*       --muted-foreground: 43 10% 37%; */
-/*       --popover: 43 62% 98%; */
-/*       --popover-foreground: 43 73% 2%; */
-/*       --card: 43 62% 98%; */
-/*       --card-foreground: 43 73% 2%; */
-/*       --border: 43 15% 91%; */
-/*       --input: 43 15% 91%; */
-/*       --primary: 43 50% 69%; */
-/*       --primary-foreground: 43 50% 9%; */
-/*       --secondary: 43 6% 92%; */
-/*       --secondary-foreground: 43 6% 32%; */
-/*       --accent: 43 13% 83%; */
-/*       --accent-foreground: 43 13% 23%; */
-/*       --destructive: 8 84% 20%; */
-/*       --destructive-foreground: 8 84% 80%; */
-/*       --ring: 43 50% 69%; */
-/*       --radius: 0.5rem; */
-/*     } */
-/*    */
-/*     .dark { */
-/*       --background: 43 48% 4%; */
-/*       --foreground: 43 26% 97%; */
-/*       --muted: 43 24% 15%; */
-/*       --muted-foreground: 43 10% 63%; */
-/*       --popover: 43 48% 4%; */
-/*       --popover-foreground: 43 26% 97%; */
-/*       --card: 43 48% 4%; */
-/*       --card-foreground: 43 26% 97%; */
-/*       --border: 43 15% 13%; */
-/*       --input: 43 15% 13%; */
-/*       --primary: 43 50% 69%; */
-/*       --primary-foreground: 43 50% 9%; */
-/*       --secondary: 43 8% 18%; */
-/*       --secondary-foreground: 43 8% 78%; */
-/*       --accent: 43 14% 23%; */
-/*       --accent-foreground: 43 14% 83%; */
-/*       --destructive: 8 84% 52%; */
-/*       --destructive-foreground: 0 0% 100%; */
-/*       --ring: 43 50% 69%; */
-/*     } */
-/*   } */
-
-
 @layer base {
   :root {
-    --background: 258 70% 100%;
-    --foreground: 258 77% 0%;
-    --muted: 258 29% 85%;
-    --muted-foreground: 258 10% 40%;
-    --popover: 258 70% 100%;
-    --popover-foreground: 258 77% 0%;
-    --card: 258 70% 100%;
-    --card-foreground: 258 77% 0%;
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-    --primary: 258 58% 37%;
-    --primary-foreground: 258 58% 97%;
-    --secondary: 258 19% 81%;
-    --secondary-foreground: 258 19% 21%;
-    --accent: 258 19% 81%;
-    --accent-foreground: 258 19% 21%;
-    --destructive: 19 98% 27%;
-    --destructive-foreground: 19 98% 87%;
-    --ring: 258 58% 37%;
+    --background: 43 62% 98%;
+    --foreground: 43 73% 2%;
+    --muted: 43 24% 85%;
+    --muted-foreground: 43 10% 37%;
+    --popover: 43 62% 98%;
+    --popover-foreground: 43 73% 2%;
+    --card: 43 62% 98%;
+    --card-foreground: 43 73% 2%;
+    --border: 43 15% 91%;
+    --input: 43 15% 91%;
+    --primary: 43 50% 69%;
+    --primary-foreground: 43 50% 9%;
+    --secondary: 43 6% 92%;
+    --secondary-foreground: 43 6% 32%;
+    --accent: 43 13% 83%;
+    --accent-foreground: 43 13% 23%;
+    --destructive: 8 84% 20%;
+    --destructive-foreground: 8 84% 80%;
+    --ring: 43 50% 69%;
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 258 53% 3%;
-    --foreground: 258 40% 97%;
-    --muted: 258 29% 15%;
-    --muted-foreground: 258 10% 60%;
-    --popover: 258 53% 3%;
-    --popover-foreground: 258 40% 97%;
-    --card: 258 53% 3%;
-    --card-foreground: 258 40% 97%;
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
-    --primary: 258 58% 37%;
-    --primary-foreground: 258 58% 97%;
-    --secondary: 258 15% 10%;
-    --secondary-foreground: 258 15% 70%;
-    --accent: 258 15% 10%;
-    --accent-foreground: 258 15% 70%;
-    --destructive: 19 98% 46%;
+    --background: 43 48% 4%;
+    --foreground: 43 26% 97%;
+    --muted: 43 24% 15%;
+    --muted-foreground: 43 10% 63%;
+    --popover: 43 48% 4%;
+    --popover-foreground: 43 26% 97%;
+    --card: 43 48% 4%;
+    --card-foreground: 43 26% 97%;
+    --border: 43 15% 13%;
+    --input: 43 15% 13%;
+    --primary: 43 50% 69%;
+    --primary-foreground: 43 50% 9%;
+    --secondary: 43 8% 18%;
+    --secondary-foreground: 43 8% 78%;
+    --accent: 43 14% 23%;
+    --accent-foreground: 43 14% 83%;
+    --destructive: 8 84% 52%;
     --destructive-foreground: 0 0% 100%;
-    --ring: 258 58% 37%;
+    --ring: 43 50% 69%;
   }
 }
 
+/**/
+/* @layer base { */
+/*   :root { */
+/*     --background: 258 70% 100%; */
+/*     --foreground: 258 77% 0%; */
+/*     --muted: 258 29% 85%; */
+/*     --muted-foreground: 258 10% 40%; */
+/*     --popover: 258 70% 100%; */
+/*     --popover-foreground: 258 77% 0%; */
+/*     --card: 258 70% 100%; */
+/*     --card-foreground: 258 77% 0%; */
+/*     --border: 220 13% 91%; */
+/*     --input: 220 13% 91%; */
+/*     --primary: 258 58% 37%; */
+/*     --primary-foreground: 258 58% 97%; */
+/*     --secondary: 258 19% 81%; */
+/*     --secondary-foreground: 258 19% 21%; */
+/*     --accent: 258 19% 81%; */
+/*     --accent-foreground: 258 19% 21%; */
+/*     --destructive: 19 98% 27%; */
+/*     --destructive-foreground: 19 98% 87%; */
+/*     --ring: 258 58% 37%; */
+/*     --radius: 0.5rem; */
+/*   } */
+/**/
+/*   .dark { */
+/*     --background: 258 53% 3%; */
+/*     --foreground: 258 40% 97%; */
+/*     --muted: 258 29% 15%; */
+/*     --muted-foreground: 258 10% 60%; */
+/*     --popover: 258 53% 3%; */
+/*     --popover-foreground: 258 40% 97%; */
+/*     --card: 258 53% 3%; */
+/*     --card-foreground: 258 40% 97%; */
+/*     --border: 215 27.9% 16.9%; */
+/*     --input: 215 27.9% 16.9%; */
+/*     --primary: 258 58% 37%; */
+/*     --primary-foreground: 258 58% 97%; */
+/*     --secondary: 258 15% 10%; */
+/*     --secondary-foreground: 258 15% 70%; */
+/*     --accent: 258 15% 10%; */
+/*     --accent-foreground: 258 15% 70%; */
+/*     --destructive: 19 98% 46%; */
+/*     --destructive-foreground: 0 0% 100%; */
+/*     --ring: 258 58% 37%; */
+/*   } */
+/* } */
+
 
 @layer base {
   * {
diff --git a/src/app/story/create/page.tsx b/src/app/story/create/page.tsx
index ed175ee..d42a4f0 100644
--- a/src/app/story/create/page.tsx
+++ b/src/app/story/create/page.tsx
@@ -3,6 +3,7 @@ import StoryForm from "app/ui/forms/story";
 import prisma from "app/lib/db";
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
+import { CreateContainerContent, CreateContainerHeader, CreateContainer, CreateContainerDescription } from "app/ui/createContainer";
 export default async function Page() {
 	const genres = await getGenres()
 	async function createStory(data) {
@@ -25,5 +26,11 @@ export default async function Page() {
 		revalidatePath("/story")
 		redirect("/story")
 	}
-	return <StoryForm genres={genres} createStory={createStory} />
+	return (
+		<CreateContainer>
+			<CreateContainerHeader>Create Story</CreateContainerHeader>
+			<CreateContainerDescription>Make an entry for a new work of fiction i.e. a thing you intend to submit for publication.</CreateContainerDescription>
+			<CreateContainerContent><StoryForm genres={genres} createStory={createStory} /></CreateContainerContent>
+		</CreateContainer>
+	)
 }
diff --git a/src/app/tailwind.css b/src/app/tailwind.css
index c501cbe..aa67813 100644
--- a/src/app/tailwind.css
+++ b/src/app/tailwind.css
@@ -447,28 +447,50 @@ video {
 }
 
 :root {
-  --background: 258 70% 100%;
-  --foreground: 258 77% 0%;
-  --muted: 258 29% 85%;
-  --muted-foreground: 258 10% 40%;
-  --popover: 258 70% 100%;
-  --popover-foreground: 258 77% 0%;
-  --card: 258 70% 100%;
-  --card-foreground: 258 77% 0%;
-  --border: 220 13% 91%;
-  --input: 220 13% 91%;
-  --primary: 258 58% 37%;
-  --primary-foreground: 258 58% 97%;
-  --secondary: 258 19% 81%;
-  --secondary-foreground: 258 19% 21%;
-  --accent: 258 19% 81%;
-  --accent-foreground: 258 19% 21%;
-  --destructive: 19 98% 27%;
-  --destructive-foreground: 19 98% 87%;
-  --ring: 258 58% 37%;
+  --background: 43 62% 98%;
+  --foreground: 43 73% 2%;
+  --muted: 43 24% 85%;
+  --muted-foreground: 43 10% 37%;
+  --popover: 43 62% 98%;
+  --popover-foreground: 43 73% 2%;
+  --card: 43 62% 98%;
+  --card-foreground: 43 73% 2%;
+  --border: 43 15% 91%;
+  --input: 43 15% 91%;
+  --primary: 43 50% 69%;
+  --primary-foreground: 43 50% 9%;
+  --secondary: 43 6% 92%;
+  --secondary-foreground: 43 6% 32%;
+  --accent: 43 13% 83%;
+  --accent-foreground: 43 13% 23%;
+  --destructive: 8 84% 20%;
+  --destructive-foreground: 8 84% 80%;
+  --ring: 43 50% 69%;
   --radius: 0.5rem;
 }
 
+.dark {
+  --background: 43 48% 4%;
+  --foreground: 43 26% 97%;
+  --muted: 43 24% 15%;
+  --muted-foreground: 43 10% 63%;
+  --popover: 43 48% 4%;
+  --popover-foreground: 43 26% 97%;
+  --card: 43 48% 4%;
+  --card-foreground: 43 26% 97%;
+  --border: 43 15% 13%;
+  --input: 43 15% 13%;
+  --primary: 43 50% 69%;
+  --primary-foreground: 43 50% 9%;
+  --secondary: 43 8% 18%;
+  --secondary-foreground: 43 8% 78%;
+  --accent: 43 14% 23%;
+  --accent-foreground: 43 14% 83%;
+  --destructive: 8 84% 52%;
+  --destructive-foreground: 0 0% 100%;
+  --ring: 43 50% 69%;
+}
+
 * {
   border-color: hsl(var(--border));
 }
@@ -700,6 +722,10 @@ body {
   grid-column-end: 3;
 }
 
+.m-auto {
+  margin: auto;
+}
+
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -758,6 +784,10 @@ body {
   margin-top: 1.5rem;
 }
 
+.mt-auto {
+  margin-top: auto;
+}
+
 .flex {
   display: flex;
 }
@@ -815,6 +845,10 @@ body {
   height: 1rem;
 }
 
+.h-5\/6 {
+  height: 83.333333%;
+}
+
 .h-7 {
   height: 1.75rem;
 }
@@ -827,6 +861,10 @@ body {
   height: 2.25rem;
 }
 
+.h-\[1\.2rem\] {
+  height: 1.2rem;
+}
+
 .h-\[var\(--radix-select-trigger-height\)\] {
   height: var(--radix-select-trigger-height);
 }
@@ -835,6 +873,10 @@ body {
   height: 1px;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
 .max-h-96 {
   max-height: 24rem;
 }
@@ -855,6 +897,10 @@ body {
   width: 66.666667%;
 }
 
+.w-24 {
+  width: 6rem;
+}
+
 .w-3 {
   width: 0.75rem;
 }
@@ -883,6 +929,10 @@ body {
   width: 2.25rem;
 }
 
+.w-\[1\.2rem\] {
+  width: 1.2rem;
+}
+
 .w-\[240px\] {
   width: 240px;
 }
@@ -955,6 +1005,28 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-0 {
+  --tw-rotate: 0deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-90 {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.scale-0 {
+  --tw-scale-x: 0;
+  --tw-scale-y: 0;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -1222,6 +1294,10 @@ body {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .p-6 {
   padding: 1.5rem;
 }
@@ -1499,6 +1575,16 @@ body {
   --tw-ring-offset-color: hsl(var(--background));
 }
 
+.drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.drop-shadow-sm {
+  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1543,98 +1629,100 @@ body {
   animation-duration: 200ms;
 }
 
+/**/
+
 /* @layer base { */
 
-/*     :root { */
+/*   :root { */
 
-/*       --background: 43 62% 98%; */
+/*     --background: 258 70% 100%; */
 
-/*       --foreground: 43 73% 2%; */
+/*     --foreground: 258 77% 0%; */
 
-/*       --muted: 43 24% 85%; */
+/*     --muted: 258 29% 85%; */
 
-/*       --muted-foreground: 43 10% 37%; */
+/*     --muted-foreground: 258 10% 40%; */
 
-/*       --popover: 43 62% 98%; */
+/*     --popover: 258 70% 100%; */
 
-/*       --popover-foreground: 43 73% 2%; */
+/*     --popover-foreground: 258 77% 0%; */
 
-/*       --card: 43 62% 98%; */
+/*     --card: 258 70% 100%; */
 
-/*       --card-foreground: 43 73% 2%; */
+/*     --card-foreground: 258 77% 0%; */
 
-/*       --border: 43 15% 91%; */
+/*     --border: 220 13% 91%; */
 
-/*       --input: 43 15% 91%; */
+/*     --input: 220 13% 91%; */
 
-/*       --primary: 43 50% 69%; */
+/*     --primary: 258 58% 37%; */
 
-/*       --primary-foreground: 43 50% 9%; */
+/*     --primary-foreground: 258 58% 97%; */
 
-/*       --secondary: 43 6% 92%; */
+/*     --secondary: 258 19% 81%; */
 
-/*       --secondary-foreground: 43 6% 32%; */
+/*     --secondary-foreground: 258 19% 21%; */
 
-/*       --accent: 43 13% 83%; */
+/*     --accent: 258 19% 81%; */
 
-/*       --accent-foreground: 43 13% 23%; */
+/*     --accent-foreground: 258 19% 21%; */
 
-/*       --destructive: 8 84% 20%; */
+/*     --destructive: 19 98% 27%; */
 
-/*       --destructive-foreground: 8 84% 80%; */
+/*     --destructive-foreground: 19 98% 87%; */
 
-/*       --ring: 43 50% 69%; */
+/*     --ring: 258 58% 37%; */
 
-/*       --radius: 0.5rem; */
-
-/*     } */
-
-/*    */
-
-/*     .dark { */
-
-/*       --background: 43 48% 4%; */
-
-/*       --foreground: 43 26% 97%; */
-
-/*       --muted: 43 24% 15%; */
-
-/*       --muted-foreground: 43 10% 63%; */
-
-/*       --popover: 43 48% 4%; */
-
-/*       --popover-foreground: 43 26% 97%; */
-
-/*       --card: 43 48% 4%; */
-
-/*       --card-foreground: 43 26% 97%; */
-
-/*       --border: 43 15% 13%; */
-
-/*       --input: 43 15% 13%; */
-
-/*       --primary: 43 50% 69%; */
-
-/*       --primary-foreground: 43 50% 9%; */
-
-/*       --secondary: 43 8% 18%; */
-
-/*       --secondary-foreground: 43 8% 78%; */
-
-/*       --accent: 43 14% 23%; */
-
-/*       --accent-foreground: 43 14% 83%; */
-
-/*       --destructive: 8 84% 52%; */
-
-/*       --destructive-foreground: 0 0% 100%; */
-
-/*       --ring: 43 50% 69%; */
-
-/*     } */
+/*     --radius: 0.5rem; */
 
 /*   } */
 
+/**/
+
+/*   .dark { */
+
+/*     --background: 258 53% 3%; */
+
+/*     --foreground: 258 40% 97%; */
+
+/*     --muted: 258 29% 15%; */
+
+/*     --muted-foreground: 258 10% 60%; */
+
+/*     --popover: 258 53% 3%; */
+
+/*     --popover-foreground: 258 40% 97%; */
+
+/*     --card: 258 53% 3%; */
+
+/*     --card-foreground: 258 40% 97%; */
+
+/*     --border: 215 27.9% 16.9%; */
+
+/*     --input: 215 27.9% 16.9%; */
+
+/*     --primary: 258 58% 37%; */
+
+/*     --primary-foreground: 258 58% 97%; */
+
+/*     --secondary: 258 15% 10%; */
+
+/*     --secondary-foreground: 258 15% 70%; */
+
+/*     --accent: 258 15% 10%; */
+
+/*     --accent-foreground: 258 15% 70%; */
+
+/*     --destructive: 19 98% 46%; */
+
+/*     --destructive-foreground: 0 0% 100%; */
+
+/*     --ring: 258 58% 37%; */
+
+/*   } */
+
+/* } */
+
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }
@@ -2022,6 +2110,28 @@ body {
   --tw-enter-translate-y: -100%;
 }
 
+.dark\:-rotate-90:is(.dark *) {
+  --tw-rotate: -90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.dark\:rotate-0:is(.dark *) {
+  --tw-rotate: 0deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.dark\:scale-0:is(.dark *) {
+  --tw-scale-x: 0;
+  --tw-scale-y: 0;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.dark\:scale-100:is(.dark *) {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 @media (min-width: 640px) {
   .sm\:bottom-0 {
     bottom: 0px;
diff --git a/src/app/ui/createContainer.tsx b/src/app/ui/createContainer.tsx
new file mode 100644
index 0000000..2246eb3
--- /dev/null
+++ b/src/app/ui/createContainer.tsx
@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+
+export function CreateContainerContent({ children, className }: ComponentProps<"div">) {
+  return <div className="mt-6">
+    {children}
+  </div>
+}
+
+export function CreateContainerHeader({ children }: ComponentProps<"h1">) {
+  return <h1 className="text-primary-foreground bg-primary w-full font-black text-3xl p-5">{children}</h1>
+}
+
+export function CreateContainer({ children }: ComponentProps<"div">) {
+  return <div className="w-2/3 m-auto">{children}</div>
+}
+
+export function CreateContainerDescription({ children }: ComponentProps<"p">) {
+  return <p className="mt-4">{children}</p>
+}
diff --git a/src/app/ui/forms/story.tsx b/src/app/ui/forms/story.tsx
index 291d037..ebed74c 100644
--- a/src/app/ui/forms/story.tsx
+++ b/src/app/ui/forms/story.tsx
@@ -22,7 +22,8 @@ import {
 } from "@/components/ui/popover"
 import GenresTrigger from "./genresTrigger"
 import GenreCheckbox from "./genreCheckbox"
-import { useRef, useImperativeHandle } from "react"
+import { useRef, useImperativeHandle, ComponentProps } from "react"
+import { Genre } from "@prisma/client"
 
 const formSchema = z.object({
 	title: z.string().min(2).max(50),
@@ -30,7 +31,7 @@ const formSchema = z.object({
 	genres: z.array(z.number())
 })
 
-export default function StoryForm({ genres, createStory }) {
+export default function StoryForm({ genres, createStory, className }: ComponentProps<"div"> & { genres: Array<Genre>, createStory: (data: any) => void }) {
 	// 1. Define your form.
 	const form = useForm<z.infer<typeof formSchema>>({
 		resolver: zodResolver(formSchema),
@@ -74,65 +75,67 @@ export default function StoryForm({ genres, createStory }) {
 	const { ref, ...rest } = form.register("genres")
 	useImperativeHandle(ref, () => genrePickerRef.current)
 	return (
-		<Form {...form}>
-			<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
-				<FormField
-					control={form.control}
-					name="title"
-					render={({ field }) => (
-						<FormItem>
-							<FormLabel>Title</FormLabel>
-							<FormControl>
-								<Input placeholder="title goes here..." {...field} />
-							</FormControl>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
+		<div className={className}>
+			<Form {...form}>
+				<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+					<FormField
+						control={form.control}
+						name="title"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Title</FormLabel>
+								<FormControl>
+									<Input placeholder="title goes here..." {...field} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
 
-				<FormField
-					control={form.control}
-					name="word_count"
-					render={({ field }) => (
-						<FormItem>
-							<FormLabel>Word count</FormLabel>
-							<FormControl>
-								<Input type="number" step={500} min={0} {...field}></Input>
-							</FormControl>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
+					<FormField
+						control={form.control}
+						name="word_count"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Word count</FormLabel>
+								<FormControl>
+									<Input className="w-24" type="number" step={500} min={0} {...field}></Input>
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
 
-				<FormField
-					control={form.control}
-					name="genres"
-					render={({ field }) => (
-						<FormItem className="flex flex-col">
-							<Popover>
-								<GenresTrigger value={field.value} genres={genres} />
-								<PopoverContent>
-									{genres.map((item) => (
-										<FormField
-											key={item.id}
-											control={form.control}
-											name="genres"
-											render={({ field }) => {
-												return (
-													<GenreCheckbox field={field} item={item} />
-												)
-											}}
-										/>
-									))}
-								</PopoverContent>
-							</Popover>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
+					<FormField
+						control={form.control}
+						name="genres"
+						render={({ field }) => (
+							<FormItem className="flex flex-col">
+								<Popover>
+									<GenresTrigger value={field.value} genres={genres} />
+									<PopoverContent>
+										{genres.map((item) => (
+											<FormField
+												key={item.id}
+												control={form.control}
+												name="genres"
+												render={({ field }) => {
+													return (
+														<GenreCheckbox field={field} item={item} />
+													)
+												}}
+											/>
+										))}
+									</PopoverContent>
+								</Popover>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
 
-				<Button type="submit">Submit</Button>
-			</form>
-		</Form>
+					<Button type="submit">Submit</Button>
+				</form>
+			</Form>
+		</div>
 	)
 }