add styled component for create pages, implement at create/story
This commit is contained in:
parent
7e7b25cd79
commit
66f5b6ff35
|
|
@ -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 {
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue