Update + Delete articles

This commit is contained in:
cdricms
2025-02-25 17:49:37 +01:00
parent 793e3748f9
commit a3f716446c
16 changed files with 764 additions and 3357 deletions

View File

@@ -3,8 +3,26 @@ import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { CalendarIcon } from "lucide-react";
import { Blog } from "@/types/types";
import IUser from "@/interfaces/IUser";
import hasPermissions from "@/lib/hasPermissions";
import { Button } from "./ui/button";
import DeleteArticleButton from "./article/delete-button";
import Link from "next/link";
const BlogArticle: React.FC<{ blog: Blog; user?: IUser }> = ({
blog,
user,
}) => {
const UpdateButton = () => {
if (!user || !hasPermissions(user.roles, { blogs: ["update"] })) return;
return (
<Button variant="secondary">
<Link href={`/dashboard/blogs/${blog.blogID}`}>Modifier</Link>
</Button>
);
};
const BlogArticle: React.FC<{ blog: Blog }> = ({ blog }) => {
return (
<article className="mx-auto max-w-3xl px-4 py-8 md:py-12">
<div className="space-y-6">
@@ -28,34 +46,38 @@ const BlogArticle: React.FC<{ blog: Blog }> = ({ blog }) => {
)}
</div>
<div className="flex items-center gap-3">
<Avatar>
<AvatarImage
src={`https://avatar.vercel.sh/blog.author.userId`}
alt={`${blog.author.firstname} ${blog.author.lastname}`}
/>
<AvatarFallback>
{(
blog.author.firstname[0] +
blog.author.lastname[0]
).toUpperCase()}
</AvatarFallback>
</Avatar>
<div>
<p className="font-medium">
{blog.author.firstname} {blog.author.lastname}
</p>
<p className="text-sm text-muted-foreground">idk</p>
<div className="flex justify-between">
<div className="flex items-center gap-3">
<Avatar>
<AvatarImage
src={`https://avatar.vercel.sh/blog.author.userId`}
alt={`${blog.author.firstname} ${blog.author.lastname}`}
/>
<AvatarFallback>
{(
blog.author.firstname[0] +
blog.author.lastname[0]
).toUpperCase()}
</AvatarFallback>
</Avatar>
<div>
<p className="font-medium">
{blog.author.firstname} {blog.author.lastname}
</p>
<p className="text-sm text-muted-foreground">idk</p>
</div>
</div>
<div className="flex gap-2">
<UpdateButton />
<DeleteArticleButton id={blog.blogID} user={user} />
</div>
</div>
<div className="relative aspect-video overflow-hidden rounded-lg">
<Image
<img
src={blog.image ?? "/placeholder.svg"}
alt={blog.title}
className="object-cover"
fill
priority
className="object-contain"
/>
</div>