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 7e7b25cd79
commit 66f5b6ff35
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;
/* @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 {
* {

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 { 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>
)
}

222
src/app/tailwind.css
View File

@ -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,47 +1629,49 @@ body {
animation-duration: 200ms;
}
/**/
/* @layer base { */
/* :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; */
@ -1593,43 +1681,43 @@ body {
/* .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%; */
/* --ring: 43 50% 69%; */
/* --ring: 258 58% 37%; */
/* } */
@ -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;

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"
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,6 +75,7 @@ export default function StoryForm({ genres, createStory }) {
const { ref, ...rest } = form.register("genres")
useImperativeHandle(ref, () => genrePickerRef.current)
return (
<div className={className}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
<FormField
@ -97,7 +99,7 @@ export default function StoryForm({ genres, createStory }) {
<FormItem>
<FormLabel>Word count</FormLabel>
<FormControl>
<Input type="number" step={500} min={0} {...field}></Input>
<Input className="w-24" type="number" step={500} min={0} {...field}></Input>
</FormControl>
<FormMessage />
</FormItem>
@ -134,5 +136,6 @@ export default function StoryForm({ genres, createStory }) {
<Button type="submit">Submit</Button>
</form>
</Form>
</div>
)
}