gregor/gregorlohaus.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nice category list, markdown

Browse Source
This commit is contained in:
Gregor Lohaus
2025-06-12 23:37:05 +02:00
parent 4f24ef7db0
commit 128269de1f
21 changed files with 664 additions and 509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/admin/cv/category/[id]/page.tsx
View File

@@ -1,11 +1,12 @@
'use server'
import UpdateCvCategoryForm from "./UpdateForm";
import UpdateCvCategoryForm from "../_components/UpdateForm";
export default async function Page({params}:{params: Promise<{id:string}>}) {
console.log(params)
const {id} = await params;
return (
<UpdateCvCategoryForm params={{id:id}}/>
<UpdateCvCategoryForm id={id} className={undefined}/>
)
}

29
src/app/admin/cv/category/_components/CollapsibleForm.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { ChevronsUpDown, Plus } from "lucide-react"
import { Button } from "~/components/ui/button";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "~/components/ui/collapsible";
import { type EntryRouterOutputs } from "~/server/routers/cv/entry";
import type { CategoryRouterOutputs } from "~/server/routers/cv/category";
import { type Element } from "~/lib/utils";
import UpdateCvCategoryForm from "./UpdateForm";
import CreateCvCategoryForm from "./CreateForm";
export default function CollapsibleCvCategoryForm(params:{category:Element<CategoryRouterOutputs['list']>|undefined}) {
return (
<Collapsible >
<CollapsibleTrigger asChild>
<Button variant={"ghost"}>
{ params.category ?
<>{params.category.name} <ChevronsUpDown/></> : <>New <Plus/></>
}
</Button>
</CollapsibleTrigger>
<CollapsibleContent className="autoAlpha">
{
params.category ?
<UpdateCvCategoryForm className="w-full" id={params.category.id} key={params.category.id} /> :
<CreateCvCategoryForm className="w-full"/>
}
</CollapsibleContent>
</Collapsible>
)
}

87
src/app/admin/cv/category/_components/CreateForm.tsx Normal file
View File

@@ -0,0 +1,87 @@
'use client'
import { insertSchema } from "~/lib/schema/cv/category"
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { z } from "zod";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
import { Input } from "~/components/ui/input";
import { Select, SelectContent, SelectTrigger, SelectItem, SelectValue } from "~/components/ui/select";
import { trpc } from "~/app/_trpc/Client";
import { Button } from "~/components/ui/button";
import * as Card from '~/components/ui/card'
export default function CreateCvCategoryForm(params:{className:string|undefined}) {
const form = useForm<z.infer<typeof insertSchema>>({
resolver: zodResolver(insertSchema),
defaultValues: {
id: crypto.randomUUID(),
layoutPosition: "col1"
}
})
const mutation = trpc.cv.category.create.useMutation()
function onSubmit(values: z.infer<typeof insertSchema>) {
mutation.mutate(values)
form.setValue("id",crypto.randomUUID())
}
return (
<Card.Card className={params.className ? params.className : "w-5/6 lg:w-1/2"}>
<Card.CardHeader>
<Card.CardTitle>
Create Category
</Card.CardTitle>
</Card.CardHeader>
<Card.CardContent>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8"
>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>
Name
</FormLabel>
<FormControl>
<Input placeholder="name" onChange={field.onChange} value={field.value == null ? undefined : field.value} />
</FormControl>
</FormItem>
)}
>
</FormField>
<FormField
control={form.control}
name="layoutPosition"
render={({ field }) => (
<FormItem>
<FormLabel>
Layout Position
</FormLabel>
<FormControl>
<Select onValueChange={field.onChange} defaultValue={field.value == null ? undefined : field.value}>
<SelectTrigger>
<SelectValue placeholder={form.getValues().layoutPosition} />
</SelectTrigger>
<SelectContent>
{insertSchema.shape.layoutPosition.unwrap().unwrap().options.map((o) => (
<SelectItem key={o} value={o}> {o} </SelectItem>
))}
</SelectContent>
</Select>
</FormControl>
</FormItem>
)}
>
</FormField>
<Button type="submit"> Create </Button>
<FormMessage className={mutation.status == "success" ? "text-green-500" : "text-red-500"}>
{mutation.error ? mutation.error.message : mutation.status}
</FormMessage>
</form>
</Form>
</Card.CardContent>
</Card.Card>
)
}

64
src/app/admin/cv/category/[id]/UpdateForm.tsx → src/app/admin/cv/category/_components/UpdateForm.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { insertSchema, updateRouteSchema, updateSchema } from "~/lib/schema/cv/category"
import { updateRouteSchema } from "~/lib/schema/cv/category"
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { z } from "zod";
@@ -9,17 +9,19 @@ import { Select, SelectContent, SelectTrigger, SelectItem, SelectValue } from "~
import { trpc } from "~/app/_trpc/Client";
import { Button } from "~/components/ui/button";
import * as Card from '~/components/ui/card'
import { useRouter } from "next/navigation";
import { use } from "react";
export default function UpdateCvCategoryForm({params}:{params:{id:string}}) {
const id = params.id
import { useRouter, usePathname } from "next/navigation";
import { Delete } from "lucide-react";
import { cn } from "~/lib/utils";
export default function UpdateCvCategoryForm(params: { id: string, className: string | undefined }) {
const router = useRouter();
const pathname = usePathname();
const id = params.id;
console.log(id)
const category = trpc.cv.category.get.useQuery({id:id})
const category = trpc.cv.category.get.useQuery({ id: id })
const form = useForm<z.infer<typeof updateRouteSchema>>({
resolver: zodResolver(updateRouteSchema),
defaultValues: {
by: {id: id},
by: { id: id },
update: {
layoutPosition: category.data?.layoutPosition,
name: category.data?.layoutPosition
@@ -27,15 +29,30 @@ export default function UpdateCvCategoryForm({params}:{params:{id:string}}) {
}
})
category.promise.then((data) => {
form.setValue("update.layoutPosition",data?.layoutPosition)
form.setValue("update.name",data?.name)
form.setValue("update.layoutPosition", data?.layoutPosition)
form.setValue("update.name", data?.name)
})
const mutation = trpc.cv.category.update.useMutation({onSuccess: () => {
category.refetch()
}})
const updateMutation = trpc.cv.category.update.useMutation({
onSuccess: () => {
category.refetch()
}
})
const deleteMutation = trpc.cv.category.delete.useMutation({
onSuccess: () => {
if (pathname.includes('list')) {
router.refresh()
} else {
router.back()
}
}
})
const deleteCategory = (id: string) => {
console.log(`deleting ${id}`)
deleteMutation.mutate(id)
}
function onSubmit(values: z.infer<typeof updateRouteSchema>) {
mutation.mutate({
by: {id: id},
updateMutation.mutate({
by: { id: id },
update: {
layoutPosition: values.update.layoutPosition,
name: values.update.name
@@ -44,7 +61,7 @@ export default function UpdateCvCategoryForm({params}:{params:{id:string}}) {
}
if (category.data !== undefined) {
return (
<Card.Card className="w-5/6 lg:w-1/2">
<Card.Card className={params.className ? params.className : "w-5/6 lg:w-1/2"}>
<Card.CardHeader>
<Card.CardTitle>
Update Category
@@ -74,12 +91,12 @@ export default function UpdateCvCategoryForm({params}:{params:{id:string}}) {
<FormField
control={form.control}
name="by.id"
render={({field}) => (
render={({ field }) => (
<FormItem>
<FormControl>
<Input hidden onChange={field.onChange} value={field.value}/>
<Input hidden onChange={field.onChange} value={field.value} />
</FormControl>
</FormItem>
</FormItem>
)}
>
</FormField>
@@ -108,8 +125,13 @@ export default function UpdateCvCategoryForm({params}:{params:{id:string}}) {
>
</FormField>
<Button type="submit"> Update </Button>
<FormMessage className={mutation.status == "success" ? "text-green-500" : "text-red-500"}>
{mutation.error ? mutation.error.message : mutation.status}
<FormMessage className={cn(updateMutation.status == "success" ? "text-green-500" : "text-red-500", "flex flex-row justify-between")}>
{updateMutation.error ? updateMutation.error.message : updateMutation.status}
<Button
className="ml-auto cursor-pointer" variant="destructive" onClick={() => { deleteCategory(id) }}>
Delete
<Delete />
</Button>
</FormMessage>
</form>
</Form>

85
src/app/admin/cv/category/create/page.tsx
View File

@@ -1,87 +1,8 @@
'use client'
import { insertSchema } from "~/lib/schema/cv/category"
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { z } from "zod";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
import { Input } from "~/components/ui/input";
import { Select, SelectContent, SelectTrigger, SelectItem, SelectValue } from "~/components/ui/select";
import { trpc } from "~/app/_trpc/Client";
import { Button } from "~/components/ui/button";
import * as Card from '~/components/ui/card'
import CreateCvCategoryForm from "../_components/CreateForm";
export default function CreateCvCategoryForm() {
const form = useForm<z.infer<typeof insertSchema>>({
resolver: zodResolver(insertSchema),
defaultValues: {
id: crypto.randomUUID(),
layoutPosition: "col1"
}
})
const mutation = trpc.cv.category.create.useMutation()
function onSubmit(values: z.infer<typeof insertSchema>) {
mutation.mutate(values)
form.setValue("id",crypto.randomUUID())
}
export default function Page() {
return (
<Card.Card className="w-5/6 lg:w-1/2">
<Card.CardHeader>
<Card.CardTitle>
Create Category
</Card.CardTitle>
</Card.CardHeader>
<Card.CardContent>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8"
>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>
Name
</FormLabel>
<FormControl>
<Input placeholder="name" onChange={field.onChange} value={field.value == null ? undefined : field.value} />
</FormControl>
</FormItem>
)}
>
</FormField>
<FormField
control={form.control}
name="layoutPosition"
render={({ field }) => (
<FormItem>
<FormLabel>
Layout Position
</FormLabel>
<FormControl>
<Select onValueChange={field.onChange} defaultValue={field.value == null ? undefined : field.value}>
<SelectTrigger>
<SelectValue placeholder={form.getValues().layoutPosition} />
</SelectTrigger>
<SelectContent>
{insertSchema.shape.layoutPosition.unwrap().unwrap().options.map((o) => (
<SelectItem key={o} value={o}> {o} </SelectItem>
))}
</SelectContent>
</Select>
</FormControl>
</FormItem>
)}
>
</FormField>
<Button type="submit"> Create </Button>
<FormMessage className={mutation.status == "success" ? "text-green-500" : "text-red-500"}>
{mutation.error ? mutation.error.message : mutation.status}
</FormMessage>
</form>
</Form>
</Card.CardContent>
</Card.Card>
<CreateCvCategoryForm/>
)
}

45
src/app/admin/cv/category/list/page.tsx
View File

@@ -2,29 +2,18 @@
import Link from "next/link";
import { trpc } from "~/app/_trpc/Client";
import { useGSAP } from '@gsap/react'
import { useEffect, useRef } from "react";
import { useRef } from "react";
import * as Card from '~/components/ui/card'
import { useGsapContext } from "~/app/_providers/GsapProvicer";
import { Button } from "~/components/ui/button";
import { ChevronsUpDown, Delete } from 'lucide-react'
import UpdateCvEntryForm from "../../entry/[id]/UpdateForm";
import { CollapsibleContent, CollapsibleTrigger, Collapsible } from "~/components/ui/collapsible";
import CollapsibleCvEntryForm from "../../entry/_components/CollapsibleForm";
import UpdateCvCategoryForm from "../_components/UpdateForm";
import CollapsibleCvCategoryForm from "../_components/CollapsibleForm";
export default function CvPage() {
const cvCategories = trpc.cv.category.list.useQuery();
const cvCategories = trpc.cv.category.list.useQuery(undefined,{refetchInterval:1000});
const gsap = useGsapContext()
const container = useRef<HTMLDivElement>(null);
const mut = trpc.cv.category.delete.useMutation({
onSuccess: () => {
cvCategories.refetch()
}
})
useEffect(() => { console.log(cvCategories.data) }, [cvCategories.data])
const deleteCategory = (id: string) => {
console.log(`deleting ${id}`)
mut.mutate(id)
}
useGSAP(() => {
gsap?.from('.gsapan', { x: -100, opacity: 0, duration: 0.5, stagger: { each: 0.3 } })
gsap?.from('.gsapan', { x: -100, opacity: 0, duration: 0.5, stagger: { each: 0.3 } });
}, { scope: container, dependencies: [cvCategories.status], revertOnUpdate: true });
return (
<div ref={container} className="w-5/6 lg:w-1/2 flex flex-col gap-3">
@@ -44,8 +33,7 @@ export default function CvPage() {
</Link>
<Card.CardContent className="flex flex-row">
<div className="flex flex-col w-full">
<span>Category id : {cat.id}</span>
<span>Category Position : {cat.layoutPosition}</span>
<UpdateCvCategoryForm id={cat.id} className="w-full" />
<br />
<span>Entries:</span>
<div className="w-full">
@@ -53,30 +41,21 @@ export default function CvPage() {
cat.cvEntry.length > 0 ? (
<>
{cat.cvEntry.map((entry) => (
<Collapsible>
<CollapsibleTrigger>
<Button variant={"ghost"}>
{entry.title} <ChevronsUpDown/>
</Button>
</CollapsibleTrigger>
<CollapsibleContent>
<UpdateCvEntryForm params={{ id: entry.id, className: "w-full" }} key={entry.id} />
</CollapsibleContent>
</Collapsible>
<CollapsibleCvEntryForm key={entry.id} entry={entry} />
))}
</>
) : (<></>)
}
</div>
<div className="flex flex-col w-full">
<CollapsibleCvEntryForm entry={undefined} />
</div>
</div>
<Button
className="ml-auto cursor-pointer" variant="destructive" onClick={() => { deleteCategory(cat.id) }}>
<Delete />
</Button>
</Card.CardContent>
</Card.Card>
)
})}
<CollapsibleCvCategoryForm category={undefined} />
</>
}
</div>

5
src/app/admin/cv/entry/[id]/page.tsx
View File

@@ -1,11 +1,12 @@
'use server'
import UpdateCvEntryForm from "./UpdateForm";
import UpdateCvEntryForm from "../_components/UpdateForm";
export default async function Page({params}:{params: Promise<{id:string}>}) {
console.log(params)
const {id} = await params;
return (
<UpdateCvEntryForm params={{id:id}}/>
<UpdateCvEntryForm params={{id:id, className: undefined}}/>
)
}

29
src/app/admin/cv/entry/_components/CollapsibleForm.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { ChevronsUpDown, Plus } from "lucide-react"
import { Button } from "~/components/ui/button";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "~/components/ui/collapsible";
import { type EntryRouterOutputs } from "~/server/routers/cv/entry";
import type { CategoryRouterOutputs } from "~/server/routers/cv/category";
import { type Element } from "~/lib/utils";
import UpdateCvEntryForm from "./UpdateForm";
import CreateCvEntryForm from "./CreateForm";
export default function CollapsibleCvEntryForm(params:{entry:Element<Element<CategoryRouterOutputs['list']>['cvEntry']>|EntryRouterOutputs['get']|Element<EntryRouterOutputs['list']>|undefined}) {
return (
<Collapsible>
<CollapsibleTrigger asChild>
<Button variant={"ghost"}>
{ params.entry ?
<>{params.entry.title} <ChevronsUpDown/></> : <>New <Plus/></>
}
</Button>
</CollapsibleTrigger>
<CollapsibleContent className="autoAlpha">
{
params.entry ?
<UpdateCvEntryForm params={{ id: params.entry.id, className: "w-full" }} key={params.entry.id} /> :
<CreateCvEntryForm className="w-full"/>
}
</CollapsibleContent>
</Collapsible>
)
}

99
src/app/admin/cv/entry/[id]/UpdateForm.tsx → src/app/admin/cv/entry/_components/CreateForm.tsx
View File

@@ -1,64 +1,51 @@
'use client'
import { updateRouteSchema, updateRouteSchemaCliennt } from "~/lib/schema/cv/entry"
import { insertSchema, insertSchemaForm } from "~/lib/schema/cv/entry"
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { format } from 'date-fns'
import { z } from "zod";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
import { Input } from "~/components/ui/input";
import { Select, SelectContent, SelectTrigger, SelectItem, SelectValue } from "~/components/ui/select";
import { trpc } from "~/app/_trpc/Client";
import { Button } from "~/components/ui/button";
import * as Card from '~/components/ui/card'
import { format } from 'date-fns'
import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
import { cn } from "~/lib/utils";
import { CalendarIcon } from "lucide-react";
import { Calendar } from "~/components/ui/calendar";
import { Textarea } from "~/components/ui/textarea";
export default function UpdateCvEntryForm({ params }: { params: { id: string, className: string|undefined } }) {
console.log(params)
const id = params.id
import { cn } from "~/lib/utils";
import { useState } from "react"
export default function CreateCvEntryForm(params:{className:string|undefined}) {
const categories = trpc.cv.category.list.useQuery()
const entry = trpc.cv.entry.get.useQuery({ id: id })
const form = useForm<z.infer<typeof updateRouteSchemaCliennt>>({
resolver: zodResolver(updateRouteSchemaCliennt),
const form = useForm<z.infer<typeof insertSchemaForm>>({
resolver: zodResolver(insertSchemaForm),
defaultValues: {
by: { id: id },
update: {
categoryId: entry.data?.categoryId,
title: entry.data?.title,
description: entry.data?.description,
}
id: crypto.randomUUID(),
title: "",
description: "",
categoryId: ""
}
})
entry.promise.then((v) => {
form.setValue('update.title',v?.title)
form.setValue('update.description',v?.description);
form.setValue('update.fromTime',new Date(Date.parse(v ? v.fromTime: "")))
form.setValue('update.toTime',new Date(Date.parse(v ? v.toTime: "")))
form.setValue('update.categoryId',v?.categoryId)
const mutation = trpc.cv.entry.create.useMutation({
onSuccess: (data) => { form.setValue("id", data[0] ? data[0].id : "") }
})
const mutation = trpc.cv.entry.update.useMutation({
onSuccess: () => {
entry.refetch()
}
})
function onSubmit(values: z.infer<typeof updateRouteSchemaCliennt>) {
let { title, categoryId, description } = values.update;
mutation.mutate({
by: { id: id },
update: {
fromTime: format(values.update.fromTime, 'yyyy-MM-dd'),
toTime: format(values.update.toTime, 'yyyy-MM-dd'),
title: title,
categoryId: categoryId,
description: description
}
})
function onSubmit(values: z.infer<typeof insertSchemaForm>) {
let { id, title, categoryId, description } = values
let v: z.infer<typeof insertSchema> = {
id: id,
categoryId: categoryId,
description: description,
title: title,
fromTime: format(values.fromTime,'yyyy-MM-dd'),
toTime: format(values.toTime,'yyyy-MM-dd'),
}
mutation.mutate(v)
form.setValue("id", crypto.randomUUID())
}
if (entry.data !== undefined) {
return (
<Card.Card className={params.className ? params.className : "w-5/6 lg:w-1/2"}>
return (
<Card.Card className={params.className ? params.className : "w-5/6 lg:w-1/2"}>
<Card.CardHeader>
<Card.CardTitle>
Create Entry
@@ -72,7 +59,7 @@ export default function UpdateCvEntryForm({ params }: { params: { id: string, cl
>
<FormField
control={form.control}
name="update.categoryId"
name="categoryId"
render={({ field }) => (
<FormItem>
<FormLabel>
@@ -83,11 +70,11 @@ export default function UpdateCvEntryForm({ params }: { params: { id: string, cl
<Select onValueChange={field.onChange} defaultValue={categories.data[0]?.id}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder={categories.data[0]?.name ? categories.data[0]?.name : "Select category"} />
<SelectValue placeholder={categories.data[0]?.name ? categories.data[0]?.name : "Select category" } />
</SelectTrigger>
</FormControl>
<SelectContent>
{categories.data?.map((c) => {
{ categories.data?.map((c) => {
return (<SelectItem value={c.id}> {c.name} </SelectItem>)
})}
</SelectContent>
@@ -99,7 +86,7 @@ export default function UpdateCvEntryForm({ params }: { params: { id: string, cl
/>
<FormField
control={form.control}
name="update.title"
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>
@@ -113,21 +100,21 @@ export default function UpdateCvEntryForm({ params }: { params: { id: string, cl
/>
<FormField
control={form.control}
name="update.description"
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>
Description
</FormLabel>
<FormControl>
<Textarea placeholder="description" onChange={field.onChange} value={field.value == null ? undefined : field.value} />
<Input placeholder="description" onChange={field.onChange} value={field.value == null ? undefined : field.value} />
</FormControl>
</FormItem>
)}
/>
<FormField
control={form.control}
name="update.fromTime"
name="fromTime"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>From Date</FormLabel>
@@ -168,7 +155,7 @@ export default function UpdateCvEntryForm({ params }: { params: { id: string, cl
/>
<FormField
control={form.control}
name="update.toTime"
name="toTime"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>To Date</FormLabel>
@@ -207,7 +194,7 @@ export default function UpdateCvEntryForm({ params }: { params: { id: string, cl
</FormItem>
)}
/>
<Button type="submit"> Update </Button>
<Button type="submit"> Create </Button>
<FormMessage className={mutation.status == "success" ? "text-green-500" : "text-red-500"}>
{mutation.error ? mutation.error.message : mutation.status}
</FormMessage>
@@ -215,11 +202,5 @@ export default function UpdateCvEntryForm({ params }: { params: { id: string, cl
</Form>
</Card.CardContent>
</Card.Card>
)
} else {
return (
<>
</>
)
}
)
}

245
src/app/admin/cv/entry/_components/UpdateForm.tsx Normal file
View File

@@ -0,0 +1,245 @@
'use client'
import { updateRouteSchema, updateRouteSchemaCliennt } from "~/lib/schema/cv/entry"
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { z } from "zod";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
import { Input } from "~/components/ui/input";
import { Select, SelectContent, SelectTrigger, SelectItem, SelectValue } from "~/components/ui/select";
import { trpc } from "~/app/_trpc/Client";
import { Button } from "~/components/ui/button";
import * as Card from '~/components/ui/card'
import { format } from 'date-fns'
import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
import { cn } from "~/lib/utils";
import { CalendarIcon, Delete } from "lucide-react";
import { Calendar } from "~/components/ui/calendar";
import { Textarea } from "~/components/ui/textarea";
import { usePathname, useRouter } from "next/navigation";
export default function UpdateCvEntryForm({ params }: { params: { id: string, className: string | undefined } }) {
console.log(params)
const id = params.id
const categories = trpc.cv.category.list.useQuery()
const entry = trpc.cv.entry.get.useQuery({ id: id })
const router = useRouter();
const pathname = usePathname();
const form = useForm<z.infer<typeof updateRouteSchemaCliennt>>({
resolver: zodResolver(updateRouteSchemaCliennt),
defaultValues: {
by: { id: id },
update: {
categoryId: entry.data?.categoryId,
title: entry.data?.title,
description: entry.data?.description,
}
}
})
entry.promise.then((v) => {
form.setValue('update.title', v?.title)
form.setValue('update.description', v?.description);
form.setValue('update.fromTime', new Date(Date.parse(v ? v.fromTime : "")))
form.setValue('update.toTime', new Date(Date.parse(v ? v.toTime : "")))
form.setValue('update.categoryId', v?.categoryId)
})
const updateMutation = trpc.cv.entry.update.useMutation({
onSuccess: () => {
if (pathname.includes('list')) {
router.refresh()
} else {
router.back()
}
}
})
const deleteMutation = trpc.cv.entry.delete.useMutation({
onSuccess: () => {
}
})
const deleteEntry = (id: string) => {
deleteMutation.mutate(id)
}
function onSubmit(values: z.infer<typeof updateRouteSchemaCliennt>) {
let { title, categoryId, description } = values.update;
updateMutation.mutate({
by: { id: id },
update: {
fromTime: format(values.update.fromTime, 'yyyy-MM-dd'),
toTime: format(values.update.toTime, 'yyyy-MM-dd'),
title: title,
categoryId: categoryId,
description: description
}
})
}
if (entry.data !== undefined) {
return (
<Card.Card className={params.className ? params.className : "w-5/6 lg:w-1/2"}>
<Card.CardHeader>
<Card.CardTitle>
Create Entry
</Card.CardTitle>
</Card.CardHeader>
<Card.CardContent>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8"
>
<FormField
control={form.control}
name="update.categoryId"
render={({ field }) => (
<FormItem>
<FormLabel>
Category
</FormLabel>
{
categories.data ? (
<Select onValueChange={field.onChange} defaultValue={categories.data[0]?.id}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder={categories.data[0]?.name ? categories.data[0]?.name : "Select category"} />
</SelectTrigger>
</FormControl>
<SelectContent>
{categories.data?.map((c) => {
return (<SelectItem key={c.id} value={c.id}> {c.name} </SelectItem>)
})}
</SelectContent>
</Select>
) : <Select></Select>
}
</FormItem>
)}
/>
<FormField
control={form.control}
name="update.title"
render={({ field }) => (
<FormItem>
<FormLabel>
Title
</FormLabel>
<FormControl>
<Input placeholder="title" onChange={field.onChange} value={field.value == null ? undefined : field.value} />
</FormControl>
</FormItem>
)}
/>
<FormField
control={form.control}
name="update.description"
render={({ field }) => (
<FormItem>
<FormLabel>
Description
</FormLabel>
<FormControl>
<Textarea placeholder="description" onChange={field.onChange} value={field.value == null ? undefined : field.value} />
</FormControl>
</FormItem>
)}
/>
<FormField
control={form.control}
name="update.fromTime"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>From Date</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant={"outline"}
className={cn(
"w-[240px] pl-3 text-left font-normal",
!field.value && "text-muted-foreground"
)}
>
{field.value ? (
format(field.value, "PPP")
) : (
<span>Pick a date</span>
)}
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
mode="single"
selected={field.value}
onSelect={field.onChange}
disabled={(date) =>
date > new Date() || date < new Date("1900-01-01")
}
initialFocus
/>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="update.toTime"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>To Date</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant={"outline"}
className={cn(
"w-[240px] pl-3 text-left font-normal",
!field.value && "text-muted-foreground"
)}
>
{field.value ? (
format(field.value, "PPP")
) : (
<span>Pick a date</span>
)}
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
mode="single"
selected={field.value}
onSelect={field.onChange}
disabled={(date) =>
date > new Date() || date < new Date("1900-01-01")
}
initialFocus
/>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit"> Update </Button>
<FormMessage className={cn(updateMutation.status == "success" ? "text-green-500" : "text-red-500", "flex flex-row justify-between")}>
{updateMutation.error ? updateMutation.error.message : updateMutation.status}
<Button
className="ml-auto cursor-pointer" variant="destructive" onClick={() => { deleteEntry(id) }}>
Delete
<Delete />
</Button>
</FormMessage>
</form>
</Form>
</Card.CardContent>
</Card.Card>
)
} else {
return (
<>
</>
)
}
}

204
src/app/admin/cv/entry/create/page.tsx
View File

@@ -1,206 +1,8 @@
'use client'
import { insertSchema, insertSchemaForm } from "~/lib/schema/cv/entry"
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { format } from 'date-fns'
import { z } from "zod";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
import { Input } from "~/components/ui/input";
import { Select, SelectContent, SelectTrigger, SelectItem, SelectValue } from "~/components/ui/select";
import { trpc } from "~/app/_trpc/Client";
import { Button } from "~/components/ui/button";
import * as Card from '~/components/ui/card'
import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
import { CalendarIcon } from "lucide-react";
import { Calendar } from "~/components/ui/calendar";
import { cn } from "~/lib/utils";
import { useState } from "react"
import CreateCvEntryForm from "../_components/CreateForm"
export default function CreateCvEntryForm() {
const categories = trpc.cv.category.list.useQuery()
const form = useForm<z.infer<typeof insertSchemaForm>>({
resolver: zodResolver(insertSchemaForm),
defaultValues: {
id: crypto.randomUUID(),
title: "",
description: "",
categoryId: ""
}
})
const mutation = trpc.cv.entry.create.useMutation({
onSuccess: (data) => { form.setValue("id", data[0] ? data[0].id : "") }
})
function onSubmit(values: z.infer<typeof insertSchemaForm>) {
let { id, title, categoryId, description } = values
let v: z.infer<typeof insertSchema> = {
id: id,
categoryId: categoryId,
description: description,
title: title,
fromTime: format(values.fromTime,'yyyy-MM-dd'),
toTime: format(values.toTime,'yyyy-MM-dd'),
}
mutation.mutate(v)
form.setValue("id", crypto.randomUUID())
}
export default function Page() {
return (
<Card.Card className="w-5/6 lg:w-1/2">
<Card.CardHeader>
<Card.CardTitle>
Create Entry
</Card.CardTitle>
</Card.CardHeader>
<Card.CardContent>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8"
>
<FormField
control={form.control}
name="categoryId"
render={({ field }) => (
<FormItem>
<FormLabel>
Category
</FormLabel>
{
categories.data ? (
<Select onValueChange={field.onChange} defaultValue={categories.data[0]?.id}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder={categories.data[0]?.name ? categories.data[0]?.name : "Select category" } />
</SelectTrigger>
</FormControl>
<SelectContent>
{ categories.data?.map((c) => {
return (<SelectItem value={c.id}> {c.name} </SelectItem>)
})}
</SelectContent>
</Select>
) : <Select></Select>
}
</FormItem>
)}
/>
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>
Title
</FormLabel>
<FormControl>
<Input placeholder="title" onChange={field.onChange} value={field.value == null ? undefined : field.value} />
</FormControl>
</FormItem>
)}
/>
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>
Description
</FormLabel>
<FormControl>
<Input placeholder="description" onChange={field.onChange} value={field.value == null ? undefined : field.value} />
</FormControl>
</FormItem>
)}
/>
<FormField
control={form.control}
name="fromTime"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>From Date</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant={"outline"}
className={cn(
"w-[240px] pl-3 text-left font-normal",
!field.value && "text-muted-foreground"
)}
>
{field.value ? (
format(field.value, "PPP")
) : (
<span>Pick a date</span>
)}
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
mode="single"
selected={field.value}
onSelect={field.onChange}
disabled={(date) =>
date > new Date() || date < new Date("1900-01-01")
}
initialFocus
/>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="toTime"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>To Date</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant={"outline"}
className={cn(
"w-[240px] pl-3 text-left font-normal",
!field.value && "text-muted-foreground"
)}
>
{field.value ? (
format(field.value, "PPP")
) : (
<span>Pick a date</span>
)}
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
mode="single"
selected={field.value}
onSelect={field.onChange}
disabled={(date) =>
date > new Date() || date < new Date("1900-01-01")
}
initialFocus
/>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit"> Create </Button>
<FormMessage className={mutation.status == "success" ? "text-green-500" : "text-red-500"}>
{mutation.error ? mutation.error.message : mutation.status}
</FormMessage>
</form>
</Form>
</Card.CardContent>
</Card.Card>
<CreateCvEntryForm/>
)
}

23
src/app/admin/cv/entry/list/page.tsx
View File

@@ -5,20 +5,11 @@ import { useGSAP } from '@gsap/react'
import { useRef } from "react";
import * as Card from '~/components/ui/card'
import { useGsapContext } from "~/app/_providers/GsapProvicer";
import { Button } from "~/components/ui/button";
import { Delete } from 'lucide-react'
export default function CvPage() {
const cvEntries = trpc.cv.entry.list.useQuery();
const gsap = useGsapContext()
const container = useRef<HTMLDivElement>(null);
const mut = trpc.cv.entry.delete.useMutation({onSuccess: () => {
console.log('success')
cvEntries.refetch()
}})
const deleteEntry = (id: string) => {
console.log(`deleting ${id}`)
mut.mutate(id)
}
useGSAP(() => {
gsap?.from('.gsapan', { x: -100, opacity: 0, duration: 0.5, stagger: { each: 0.3 } })
}, { scope: container, dependencies: [cvEntries.status], revertOnUpdate: true });
@@ -34,20 +25,16 @@ export default function CvPage() {
<Link href={`/admin/cv/entry/${ent.id}`}>
<Card.CardHeader>
<Card.CardTitle>
Entry Name: { ent.title }
Entry Name: {ent.title}
</Card.CardTitle>
</Card.CardHeader>
</Link>
<Card.CardContent className="flex flex-row">
<div>
Category id : {ent.id} <br />
Category Name :
<Link href={`/admin/cv/entry/${ent.categoryId}`}> {ent.category?.name} </Link>
Category id : {ent.id} <br />
Category Name :
<Link href={`/admin/cv/entry/${ent.categoryId}`}> {ent.category?.name} </Link>
</div>
<Button
className="ml-auto cursor-pointer" variant="destructive" onClick={() => { deleteEntry(ent.id) }}>
<Delete />
</Button>
</Card.CardContent>
</Card.Card>
)

3
src/app/cv/_components/CvCategory.tsx
View File

@@ -22,6 +22,9 @@ export default function CvCategory(props:CvCategoryProps) {
</CardHeader>
{(query.data?.cvEntry.length ? query.data?.cvEntry.length : 0 ) > 0 ?
<CardContent>
{query.data?.cvEntry.map((entry) => (
<CvEntry key={entry.id} initialData={entry}/>
))}
</CardContent>
:
<></>

56
src/app/cv/_components/CvEntry.tsx
View File

@@ -1,9 +1,55 @@
import { trpc } from "~/app/_trpc/Client"
import { Card, CardAction, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
import { Skeleton } from "~/components/ui/skeleton"
import type { Element } from "~/lib/utils"
import type { cvEntry } from "~/server/db/schema"
import type { CategoryRouterOutputs } from "~/server/routers/cv/category"
import type { EntryRouterOutputs } from "~/server/routers/cv/entry"
import Markdown from 'marked-react'
import { useEffect, useState } from "react"
export default function CvEntry(params: {
initialData: EntryRouterOutputs['get'] | Element<Element<CategoryRouterOutputs['list']>['cvEntry']>
}) {
const query = trpc.cv.entry.get.useQuery({ id: params.initialData?.id ? params.initialData.id : "" })
const { data } = query
return (
<>
{
data ?
<>
<Card className="w-fit">
<CardHeader>
<CardTitle> {data.title} </CardTitle>
</CardHeader>
<CardContent>
<div>
<Markdown>{data.description ? data.description : undefined}</Markdown>
</div>
</CardContent>
<CardFooter className="text-sm">
{`${data.fromTime}-${data.toTime}`}
</CardFooter>
</Card>
</> :
<>
<Card>
<CardHeader>
<div className="flex flex-row">
<CardTitle> <Skeleton className="h-2rem w-5rem" /> </CardTitle>
<span className="ml-auto text-sm"> <Skeleton className="h-1rem w-3rem" /> - <Skeleton className="h-1rem w-3rem" /> </span>
</div>
</CardHeader>
<CardContent>
<div>
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</CardContent>
</Card>
export type CvEntryProps = typeof cvEntry
export default function CvEntry(cvEntry: CvEntryProps) {
const query = trpc.cv.entry.list.useQuery()
return (<></>)
</>
}
</>
)
}

39
src/app/cv/page.tsx
View File

@@ -2,10 +2,8 @@
import { useGSAP } from "@gsap/react";
import { useGsapContext } from "../_providers/GsapProvicer";
import { trpc } from "../_trpc/Client";
import { useRef, useState } from "react";
import type { Element } from "~/lib/utils";
import { Card } from "~/components/ui/card";
import { SidebarContent, SidebarProvider, Sidebar, SidebarTrigger } from "~/components/ui/sidebar";
import { useRef } from "react";
import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sidebar";
import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
import CvCategory from "./_components/CvCategory";
export default function CvPage() {
@@ -30,8 +28,6 @@ export default function CvPage() {
return { y: 100, opacity: 0, duration: 0.5 }
}
}
type DataElement = Element<typeof categories.data>
useGSAP(() => {
const items = gsap?.utils.toArray<GSAPTweenTarget>('.gsapan');
const tl = gsap?.timeline();
@@ -56,7 +52,7 @@ export default function CvPage() {
<SidebarContent className="p-2">
{categories.data.filter((cat) => cat.layoutPosition == 'sidebar').map((cat) => {
return (
<CvCategory layout="col" initialData={cat} />
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
</SidebarContent>
@@ -65,29 +61,32 @@ export default function CvPage() {
<></>
}
<div className="h-full w-full flex flex-wrap flex-row p-2 ">
<div id="mainwrap" className="flex flex-wrap w-full flex-col">
<div id="header" className="flex flex-wrap w-full h-1/4 flex-row">
<div id="mainwrap" className="flex w-full flex-col gap-[1rem]">
<div id="header" className="flex w-full h-fit flex-row">
{categories.data.filter((cat) => cat.layoutPosition == 'header').map((cat) => {
return (
<CvCategory layout="row" initialData={cat} />
<CvCategory layout="row" initialData={cat} key={cat.id} />
)
})}
</div>
<div id="colwrapper" className="flex flex-wrap flex-row w-full h-3/4">
<div id="col1" className="flex flex-col w-full lg:w-1/2 h-full">
<div id="colwrapper" className="flex flex-col md:flex-row w-full h-3/4 gap-[1rem]">
<div id="col1" className="flex flex-col w-full h-full">
{categories.data.filter((cat) => cat.layoutPosition == 'col1').map((cat) => {
return (
<CvCategory layout="col" initialData={cat} />
)
})}
</div>
<div id="col2" className="flex flex-wrap flex-col w-full lg:w-1/2 h-full">
{categories.data.filter((cat) => cat.layoutPosition == 'col2').map((cat) => {
return (
<CvCategory layout="col" initialData={cat} />
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
</div>
{categories.data.filter((cat) => cat.layoutPosition == 'col2').length > 0 ?
<div id="col2" className="flex flex-wrap flex-col w-full lg:w-1/2 h-full">
{categories.data.filter((cat) => cat.layoutPosition == 'col2').map((cat) => {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
</div> :
<></>
}
</div>
</div>
</div>

3
src/server/routers/cv/category.ts
View File

@@ -5,7 +5,7 @@ import { eq } from "drizzle-orm";
import { isAdmin } from "~/app/actions";
import * as Schemas from "~/lib/schema/cv/category"
import { TRPCError } from "@trpc/server";
import { TRPCError, type inferRouterOutputs } from "@trpc/server";
import { z } from "zod";
export const CategoryRouter = router({
@@ -72,3 +72,4 @@ export const CategoryRouter = router({
})
})
export type CategoryRouterOutputs = inferRouterOutputs<typeof CategoryRouter>

3
src/server/routers/cv/entry.ts
View File

@@ -5,7 +5,7 @@ import { eq } from "drizzle-orm";
import { isAdmin } from "~/app/actions";
import * as Schemas from "~/lib/schema/cv/entry"
import { TRPCError } from "@trpc/server";
import { TRPCError, type inferRouterOutputs } from "@trpc/server";
import { z } from "zod";
export const EntryRouter = router({
@@ -72,3 +72,4 @@ export const EntryRouter = router({
})
})
export type EntryRouterOutputs = inferRouterOutputs<typeof EntryRouter>

126
src/styles/globals.css
View File

@@ -47,72 +47,72 @@
}
:root {
--radius: 0.1rem;
--background: oklch(1 0 0);
--foreground: oklch(0.129 0.042 264.695);
--card: oklch(1 0 0);
--card-foreground: oklch(0.129 0.042 264.695);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.129 0.042 264.695);
--primary: oklch(0.208 0.042 265.755);
--primary-foreground: oklch(0.984 0.003 247.858);
--secondary: oklch(0.968 0.007 247.896);
--secondary-foreground: oklch(0.208 0.042 265.755);
--muted: oklch(0.968 0.007 247.896);
--muted-foreground: oklch(0.554 0.046 257.417);
--accent: oklch(0.968 0.007 247.896);
--accent-foreground: oklch(0.208 0.042 265.755);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.929 0.013 255.508);
--input: oklch(0.929 0.013 255.508);
--ring: oklch(0.704 0.04 256.788);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.984 0.003 247.858);
--sidebar-foreground: oklch(0.129 0.042 264.695);
--sidebar-primary: oklch(0.208 0.042 265.755);
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
--sidebar-accent: oklch(0.968 0.007 247.896);
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
--sidebar-border: oklch(0.929 0.013 255.508);
--sidebar-ring: oklch(0.704 0.04 256.788);
--radius: 0rem;
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
--card: oklch(1 0 0);
--card-foreground: oklch(0.141 0.005 285.823);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.141 0.005 285.823);
--primary: oklch(0.705 0.213 47.604);
--primary-foreground: oklch(0.98 0.016 73.684);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.967 0.001 286.375);
--muted-foreground: oklch(0.552 0.016 285.938);
--accent: oklch(0.967 0.001 286.375);
--accent-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.92 0.004 286.32);
--input: oklch(0.92 0.004 286.32);
--ring: oklch(0.705 0.213 47.604);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.141 0.005 285.823);
--sidebar-primary: oklch(0.705 0.213 47.604);
--sidebar-primary-foreground: oklch(0.98 0.016 73.684);
--sidebar-accent: oklch(0.967 0.001 286.375);
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
--sidebar-border: oklch(0.92 0.004 286.32);
--sidebar-ring: oklch(0.705 0.213 47.604);
}
.dark {
--background: oklch(0.129 0.042 264.695);
--foreground: oklch(0.984 0.003 247.858);
--card: oklch(0.208 0.042 265.755);
--card-foreground: oklch(0.984 0.003 247.858);
--popover: oklch(0.208 0.042 265.755);
--popover-foreground: oklch(0.984 0.003 247.858);
--primary: oklch(0.929 0.013 255.508);
--primary-foreground: oklch(0.208 0.042 265.755);
--secondary: oklch(0.279 0.041 260.031);
--secondary-foreground: oklch(0.984 0.003 247.858);
--muted: oklch(0.279 0.041 260.031);
--muted-foreground: oklch(0.704 0.04 256.788);
--accent: oklch(0.279 0.041 260.031);
--accent-foreground: oklch(0.984 0.003 247.858);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.551 0.027 264.364);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.208 0.042 265.755);
--sidebar-foreground: oklch(0.984 0.003 247.858);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
--sidebar-accent: oklch(0.279 0.041 260.031);
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.551 0.027 264.364);
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.21 0.006 285.885);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.646 0.222 41.116);
--primary-foreground: oklch(0.98 0.016 73.684);
--secondary: oklch(0.274 0.006 286.033);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.274 0.006 286.033);
--muted-foreground: oklch(0.705 0.015 286.067);
--accent: oklch(0.274 0.006 286.033);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.646 0.222 41.116);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.21 0.006 285.885);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.646 0.222 41.116);
--sidebar-primary-foreground: oklch(0.98 0.016 73.684);
--sidebar-accent: oklch(0.274 0.006 286.033);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.646 0.222 41.116);
}
@layer base {