add create story page

(it turns out typescript/nextjs is buggy with mjs)

src/app/lib/functions.ts

@@ -0,0 +1,3 @@
+export function letterCase(str: String) {
+	return str.charAt(0).toUpperCase() + str.slice(1)
+}

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

@@ -1,4 +1,5 @@
-import prisma from "../../lib/db.mjs"
+// "use server"
+import prisma from "app/lib/db"
 
 async function getStory(id: string) {
   const story = await prisma.story.findFirst({ where: { id: Number(id) } })

src/app/story/create/page.tsx

@@ -0,0 +1,5 @@
+import StoryForm from "app/ui/forms/story";
+
+export default function Page() {
+	return <StoryForm />
+}

src/app/ui/forms/genreCheckboxes.tsx

@@ -0,0 +1,21 @@
+import prisma from "app/lib/db"
+import React from "react"
+import { letterCase } from "app/lib/functions"
+export default async function GenreCheckboxes() {
+	async function getGenres() {
+		"use server"
+		const genres = await prisma.genre.findMany()
+		return genres
+	}
+	const genres = await getGenres()
+	const genreCheckboxes = genres.map(e => {
+		const label = letterCase(e.name)
+		return (<React.Fragment key={`fragment${e.name}`}>
+			<input type="checkbox" id={e.name} key={`genreCheckboxInput${e.id}`} />
+			<label htmlFor={e.name} key={`genreCheckboxLabel${e.id}`}>{label}</label>
+		</React.Fragment>
+		)
+	})
+	return <>{genreCheckboxes}</>
+
+}

src/app/ui/forms/story.tsx

@@ -0,0 +1,10 @@
+import GenreCheckboxes from "./genreCheckboxes"
+export default async function StoryForm() {
+	return <form>
+		<label htmlFor="title">Title:</label>
+		<input type="text" id="title" />
+		<label htmlFor="word-count">Word Count:</label>
+		<input type="text" id="word-count" />
+		<GenreCheckboxes />
+	</form>
+}

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": "src/",
     "lib": [
       "dom",
       "dom.iterable",
@@ -26,7 +27,8 @@
     "next-env.d.ts",
     ".next/types/**/*.ts",
     "**/*.ts",
-    "**/*.tsx"
+    "**/*.tsx",
+    "src/app/lib/db.ts"
   ],
   "exclude": [
     "node_modules"