115 lines
4.2 KiB
TypeScript
115 lines
4.2 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
import { Fragment } from "react";
|
|
|
|
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const news = [
|
|
{
|
|
title:
|
|
"پلتفرم هوش مصنوعی TechFlow اکنون در Azure Marketplace در دسترس است",
|
|
category: "همکاری",
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar-1.webp",
|
|
date: "۲۵ خرداد ۱۴۰۳",
|
|
link: "#",
|
|
},
|
|
{
|
|
title: "CodeSphere: معرفی جدیدترین ابزار توسعه ما",
|
|
category: "بیانیه رسانه‌ای",
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar-2.webp",
|
|
date: "۲۰ خرداد ۱۴۰۳",
|
|
link: "#",
|
|
},
|
|
{
|
|
title:
|
|
"DataViz و CloudNative همکاری در ابزارهای تحلیل نسل بعد را اعلام کردند",
|
|
category: "همکاری",
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar-3.webp",
|
|
date: "۸ خرداد ۱۴۰۳",
|
|
link: "#",
|
|
},
|
|
{
|
|
title:
|
|
"QuantumByte پلتفرم رایانش لبه EdgeCompute را معرفی کرد",
|
|
category: "اخبار",
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar-4.webp",
|
|
date: "۲۳ اردیبهشت ۱۴۰۳",
|
|
link: "#",
|
|
},
|
|
{
|
|
title: "در نشست جهانی DevCon ۲۲۴ در برلین همراه ما باشید",
|
|
category: "بیانیه رسانه‌ای",
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar-5.webp",
|
|
date: "۱۶ اردیبهشت ۱۴۰۳",
|
|
link: "#",
|
|
},
|
|
];
|
|
|
|
interface Resources4Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Resources4 = ({ className }: Resources4Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="flex flex-col items-start justify-between gap-5 lg:flex-row lg:gap-2">
|
|
<div className="flex w-full max-w-56 items-center gap-3 text-start text-sm">
|
|
<span className="size-2 rounded-full bg-primary"></span>
|
|
منابع
|
|
</div>
|
|
<div className="flex-1 text-start">
|
|
<h2 className="text-3xl">
|
|
در جریان بمانید؟
|
|
<br />
|
|
<span className="text-primary/50">
|
|
آخرین به‌روزرسانی‌های ما را کشف کنید.
|
|
</span>
|
|
</h2>
|
|
<div className="mt-14">
|
|
<Separator />
|
|
{news.map((item, idx) => (
|
|
<Fragment key={idx}>
|
|
<a
|
|
href={item.link}
|
|
className="group flex flex-col justify-between gap-10 py-6 text-start transition-all duration-400 lg:flex-row lg:items-center lg:hover:bg-muted"
|
|
>
|
|
<div className="flex items-center gap-2 text-lg transition-all duration-400 lg:group-hover:translate-x-8 rtl:lg:group-hover:-translate-x-8">
|
|
<p className="inline text-pretty text-primary">
|
|
{item.title}
|
|
<ArrowRight className="ms-2 inline size-4 shrink-0 opacity-0 transition-all duration-400 rtl:rotate-180 lg:group-hover:text-primary lg:group-hover:opacity-100" />
|
|
</p>
|
|
</div>
|
|
<div className="flex w-full items-center justify-between transition-all duration-400 lg:max-w-72 lg:group-hover:-translate-x-4 rtl:lg:group-hover:translate-x-4 xl:max-w-80">
|
|
<p className="text-xs text-muted-foreground">
|
|
{item.category}
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<Avatar className="size-7 rounded-full border border-border">
|
|
<AvatarImage src={item.avatar} />
|
|
</Avatar>
|
|
<time className="text-xs text-muted-foreground">
|
|
{item.date}
|
|
</time>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<Separator />
|
|
</Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Resources4 };
|