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

add styled component for create pages, implement at create/story

This commit is contained in:
andrzej 2024-06-24 12:29:02 +02:00
parent be765fda2a
commit 8d2bf53a1c
5 changed files with 370 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
src/app/globals.css
View File

@ -3,101 +3,101 @@
@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 {
* { * {

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

@ -3,6 +3,7 @@ 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) {
@ -25,5 +26,11 @@ export default async function Page() {
revalidatePath("/story") revalidatePath("/story")
redirect("/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>
)
} }

222
src/app/tailwind.css
View File

@ -447,28 +447,50 @@ video {
} }
: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 {
--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));
} }
@ -700,6 +722,10 @@ 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;
@ -758,6 +784,10 @@ body {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
.mt-auto {
margin-top: auto;
}
.flex { .flex {
display: flex; display: flex;
} }
@ -815,6 +845,10 @@ body {
height: 1rem; height: 1rem;
} }
.h-5\/6 {
height: 83.333333%;
}
.h-7 { .h-7 {
height: 1.75rem; height: 1.75rem;
} }
@ -827,6 +861,10 @@ 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);
} }
@ -835,6 +873,10 @@ body {
height: 1px; height: 1px;
} }
.h-screen {
height: 100vh;
}
.max-h-96 { .max-h-96 {
max-height: 24rem; max-height: 24rem;
} }
@ -855,6 +897,10 @@ body {
width: 66.666667%; width: 66.666667%;
} }
.w-24 {
width: 6rem;
}
.w-3 { .w-3 {
width: 0.75rem; width: 0.75rem;
} }
@ -883,6 +929,10 @@ body {
width: 2.25rem; width: 2.25rem;
} }
.w-\[1\.2rem\] {
width: 1.2rem;
}
.w-\[240px\] { .w-\[240px\] {
width: 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)); 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));
} }
@ -1222,6 +1294,10 @@ body {
padding: 1rem; padding: 1rem;
} }
.p-5 {
padding: 1.25rem;
}
.p-6 { .p-6 {
padding: 1.5rem; padding: 1.5rem;
} }
@ -1499,6 +1575,16 @@ 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);
} }
@ -1543,47 +1629,49 @@ body {
animation-duration: 200ms; animation-duration: 200ms;
} }
/**/
/* @layer base { */ /* @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; */ /* --radius: 0.5rem; */
@ -1593,43 +1681,43 @@ body {
/* .dark { */ /* .dark { */
/* --background: 43 48% 4%; */ /* --background: 258 53% 3%; */
/* --foreground: 43 26% 97%; */ /* --foreground: 258 40% 97%; */
/* --muted: 43 24% 15%; */ /* --muted: 258 29% 15%; */
/* --muted-foreground: 43 10% 63%; */ /* --muted-foreground: 258 10% 60%; */
/* --popover: 43 48% 4%; */ /* --popover: 258 53% 3%; */
/* --popover-foreground: 43 26% 97%; */ /* --popover-foreground: 258 40% 97%; */
/* --card: 43 48% 4%; */ /* --card: 258 53% 3%; */
/* --card-foreground: 43 26% 97%; */ /* --card-foreground: 258 40% 97%; */
/* --border: 43 15% 13%; */ /* --border: 215 27.9% 16.9%; */
/* --input: 43 15% 13%; */ /* --input: 215 27.9% 16.9%; */
/* --primary: 43 50% 69%; */ /* --primary: 258 58% 37%; */
/* --primary-foreground: 43 50% 9%; */ /* --primary-foreground: 258 58% 97%; */
/* --secondary: 43 8% 18%; */ /* --secondary: 258 15% 10%; */
/* --secondary-foreground: 43 8% 78%; */ /* --secondary-foreground: 258 15% 70%; */
/* --accent: 43 14% 23%; */ /* --accent: 258 15% 10%; */
/* --accent-foreground: 43 14% 83%; */ /* --accent-foreground: 258 15% 70%; */
/* --destructive: 8 84% 52%; */ /* --destructive: 19 98% 46%; */
/* --destructive-foreground: 0 0% 100%; */ /* --destructive-foreground: 0 0% 100%; */
/* --ring: 43 50% 69%; */ /* --ring: 258 58% 37%; */
/* } */ /* } */
@ -2022,6 +2110,28 @@ 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 Normal file
View File

@ -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>
}

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

@ -22,7 +22,8 @@ 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 } from "react" import { useRef, useImperativeHandle, ComponentProps } 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),
@ -30,7 +31,7 @@ const formSchema = z.object({
genres: z.array(z.number()) 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. // 1. Define your form.
const form = useForm<z.infer<typeof formSchema>>({ const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema), resolver: zodResolver(formSchema),
@ -74,6 +75,7 @@ export default function StoryForm({ genres, createStory }) {
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
@ -97,7 +99,7 @@ export default function StoryForm({ genres, createStory }) {
<FormItem> <FormItem>
<FormLabel>Word count</FormLabel> <FormLabel>Word count</FormLabel>
<FormControl> <FormControl>
<Input type="number" step={500} min={0} {...field}></Input> <Input className="w-24" type="number" step={500} min={0} {...field}></Input>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@ -134,5 +136,6 @@ export default function StoryForm({ genres, createStory }) {
<Button type="submit">Submit</Button> <Button type="submit">Submit</Button>
</form> </form>
</Form> </Form>
</div>
) )
} }