124 lines
3.9 KiB
TypeScript
124 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
|
|
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface BlogPost7Props {
|
|
title: string;
|
|
image: string;
|
|
description: string;
|
|
topNote: string;
|
|
author: {
|
|
name: string;
|
|
image: string;
|
|
description: string;
|
|
};
|
|
secondaryDescription: string;
|
|
className?: string;
|
|
}
|
|
|
|
const formatPersianDate = (date: Date) =>
|
|
new Intl.DateTimeFormat("fa-IR", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
}).format(date);
|
|
|
|
const Blogpost7 = ({
|
|
title = "طراحی پایدار در عصر دیجیتال",
|
|
description =
|
|
"چرا رویه‌های مسئولانه زیست‌محیطی در محصولات دیجیتال برای آینده فناوری اهمیت دارد.",
|
|
image = "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
|
topNote = formatPersianDate(new Date("2025-01-22")),
|
|
author = {
|
|
name: "سارا احمدی",
|
|
image: "/block-media/shadcnblocks/block/avatar-1.webp",
|
|
description: "مهندس ارشد نرم‌افزار",
|
|
},
|
|
secondaryDescription =
|
|
"ما با طراحی و توسعه محصولات دیجیتال، ایده‌ها را به راهکارهایی کاربردی، مقیاس‌پذیر و ماندگار تبدیل می‌کنیم.",
|
|
className,
|
|
}: BlogPost7Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"grid min-h-lvh gap-10 p-6 md:grid-cols-2 lg:gap-20",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="h-full overflow-hidden rounded-xl">
|
|
<img
|
|
src={image}
|
|
alt={title}
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div className="grid items-center">
|
|
<div className="flex max-w-lg flex-col gap-10 text-start">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 60 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
viewport={{ once: true }}
|
|
className="text-xs text-muted-foreground xl:text-base"
|
|
>
|
|
{topNote}
|
|
</motion.div>
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 60 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-xl font-bold md:text-2xll"
|
|
>
|
|
{title}
|
|
</motion.h1>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 60 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
viewport={{ once: true }}
|
|
className="text-xs font-medium text-muted-foreground lg:text-base"
|
|
>
|
|
{description}
|
|
</motion.div>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 60 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
viewport={{ once: true }}
|
|
className="flex gap-4"
|
|
>
|
|
<Avatar className="size-14 border">
|
|
<AvatarImage src={author.image} alt={author.name} />
|
|
</Avatar>
|
|
<div>
|
|
<h2 className="font-semibold xl:text-lg">{author.name}</h2>
|
|
<p className="font-medium text-muted-foreground xl:text-lg">
|
|
{author.description}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<Separator />
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 60 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<p className="text-3xl font-medium">{secondaryDescription}</p>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Blogpost7 };
|