Update + Delete articles
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user