@vilio/blog-module 0.0.3 → 0.0.5

package/dist/ui/views.mjs

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