@arch-cadre/blog-module 1.0.8 → 1.0.9

package/src/ui/views.tsx

@@ -0,0 +1,538 @@
+/** biome-ignore-all lint/a11y/noLabelWithoutControl: <explanation> */
+"use client";
+import { useTranslation } from "@arch-cadre/intl/client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  ArrowLeft,
+  Eye,
+  MessageSquare,
+  Pencil,
+  Plus,
+  Trash2,
+  User as UserIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { createComment, createPost, deletePost, updatePost } from "../actions/index.js";
+import { Button } from "../components/ui/button.js";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "../components/ui/card.js";
+import { Input } from "../components/ui/input.js";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../components/ui/table.js";
+import { Textarea } from "../components/ui/textarea.js";
+import { commentSchema, postSchema } from "../lib/validation.js";
+
+export function BlogListPage({ posts = [] }: { posts?: any[] }) {
+  const { t } = useTranslation();
+  return (
+    <div className="max-w-4xl mx-auto p-6 space-y-8">
+      <header className="border-b pb-6">
+        <h1 className="text-4xl font-black tracking-tighter text-primary">
+          {t("Blog Posts")}
+        </h1>
+        <p className="text-muted-foreground mt-2">
+          {t("Reading your blog posts")}
+        </p>
+      </header>
+      <div className="grid gap-6">
+        {posts.map((post) => (
+          <Link href={`/blog/${post.slug}`} key={post.id}>
+            <Card className="group hover:shadow-lg transition-all cursor-pointer overflow-hidden border-primary/5">
+              <CardHeader>
+                <CardTitle className="text-2xl group-hover:text-primary transition-colors">
+                  {post.title}
+                </CardTitle>
+                <div className="flex items-center gap-2 text-xs text-muted-foreground mt-1">
+                  <UserIcon className="size-3" />
+                  <span>{post.author?.name}</span>
+                  <span>•</span>
+                  <span>{new Date(post.createdAt).toLocaleDateString()}</span>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <p className="text-secondary-foreground line-clamp-2">
+                  {post.content}
+                </p>
+              </CardContent>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// --- Comment Form Component ---
+function CommentForm({ postId }: { postId: string }) {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm({
+    resolver: zodResolver(commentSchema.omit({ postId: true })),
+  });
+
+  const onSubmit = async (data: any) => {
+    const result = await createComment({ ...data, postId });
+    if (result.success) {
+      toast.success(t("Comment added"));
+      reset();
+      router.refresh();
+    } else {
+      toast.error(result.error);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div className="space-y-1">
+        <Textarea
+          {...register("content")}
+          placeholder={t("Add your comment here...")}
+          className={errors.content ? "border-destructive" : ""}
+        />
+        {errors.content && (
+          <p className="text-xs text-destructive">
+            {errors.content.message as string}
+          </p>
+        )}
+      </div>
+      <Button type="submit" disabled={isSubmitting} size="sm">
+        {isSubmitting ? t("Please wait...") : t("Create Comment")}
+      </Button>
+    </form>
+  );
+}
+
+// --- Detail View ---
+export function PostDetailPage({
+  post,
+  comments = [],
+  currentUser,
+}: {
+  post: any;
+  comments: any[];
+  currentUser?: any;
+}) {
+  const { t } = useTranslation();
+
+  if (!post)
+    return <div className="p-20 text-center">{t("Post not found")}</div>;
+
+  return (
+    <div className="max-w-3xl mx-auto p-6 space-y-10 pb-20">
+      <Button asChild variant="ghost" size="sm" className="gap-2">
+        <Link href="/blog">
+          <ArrowLeft className="size-4" /> {t("Back to posts")}
+        </Link>
+      </Button>
+
+      <article className="space-y-6">
+        <div className="space-y-2">
+          <h1 className="text-5xl font-black tracking-tighter leading-tight">
+            {post.title}
+          </h1>
+          <div className="flex items-center gap-3 text-muted-foreground">
+            <div className="size-8 rounded-full bg-primary/10 flex items-center justify-center">
+              <UserIcon className="size-4 text-primary" />
+            </div>
+            <div className="text-sm">
+              <p className="font-bold text-foreground leading-none">
+                {post.author?.name}
+              </p>
+              <p className="text-xs">
+                {new Date(post.createdAt).toLocaleDateString()}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="prose prose-lg dark:prose-invert max-w-none whitespace-pre-wrap pt-4 border-t">
+          {post.content}
+        </div>
+      </article>
+
+      <section className="pt-10 border-t space-y-8">
+        <div className="flex items-center gap-2">
+          <MessageSquare className="size-5" />
+          <h3 className="text-2xl font-bold tracking-tight">
+            {t("Comments")} ({comments.length})
+          </h3>
+        </div>
+
+        {currentUser ? (
+          <div className="bg-muted/30 p-6 rounded-2xl border">
+            <p className="text-sm font-bold mb-4">{t("Leave a comment")}</p>
+            <CommentForm postId={post.id} />
+          </div>
+        ) : (
+          <div className="p-6 bg-amber-50 border border-amber-100 rounded-2xl text-center">
+            <p className="text-sm font-medium text-amber-800">
+              Please{" "}
+              <Link href="/signin" className="underline font-bold">
+                {t("Sign in")}
+              </Link>{" "}
+              {t("to join the conversation.")}
+            </p>
+          </div>
+        )}
+
+        <div className="space-y-6">
+          {comments.map((comment) => (
+            <div key={comment.id} className="flex gap-4">
+              <div className="size-10 rounded-full bg-muted flex items-center justify-center shrink-0">
+                <UserIcon className="size-5 opacity-40" />
+              </div>
+              <div className="space-y-1">
+                <div className="flex items-center gap-2">
+                  <span className="font-bold text-sm">
+                    {comment.author?.name}
+                  </span>
+                  <span className="text-[10px] opacity-50">
+                    {new Date(comment.createdAt).toLocaleDateString()}
+                  </span>
+                </div>
+                <p className="text-sm text-secondary-foreground leading-relaxed">
+                  {comment.content}
+                </p>
+              </div>
+            </div>
+          ))}
+          {comments.length === 0 && (
+            <p className="text-center text-muted-foreground text-sm py-10 italic">
+              {t("No comments yet. Be the first to comment!")}
+            </p>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+// --- Admin View Components ---
+
+export function BlogAdminPage({ posts = [] }: { posts: any[] }) {
+  const router = useRouter();
+  const { t } = useTranslation();
+
+  const handleDelete = async (id: string) => {
+    if (!confirm(t("Confirm deletion of this post?"))) return;
+
+    const result = await deletePost(id);
+    if (result.success) {
+      toast.success(t("Post deleted"));
+      router.refresh();
+    } else {
+      toast.error(t("UnexpectedError") + result.error);
+    }
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <h1 className="text-3xl font-black tracking-tight text-foreground">
+          {t("Blog posts")}
+        </h1>
+        <Button asChild size="sm" className="gap-2">
+          <Link href="/kryo/blog/new">
+            <Plus className="size-4" /> {t("New Post")}
+          </Link>
+        </Button>
+      </div>
+
+      <Card className="border-primary/10 shadow-sm overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[40%]">{t("Title")}</TableHead>
+              <TableHead>{t("Author")}</TableHead>
+              <TableHead>{t("Date")}</TableHead>
+              <TableHead className="text-right">{t("Actions")}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {posts.length === 0 && (
+              <TableRow>
+                <TableCell
+                  colSpan={4}
+                  className="h-24 text-center text-muted-foreground italic"
+                >
+                  {t("No posts found. Create your first post!")}
+                </TableCell>
+              </TableRow>
+            )}
+            {posts.map((post) => (
+              <TableRow key={post.id} className="transition-colors">
+                <TableCell className="font-bold">{post.title}</TableCell>
+                <TableCell className="text-xs">{post.author?.name}</TableCell>
+                <TableCell className="text-muted-foreground text-xs">
+                  {new Date(post.createdAt).toLocaleDateString()}
+                </TableCell>
+                <TableCell className="text-right">
+                  <div className="flex justify-end gap-2">
+                    <Button
+                      asChild
+                      variant="ghost"
+                      size="icon"
+                      className="size-8"
+                    >
+                      <Link href={`/blog/${post.slug}`} target="_blank">
+                        <Eye className="size-4" />
+                      </Link>
+                    </Button>
+                    <Button
+                      asChild
+                      variant="ghost"
+                      size="icon"
+                      className="size-8"
+                    >
+                      <Link href={`/kryo/blog/edit/${post.id}`}>
+                        <Pencil className="size-4" />
+                      </Link>
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="size-8 text-destructive hover:text-destructive hover:bg-destructive/10"
+                      onClick={() => handleDelete(post.id)}
+                    >
+                      <Trash2 className="size-4" />
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </Card>
+    </div>
+  );
+}
+
+export function CreatePostForm() {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm({
+    resolver: zodResolver(postSchema.omit({ slug: true })),
+  });
+
+  const onSubmit = async (data: any) => {
+    const slug = data.title
+      .toLowerCase()
+      .replace(/ /g, "-")
+      .replace(/[^\w-]+/g, "");
+    const result = await createPost({ ...data, slug });
+
+    if (result.success) {
+      toast.success(t("Post created"));
+      router.push("/kryo/blog");
+      router.refresh();
+    } else {
+      toast.error(t("UnexpectedError") + result.error);
+    }
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto p-6 space-y-6">
+      <div className="flex items-center gap-4">
+        <Button asChild variant="outline" size="icon" className="rounded-lg">
+          <Link href="/kryo/blog">
+            <ArrowLeft className="size-4" />
+          </Link>
+        </Button>
+        <h1 className="text-2xl font-black text-foreground">{t("New Post")}</h1>
+      </div>
+
+      <Card className="border-primary/10 shadow-lg">
+        <CardContent className="pt-6">
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <div className="space-y-2">
+              <label className="text-xs font-black uppercase tracking-widest opacity-50 px-1">
+                {t("Title")}
+              </label>
+              <Input
+                {...register("title")}
+                className={
+                  errors.title ? "border-destructive font-bold" : "font-bold"
+                }
+                placeholder={t("Title of your post")}
+              />
+              {errors.title && (
+                <p className="text-xs text-destructive font-bold">
+                  {errors.title.message as string}
+                </p>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-xs font-black uppercase tracking-widest opacity-50 px-1">
+                {t("Content")}
+              </label>
+              <Textarea
+                {...register("content")}
+                rows={12}
+                className={
+                  errors.content
+                    ? "border-destructive resize-none"
+                    : "resize-none"
+                }
+                placeholder={t("Content of your post")}
+              />
+              {errors.content && (
+                <p className="text-xs text-destructive font-bold">
+                  {errors.content.message as string}
+                </p>
+              )}
+            </div>
+
+            <Button
+              type="submit"
+              disabled={isSubmitting}
+              className="w-full  text-sm uppercase tracking-widest transition-all"
+            >
+              {isSubmitting ? t("Please wait...") : t("Publish")}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export function EditPostForm({ post }: { post: any }) {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm({
+    resolver: zodResolver(postSchema),
+    defaultValues: {
+      title: post.title,
+      content: post.content,
+      slug: post.slug,
+    },
+  });
+
+  const onSubmit = async (data: any) => {
+    const result = await updatePost(post.id, data);
+
+    if (result.success) {
+      toast.success(t("Post updated"));
+      router.push("/kryo/blog");
+      router.refresh();
+    } else {
+      toast.error(t("UnexpectedError") + result.error);
+    }
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto p-6 space-y-6">
+      <div className="flex items-center gap-4">
+        <Button asChild variant="outline" size="icon" className="rounded-lg">
+          <Link href="/kryo/blog">
+            <ArrowLeft className="size-4" />
+          </Link>
+        </Button>
+        <h1 className="text-2xl font-black text-foreground">
+          {t("Edit Post")}
+        </h1>
+      </div>
+
+      <Card className="border-primary/10 shadow-lg">
+        <CardContent className="pt-6">
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <div className="space-y-2">
+              <label className="text-xs font-black uppercase tracking-widest opacity-50 px-1">
+                {t("Title")}
+              </label>
+              <Input
+                {...register("title")}
+                className={
+                  errors.title ? "border-destructive font-bold" : "font-bold"
+                }
+                placeholder={t("Title of your post")}
+              />
+              {errors.title && (
+                <p className="text-xs text-destructive font-bold">
+                  {errors.title.message as string}
+                </p>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-xs font-black uppercase tracking-widest opacity-50 px-1">
+                {t("Slug")}
+              </label>
+              <Input
+                {...register("slug")}
+                className={
+                  errors.slug
+                    ? "border-destructive font-mono text-sm"
+                    : "font-mono text-sm"
+                }
+                placeholder={t("Slug URL")}
+              />
+              {errors.slug && (
+                <p className="text-xs text-destructive font-bold">
+                  {errors.slug.message as string}
+                </p>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-xs font-black uppercase tracking-widest opacity-50 px-1">
+                {t("Content")}
+              </label>
+              <Textarea
+                {...register("content")}
+                rows={12}
+                className={
+                  errors.content
+                    ? "border-destructive resize-none"
+                    : "resize-none"
+                }
+                placeholder={t("Content of your post")}
+              />
+              {errors.content && (
+                <p className="text-xs text-destructive font-bold">
+                  {errors.content.message as string}
+                </p>
+              )}
+            </div>
+
+            <Button
+              type="submit"
+              disabled={isSubmitting}
+              className="w-full text-sm uppercase tracking-widest transition-all"
+            >
+              {isSubmitting ? t("Please wait...") : t("Update")}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}