Resume
/
subman-nextjs
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Resume:8d2bf53a1c9b87109e8a6622017cc20cc6bb4638
Branches Tags
Resume:main
Resume:tests
Resume:containerization
Resume:auth-third-attempt-JWT
Resume:auth-second-attempt
Resume:auth
Resume:refactor
..
compare: Resume:b32aabcd08b8f0432907da7032faeb1dc3fbc046
Branches Tags
Resume:main
Resume:tests
Resume:containerization
Resume:auth-third-attempt-JWT
Resume:auth-second-attempt
Resume:auth
Resume:refactor

No commits in common. "8d2bf53a1c9b87109e8a6622017cc20cc6bb4638" and "b32aabcd08b8f0432907da7032faeb1dc3fbc046" have entirely different histories.
8d2bf53a1c ... b32aabcd08

6 changed files with 231 additions and 370 deletions
Show Stats Expand all files Collapse all files

BIN
prisma/dev.db
View File

Binary file not shown.

170
src/app/globals.css
View File

@ -3,102 +3,102 @@
@tailwind utilities; @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 { */ /* @layer base { */
/* :root { */ /* :root { */
/* --background: 258 70% 100%; */ /* --background: 43 62% 98%; */
/* --foreground: 258 77% 0%; */ /* --foreground: 43 73% 2%; */
/* --muted: 258 29% 85%; */ /* --muted: 43 24% 85%; */
/* --muted-foreground: 258 10% 40%; */ /* --muted-foreground: 43 10% 37%; */
/* --popover: 258 70% 100%; */ /* --popover: 43 62% 98%; */
/* --popover-foreground: 258 77% 0%; */ /* --popover-foreground: 43 73% 2%; */
/* --card: 258 70% 100%; */ /* --card: 43 62% 98%; */
/* --card-foreground: 258 77% 0%; */ /* --card-foreground: 43 73% 2%; */
/* --border: 220 13% 91%; */ /* --border: 43 15% 91%; */
/* --input: 220 13% 91%; */ /* --input: 43 15% 91%; */
/* --primary: 258 58% 37%; */ /* --primary: 43 50% 69%; */
/* --primary-foreground: 258 58% 97%; */ /* --primary-foreground: 43 50% 9%; */
/* --secondary: 258 19% 81%; */ /* --secondary: 43 6% 92%; */
/* --secondary-foreground: 258 19% 21%; */ /* --secondary-foreground: 43 6% 32%; */
/* --accent: 258 19% 81%; */ /* --accent: 43 13% 83%; */
/* --accent-foreground: 258 19% 21%; */ /* --accent-foreground: 43 13% 23%; */
/* --destructive: 19 98% 27%; */ /* --destructive: 8 84% 20%; */
/* --destructive-foreground: 19 98% 87%; */ /* --destructive-foreground: 8 84% 80%; */
/* --ring: 258 58% 37%; */ /* --ring: 43 50% 69%; */
/* --radius: 0.5rem; */ /* --radius: 0.5rem; */
/* } */ /* } */
/* */ /* */
/* .dark { */ /* .dark { */
/* --background: 258 53% 3%; */ /* --background: 43 48% 4%; */
/* --foreground: 258 40% 97%; */ /* --foreground: 43 26% 97%; */
/* --muted: 258 29% 15%; */ /* --muted: 43 24% 15%; */
/* --muted-foreground: 258 10% 60%; */ /* --muted-foreground: 43 10% 63%; */
/* --popover: 258 53% 3%; */ /* --popover: 43 48% 4%; */
/* --popover-foreground: 258 40% 97%; */ /* --popover-foreground: 43 26% 97%; */
/* --card: 258 53% 3%; */ /* --card: 43 48% 4%; */
/* --card-foreground: 258 40% 97%; */ /* --card-foreground: 43 26% 97%; */
/* --border: 215 27.9% 16.9%; */ /* --border: 43 15% 13%; */
/* --input: 215 27.9% 16.9%; */ /* --input: 43 15% 13%; */
/* --primary: 258 58% 37%; */ /* --primary: 43 50% 69%; */
/* --primary-foreground: 258 58% 97%; */ /* --primary-foreground: 43 50% 9%; */
/* --secondary: 258 15% 10%; */ /* --secondary: 43 8% 18%; */
/* --secondary-foreground: 258 15% 70%; */ /* --secondary-foreground: 43 8% 78%; */
/* --accent: 258 15% 10%; */ /* --accent: 43 14% 23%; */
/* --accent-foreground: 258 15% 70%; */ /* --accent-foreground: 43 14% 83%; */
/* --destructive: 19 98% 46%; */ /* --destructive: 8 84% 52%; */
/* --destructive-foreground: 0 0% 100%; */ /* --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 { @layer base {
* { * {
@apply border-border; @apply border-border;

9
src/app/story/create/page.tsx
View File

@ -3,7 +3,6 @@ import StoryForm from "app/ui/forms/story";
import prisma from "app/lib/db"; import prisma from "app/lib/db";
import { revalidatePath } from "next/cache"; import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { CreateContainerContent, CreateContainerHeader, CreateContainer, CreateContainerDescription } from "app/ui/createContainer";
export default async function Page() { export default async function Page() {
const genres = await getGenres() const genres = await getGenres()
async function createStory(data) { async function createStory(data) {
@ -26,11 +25,5 @@ export default async function Page() {
revalidatePath("/story") revalidatePath("/story")
redirect("/story") redirect("/story")
} }
return ( return <StoryForm genres={genres} createStory={createStory} />
<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>
)
} }

222
src/app/tailwind.css
View File

@ -447,50 +447,28 @@ video {
} }
: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; --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)); border-color: hsl(var(--border));
} }
@ -722,10 +700,6 @@ body {
grid-column-end: 3; grid-column-end: 3;
} }
.m-auto {
margin: auto;
}
.-mx-1 { .-mx-1 {
margin-left: -0.25rem; margin-left: -0.25rem;
margin-right: -0.25rem; margin-right: -0.25rem;
@ -784,10 +758,6 @@ body {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
.mt-auto {
margin-top: auto;
}
.flex { .flex {
display: flex; display: flex;
} }
@ -845,10 +815,6 @@ body {
height: 1rem; height: 1rem;
} }
.h-5\/6 {
height: 83.333333%;
}
.h-7 { .h-7 {
height: 1.75rem; height: 1.75rem;
} }
@ -861,10 +827,6 @@ body {
height: 2.25rem; height: 2.25rem;
} }
.h-\[1\.2rem\] {
height: 1.2rem;
}
.h-\[var\(--radix-select-trigger-height\)\] { .h-\[var\(--radix-select-trigger-height\)\] {
height: var(--radix-select-trigger-height); height: var(--radix-select-trigger-height);
} }
@ -873,10 +835,6 @@ body {
height: 1px; height: 1px;
} }
.h-screen {
height: 100vh;
}
.max-h-96 { .max-h-96 {
max-height: 24rem; max-height: 24rem;
} }
@ -897,10 +855,6 @@ body {
width: 66.666667%; width: 66.666667%;
} }
.w-24 {
width: 6rem;
}
.w-3 { .w-3 {
width: 0.75rem; width: 0.75rem;
} }
@ -929,10 +883,6 @@ body {
width: 2.25rem; width: 2.25rem;
} }
.w-\[1\.2rem\] {
width: 1.2rem;
}
.w-\[240px\] { .w-\[240px\] {
width: 240px; width: 240px;
} }
@ -1005,28 +955,6 @@ 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)); 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 {
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: 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));
} }
@ -1294,10 +1222,6 @@ body {
padding: 1rem; padding: 1rem;
} }
.p-5 {
padding: 1.25rem;
}
.p-6 { .p-6 {
padding: 1.5rem; padding: 1.5rem;
} }
@ -1575,16 +1499,6 @@ body {
--tw-ring-offset-color: hsl(var(--background)); --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 {
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: 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);
} }
@ -1629,49 +1543,47 @@ body {
animation-duration: 200ms; animation-duration: 200ms;
} }
/**/
/* @layer base { */ /* @layer base { */
/* :root { */ /* :root { */
/* --background: 258 70% 100%; */ /* --background: 43 62% 98%; */
/* --foreground: 258 77% 0%; */ /* --foreground: 43 73% 2%; */
/* --muted: 258 29% 85%; */ /* --muted: 43 24% 85%; */
/* --muted-foreground: 258 10% 40%; */ /* --muted-foreground: 43 10% 37%; */
/* --popover: 258 70% 100%; */ /* --popover: 43 62% 98%; */
/* --popover-foreground: 258 77% 0%; */ /* --popover-foreground: 43 73% 2%; */
/* --card: 258 70% 100%; */ /* --card: 43 62% 98%; */
/* --card-foreground: 258 77% 0%; */ /* --card-foreground: 43 73% 2%; */
/* --border: 220 13% 91%; */ /* --border: 43 15% 91%; */
/* --input: 220 13% 91%; */ /* --input: 43 15% 91%; */
/* --primary: 258 58% 37%; */ /* --primary: 43 50% 69%; */
/* --primary-foreground: 258 58% 97%; */ /* --primary-foreground: 43 50% 9%; */
/* --secondary: 258 19% 81%; */ /* --secondary: 43 6% 92%; */
/* --secondary-foreground: 258 19% 21%; */ /* --secondary-foreground: 43 6% 32%; */
/* --accent: 258 19% 81%; */ /* --accent: 43 13% 83%; */
/* --accent-foreground: 258 19% 21%; */ /* --accent-foreground: 43 13% 23%; */
/* --destructive: 19 98% 27%; */ /* --destructive: 8 84% 20%; */
/* --destructive-foreground: 19 98% 87%; */ /* --destructive-foreground: 8 84% 80%; */
/* --ring: 258 58% 37%; */ /* --ring: 43 50% 69%; */
/* --radius: 0.5rem; */ /* --radius: 0.5rem; */
@ -1681,43 +1593,43 @@ body {
/* .dark { */ /* .dark { */
/* --background: 258 53% 3%; */ /* --background: 43 48% 4%; */
/* --foreground: 258 40% 97%; */ /* --foreground: 43 26% 97%; */
/* --muted: 258 29% 15%; */ /* --muted: 43 24% 15%; */
/* --muted-foreground: 258 10% 60%; */ /* --muted-foreground: 43 10% 63%; */
/* --popover: 258 53% 3%; */ /* --popover: 43 48% 4%; */
/* --popover-foreground: 258 40% 97%; */ /* --popover-foreground: 43 26% 97%; */
/* --card: 258 53% 3%; */ /* --card: 43 48% 4%; */
/* --card-foreground: 258 40% 97%; */ /* --card-foreground: 43 26% 97%; */
/* --border: 215 27.9% 16.9%; */ /* --border: 43 15% 13%; */
/* --input: 215 27.9% 16.9%; */ /* --input: 43 15% 13%; */
/* --primary: 258 58% 37%; */ /* --primary: 43 50% 69%; */
/* --primary-foreground: 258 58% 97%; */ /* --primary-foreground: 43 50% 9%; */
/* --secondary: 258 15% 10%; */ /* --secondary: 43 8% 18%; */
/* --secondary-foreground: 258 15% 70%; */ /* --secondary-foreground: 43 8% 78%; */
/* --accent: 258 15% 10%; */ /* --accent: 43 14% 23%; */
/* --accent-foreground: 258 15% 70%; */ /* --accent-foreground: 43 14% 83%; */
/* --destructive: 19 98% 46%; */ /* --destructive: 8 84% 52%; */
/* --destructive-foreground: 0 0% 100%; */ /* --destructive-foreground: 0 0% 100%; */
/* --ring: 258 58% 37%; */ /* --ring: 43 50% 69%; */
/* } */ /* } */
@ -2110,28 +2022,6 @@ body {
--tw-enter-translate-y: -100%; --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) { @media (min-width: 640px) {
.sm\:bottom-0 { .sm\:bottom-0 {
bottom: 0px; bottom: 0px;

19
src/app/ui/createContainer.tsx
View File

@ -1,19 +0,0 @@
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>
}

9
src/app/ui/forms/story.tsx
View File

@ -22,8 +22,7 @@ import {
} from "@/components/ui/popover" } from "@/components/ui/popover"
import GenresTrigger from "./genresTrigger" import GenresTrigger from "./genresTrigger"
import GenreCheckbox from "./genreCheckbox" import GenreCheckbox from "./genreCheckbox"
import { useRef, useImperativeHandle, ComponentProps } from "react" import { useRef, useImperativeHandle } from "react"
import { Genre } from "@prisma/client"
const formSchema = z.object({ const formSchema = z.object({
title: z.string().min(2).max(50), title: z.string().min(2).max(50),
@ -31,7 +30,7 @@ const formSchema = z.object({
genres: z.array(z.number()) genres: z.array(z.number())
}) })
export default function StoryForm({ genres, createStory, className }: ComponentProps<"div"> & { genres: Array<Genre>, createStory: (data: any) => void }) { export default function StoryForm({ genres, createStory }) {
// 1. Define your form. // 1. Define your form.
const form = useForm<z.infer<typeof formSchema>>({ const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema), resolver: zodResolver(formSchema),
@ -75,7 +74,6 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
const { ref, ...rest } = form.register("genres") const { ref, ...rest } = form.register("genres")
useImperativeHandle(ref, () => genrePickerRef.current) useImperativeHandle(ref, () => genrePickerRef.current)
return ( return (
<div className={className}>
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8"> <form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
<FormField <FormField
@ -99,7 +97,7 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
<FormItem> <FormItem>
<FormLabel>Word count</FormLabel> <FormLabel>Word count</FormLabel>
<FormControl> <FormControl>
<Input className="w-24" type="number" step={500} min={0} {...field}></Input> <Input type="number" step={500} min={0} {...field}></Input>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@ -136,6 +134,5 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
<Button type="submit">Submit</Button> <Button type="submit">Submit</Button>
</form> </form>
</Form> </Form>
</div>
) )
} }