slop

src/app/admin/_components/AdminSideBar.tsx

@@ -25,7 +25,8 @@ export default function AdminSideBar() {
               <Link href={"/admin/music"}> Manage Music </Link>
             </SimpleSidebarGroup>
             <SimpleSidebarGroup lable="Blog">
-              <Link href={"/"}> Some Blog Action </Link>
+              <Link href={"/admin/blog/create"}> Create Post </Link>
+              <Link href={"/admin/blog/list"}> Post List </Link>
             </SimpleSidebarGroup>
             <SimpleSidebarGroup lable="Chat">
               <Link href={"/admin/chat"}> System Prompt </Link>

src/app/admin/blog/[slug]/page.tsx

@@ -0,0 +1,11 @@
+'use client'
+import { trpc } from '~/app/_trpc/Client'
+import { useParams } from 'next/navigation'
+import CreateUpdateBlogForm from '../_components/CreateUpdateForm'
+
+export default function Page() {
+  const { slug } = useParams<{ slug: string }>()
+  const { data } = trpc.blog.bySlug.useQuery(slug)
+  if (data) return <CreateUpdateBlogForm entity={data} />
+  return <></>
+}

src/app/admin/blog/_components/CreateUpdateForm.tsx

@@ -0,0 +1,93 @@
+'use client'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { trpc } from '~/app/_trpc/Client'
+import { FormScaffold } from '~/app/_components/Form/Components'
+import { FormMutationContextProvider } from '~/app/_components/Form/Components/MutationProvider'
+import { useState } from 'react'
+import { TextInputFormField, MdeFormField } from '~/app/_components/Form/Fields'
+import { usePathname, useRouter } from 'next/navigation'
+import { useTheme } from 'next-themes'
+import type { RouterOutputs } from '~/server/routers/_app'
+
+type BlogPost = RouterOutputs['blog']['bySlug']
+
+const blogPostSchema = z.object({
+  slug: z.string().min(1),
+  title: z.string().min(1),
+  date: z.string().optional(),
+  description: z.string().optional(),
+  content: z.string(),
+})
+
+export default function CreateUpdateBlogForm(params: { className?: string, entity?: BlogPost }) {
+  const [slug, setSlug] = useState<string | undefined>(params.entity?.slug)
+  const [originalSlug, setOriginalSlug] = useState<string | undefined>(params.entity?.slug)
+  const { theme } = useTheme()
+  const form = useForm<z.infer<typeof blogPostSchema>>({
+    resolver: zodResolver(blogPostSchema),
+    defaultValues: {
+      slug: params.entity?.slug ?? '',
+      title: params.entity?.title ?? '',
+      date: params.entity?.date ?? '',
+      description: params.entity?.description ?? '',
+      content: params.entity?.content ?? '',
+    },
+  })
+  const path = usePathname()
+  const router = useRouter()
+
+  const createMutation = trpc.blog.insert.useMutation({
+    onSuccess: (data) => {
+      if (data[0]) {
+        setSlug(data[0].slug)
+        setOriginalSlug(data[0].slug)
+      }
+    },
+  })
+  const updateMutation = trpc.blog.update.useMutation({
+    onSuccess: (data) => {
+      if (data[0]) {
+        setSlug(data[0].slug)
+        setOriginalSlug(data[0].slug)
+      }
+    },
+  })
+  const deleteMutation = trpc.blog.delete.useMutation({
+    onSuccess: () => {
+      if (path.includes('list')) { router.refresh(); return }
+      router.back()
+    },
+  })
+
+  function onSubmit(values: z.infer<typeof blogPostSchema>) {
+    if (slug && originalSlug) {
+      updateMutation.mutate({ ...values, originalSlug })
+    } else {
+      createMutation.mutate(values)
+    }
+  }
+
+  return (
+    <FormMutationContextProvider value={{
+      createMutation: createMutation,
+      updateMutation: updateMutation,
+      deleteMutation: deleteMutation,
+    }}>
+      <FormScaffold
+        form={form}
+        onSubmit={onSubmit}
+        title='Blog Post'
+        id={slug}
+        className={params.className}
+      >
+        <TextInputFormField control={form.control} name='slug' label='Slug' />
+        <TextInputFormField control={form.control} name='title' label='Title' />
+        <TextInputFormField control={form.control} name='date' label='Date (YYYY-MM-DD)' />
+        <TextInputFormField control={form.control} name='description' label='Description' />
+        <MdeFormField control={form.control} name='content' label='Content' dataColorMode={(theme as 'dark' | 'light') ?? 'dark'} />
+      </FormScaffold>
+    </FormMutationContextProvider>
+  )
+}

src/app/admin/blog/create/page.tsx

@@ -0,0 +1,6 @@
+'use client'
+import CreateUpdateBlogForm from '../_components/CreateUpdateForm'
+
+export default function Page() {
+  return <CreateUpdateBlogForm />
+}

src/app/admin/blog/list/page.tsx

@@ -0,0 +1,40 @@
+'use client'
+import Link from 'next/link'
+import { trpc } from '~/app/_trpc/Client'
+import { useGSAP } from '@gsap/react'
+import { useRef } from 'react'
+import * as Card from '~/components/ui/card'
+import { useGsapContext } from '~/app/_providers/GsapProvicer'
+import { CollapsibleForm } from '~/app/_components/Form/Components'
+import CreateUpdateBlogForm from '../_components/CreateUpdateForm'
+
+export default function BlogListPage() {
+  const posts = trpc.blog.list.useQuery(undefined, { refetchInterval: 5000 })
+  const gsap = useGsapContext()
+  const container = useRef<HTMLDivElement>(null)
+  useGSAP(() => {
+    gsap?.from('.gsapan', { x: -100, opacity: 0, duration: 0.5, stagger: { each: 0.3 } })
+  }, { scope: container, dependencies: [posts.status], revertOnUpdate: true })
+
+  return (
+    <div ref={container} className='w-5/6 lg:w-1/2 flex flex-col gap-3'>
+      {posts.data == undefined ?
+        <div className='gsapan' /> :
+        <>
+          {posts.data.map((post) => (
+            <Card.Card className='gsapan' key={post.slug}>
+              <Link href={`/admin/blog/${post.slug}`}>
+                <Card.CardHeader>
+                  <Card.CardTitle>{post.title}</Card.CardTitle>
+                  {post.date && <p className='text-sm text-muted-foreground'>{post.date}</p>}
+                  {post.description && <p className='text-sm text-muted-foreground'>{post.description}</p>}
+                </Card.CardHeader>
+              </Link>
+            </Card.Card>
+          ))}
+          <CollapsibleForm entityName='Blog Post' form={CreateUpdateBlogForm} />
+        </>
+      }
+    </div>
+  )
+}