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
+ return (
+
+ Create Story
+ Make an entry for a new work of fiction i.e. a thing you intend to submit for publication.
+
+
+ )
}
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
+ {children}
+
+}
+
+export function CreateContainerHeader({ children }: ComponentProps<"h1">) {
+ return {children}
+}
+
+export function CreateContainer({ children }: ComponentProps<"div">) {
+ return {children}
+}
+
+export function CreateContainerDescription({ children }: ComponentProps<"p">) {
+ return {children}
+}
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, createStory: (data: any) => void }) {
// 1. Define your form.
const form = useForm>({
resolver: zodResolver(formSchema),
@@ -74,65 +75,67 @@ export default function StoryForm({ genres, createStory }) {
const { ref, ...rest } = form.register("genres")
useImperativeHandle(ref, () => genrePickerRef.current)
return (
-