423 lines
16 KiB
TypeScript
423 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import { Sparkles } from "lucide-react";
|
||
import { useState } from "react";
|
||
|
||
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
const CATEGORIES = [
|
||
{ value: "all", label: "همه" },
|
||
{ value: "data", label: "داده" },
|
||
{ value: "ai", label: "هوش مصنوعی" },
|
||
{ value: "security", label: "امنیت" },
|
||
{ value: "news", label: "اخبار" },
|
||
] as const;
|
||
|
||
type BlogCategory = Exclude<(typeof CATEGORIES)[number]["value"], "all">;
|
||
|
||
const CATEGORY_LABELS: Record<BlogCategory, string> = {
|
||
data: "داده",
|
||
ai: "هوش مصنوعی",
|
||
security: "امنیت",
|
||
news: "اخبار",
|
||
};
|
||
|
||
interface Blog {
|
||
title: string;
|
||
category: BlogCategory;
|
||
date: string;
|
||
author: string[];
|
||
link: string;
|
||
}
|
||
|
||
const blogs: Blog[] = [
|
||
{
|
||
title:
|
||
"کاوش در عمق تکنیک‌ها و کاربردهای تحلیل داده مدرن",
|
||
category: "data",
|
||
date: "۱۴ آذر ۱۴۰۳",
|
||
author: [
|
||
"/block-media/shadcnblocks/block/avatar-1.webp",
|
||
"/block-media/shadcnblocks/block/avatar-2.webp",
|
||
"/block-media/shadcnblocks/block/avatar-3.webp",
|
||
],
|
||
link: "#",
|
||
},
|
||
{
|
||
title:
|
||
"مسیر در چشم‌انداز پیچیده هوش مصنوعی و یادگیری ماشین پیشرفته",
|
||
category: "ai",
|
||
date: "۱۳ آذر ۱۴۰۳",
|
||
author: [
|
||
"/block-media/shadcnblocks/block/avatar-2.webp",
|
||
"/block-media/shadcnblocks/block/avatar-3.webp",
|
||
],
|
||
link: "#",
|
||
},
|
||
{
|
||
title:
|
||
"تقویت دفاع دیجیتال: استراتژی‌های پیشرفته امنیت سایبری برای سازمان‌های مدرن",
|
||
category: "security",
|
||
date: "۱۲ آذر ۱۴۰۳",
|
||
author: [
|
||
"/block-media/shadcnblocks/block/avatar-1.webp",
|
||
"/block-media/shadcnblocks/block/avatar-3.webp",
|
||
],
|
||
link: "#",
|
||
},
|
||
{
|
||
title:
|
||
"درک و کاوش در معماری‌ها و مفاهیم رایانش توزیع‌شده",
|
||
category: "data",
|
||
date: "۱۱ آذر ۱۴۰۳",
|
||
author: ["/block-media/shadcnblocks/block/avatar-2.webp"],
|
||
link: "#",
|
||
},
|
||
{
|
||
title:
|
||
"پیشرفت‌های علمی اخیر در تحقیقات فناوری کوانتومی پیشرفته",
|
||
category: "news",
|
||
date: "۱۰ آذر ۱۴۰۳",
|
||
author: [
|
||
"/block-media/shadcnblocks/block/avatar-1.webp",
|
||
"/block-media/shadcnblocks/block/avatar-2.webp",
|
||
],
|
||
link: "#",
|
||
},
|
||
{
|
||
title:
|
||
"به‌کارگیری یادگیری ماشین در سناریوها و موارد واقعی کسب‌وکار",
|
||
category: "ai",
|
||
date: "۹ آذر ۱۴۰۳",
|
||
author: [
|
||
"/block-media/shadcnblocks/block/avatar-3.webp",
|
||
"/block-media/shadcnblocks/block/avatar-1.webp",
|
||
],
|
||
link: "#",
|
||
},
|
||
{
|
||
title:
|
||
"تدوین استراتژی‌های مؤثر برای تنظیم و بهینه‌سازی کارایی پایگاه داده",
|
||
category: "data",
|
||
date: "۸ آذر ۱۴۰۳",
|
||
author: [
|
||
"/block-media/shadcnblocks/block/avatar-2.webp",
|
||
"/block-media/shadcnblocks/block/avatar-3.webp",
|
||
],
|
||
link: "#",
|
||
},
|
||
{
|
||
title:
|
||
"پیاده‌سازی اصول امنیت Zero Trust در سراسر سازمان",
|
||
category: "security",
|
||
date: "۷ آذر ۱۴۰۳",
|
||
author: ["/block-media/shadcnblocks/block/avatar-1.webp"],
|
||
link: "#",
|
||
},
|
||
{
|
||
title:
|
||
"راهنمای جامع معماری‌ها و توسعه رایانش بدون سرور مدرن",
|
||
category: "ai",
|
||
date: "۶ آذر ۱۴۰۳",
|
||
author: [
|
||
"/block-media/shadcnblocks/block/avatar-2.webp",
|
||
"/block-media/shadcnblocks/block/avatar-3.webp",
|
||
],
|
||
link: "#",
|
||
},
|
||
{
|
||
title:
|
||
"اخبار صنعت: تازه‌ترین به‌روزرسانی‌ها در نوآوری‌های شبکه و فناوری‌های نوظهور",
|
||
category: "news",
|
||
date: "۵ آذر ۱۴۰۳",
|
||
author: [
|
||
"/block-media/shadcnblocks/block/avatar-1.webp",
|
||
"/block-media/shadcnblocks/block/avatar-2.webp",
|
||
"/block-media/shadcnblocks/block/avatar-3.webp",
|
||
],
|
||
link: "#",
|
||
},
|
||
{
|
||
title:
|
||
"تحول تحلیل کلان‌داده: از بینش‌های تاریخی تا مدل‌های پیش‌بینی",
|
||
category: "data",
|
||
date: "۴ آذر ۱۴۰۳",
|
||
author: [
|
||
"/block-media/shadcnblocks/block/avatar-1.webp",
|
||
"/block-media/shadcnblocks/block/avatar-2.webp",
|
||
],
|
||
link: "#",
|
||
},
|
||
{
|
||
title: "روندهای نوظهور در پردازش زبان طبیعی و هوش مصنوعی گفتگومحور",
|
||
category: "ai",
|
||
date: "۳ آذر ۱۴۰۳",
|
||
author: ["/block-media/shadcnblocks/block/avatar-3.webp"],
|
||
link: "#",
|
||
},
|
||
{
|
||
title: "امنیت بلاک‌چین: حفاظت از دارایی‌های دیجیتال در عصر مدرن",
|
||
category: "security",
|
||
date: "۲ آذر ۱۴۰۳",
|
||
author: [
|
||
"/block-media/shadcnblocks/block/avatar-1.webp",
|
||
"/block-media/shadcnblocks/block/avatar-2.webp",
|
||
],
|
||
link: "#",
|
||
},
|
||
{
|
||
title:
|
||
"خبر فوری: پیشرفت‌های انقلابی در کاربردهای رایانش کوانتومی",
|
||
category: "news",
|
||
date: "۱ آذر ۱۴۰۳",
|
||
author: [
|
||
"/block-media/shadcnblocks/block/avatar-1.webp",
|
||
"/block-media/shadcnblocks/block/avatar-2.webp",
|
||
"/block-media/shadcnblocks/block/avatar-3.webp",
|
||
],
|
||
link: "#",
|
||
},
|
||
{
|
||
title: "تحلیل بلادرنگ: پردازش و تجسم داده‌های جریانی",
|
||
category: "data",
|
||
date: "۳۰ آبان ۱۴۰۳",
|
||
author: [
|
||
"/block-media/shadcnblocks/block/avatar-2.webp",
|
||
"/block-media/shadcnblocks/block/avatar-3.webp",
|
||
],
|
||
link: "#",
|
||
},
|
||
{
|
||
title: "معماری‌های یادگیری عمیق برای بینایی ماشین",
|
||
category: "ai",
|
||
date: "۲۹ آبان ۱۴۰۳",
|
||
author: ["/block-media/shadcnblocks/block/avatar-1.webp"],
|
||
link: "#",
|
||
},
|
||
{
|
||
title: "تشخیص پیشرفته تهدید: استفاده از هوش مصنوعی در دفاع سایبری",
|
||
category: "security",
|
||
date: "۲۸ آبان ۱۴۰۳",
|
||
author: [
|
||
"/block-media/shadcnblocks/block/avatar-2.webp",
|
||
"/block-media/shadcnblocks/block/avatar-3.webp",
|
||
],
|
||
link: "#",
|
||
},
|
||
{
|
||
title: "تازه‌ترین تحولات در فناوری‌های پردازش داده ابری‌بومی",
|
||
category: "news",
|
||
date: "۲۷ آبان ۱۴۰۳",
|
||
author: [
|
||
"/block-media/shadcnblocks/block/avatar-1.webp",
|
||
"/block-media/shadcnblocks/block/avatar-3.webp",
|
||
],
|
||
link: "#",
|
||
},
|
||
{
|
||
title: "عملیات یادگیری ماشین: ساده‌سازی گردش‌کار توسعه هوش مصنوعی",
|
||
category: "ai",
|
||
date: "۲۶ آبان ۱۴۰۳",
|
||
author: ["/block-media/shadcnblocks/block/avatar-2.webp"],
|
||
link: "#",
|
||
},
|
||
{
|
||
title: "مقررات حریم خصوصی داده: تضمین انطباق در عملیات جهانی",
|
||
category: "security",
|
||
date: "۲۵ آبان ۱۴۰۳",
|
||
author: [
|
||
"/block-media/shadcnblocks/block/avatar-1.webp",
|
||
"/block-media/shadcnblocks/block/avatar-2.webp",
|
||
"/block-media/shadcnblocks/block/avatar-3.webp",
|
||
],
|
||
link: "#",
|
||
},
|
||
];
|
||
|
||
interface Resources2Props {
|
||
className?: string;
|
||
}
|
||
|
||
const Resources2 = ({ className }: Resources2Props) => {
|
||
const [selectedCategory, setSelectedCategory] = useState("all");
|
||
|
||
const filteredBlogs = blogs.filter(
|
||
(blog) =>
|
||
selectedCategory === "all" || blog.category === selectedCategory,
|
||
);
|
||
|
||
return (
|
||
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
||
<div className="container">
|
||
<h1 className="text-start text-xl font-medium sm:text-2xll md:text-2xll">
|
||
منابع و گزارش‌های تخصصی
|
||
</h1>
|
||
<p className="mt-4 text-start text-lg text-muted-foreground">
|
||
دیدگاه‌ها و تحلیل‌های ما درباره موضوعات کلیدی را کشف کنید.
|
||
</p>
|
||
<div className="mt-10 grid grid-cols-1 gap-4 lg:grid-cols-12">
|
||
<a
|
||
href="#"
|
||
className="group relative isolate overflow-hidden rounded-2xl border border-border transition-transform duration-300 hover:-translate-y-0.5 lg:col-span-7 lg:row-span-2"
|
||
>
|
||
<img
|
||
src="/block-media/shadcnblocks/block/photos/simone-hutsch-ba454dc72896-unsplash.jpg"
|
||
alt="شروع کار با پلتفرم‌ها و زیرساخت دیجیتال مدرن"
|
||
className="size-full max-h-[550px] object-cover grayscale-100 transition-all duration-300 group-hover:grayscale-50"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-primary to-transparent" />
|
||
<div className="absolute inset-0 z-10 flex flex-col justify-between p-8 text-start">
|
||
<Badge className="border border-background/20 bg-background/15 backdrop-blur-sm">
|
||
<Sparkles className="size-4" />
|
||
مطلب ویژه
|
||
</Badge>
|
||
<div className="flex flex-col gap-4">
|
||
<h2 className="text-xl font-medium text-background">
|
||
شروع کار با پلتفرم‌ها و زیرساخت دیجیتال مدرن
|
||
</h2>
|
||
<div className="flex items-center gap-2">
|
||
<time className="text-sm text-background/80">
|
||
۱۴ آذر ۱۴۰۳
|
||
</time>
|
||
<div className="flex items-center -space-x-2">
|
||
<Avatar className="size-6 border border-primary">
|
||
<AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
|
||
</Avatar>
|
||
<Avatar className="size-6 border border-primary">
|
||
<AvatarImage src="/block-media/shadcnblocks/block/avatar-2.webp" />
|
||
</Avatar>
|
||
<Avatar className="size-6 border border-primary">
|
||
<AvatarImage src="/block-media/shadcnblocks/block/avatar-3.webp" />
|
||
</Avatar>
|
||
<span className="z-10 grid size-6 place-items-center rounded-full border border-primary bg-primary/90 text-xs text-background backdrop-blur-sm">
|
||
+۲
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div className="flex flex-col gap-4 lg:col-span-5 lg:row-span-2 lg:flex-col">
|
||
<a
|
||
href="#"
|
||
className="group relative isolate overflow-hidden rounded-2xl border border-border transition-transform duration-300 hover:-translate-y-0.5"
|
||
>
|
||
<img
|
||
src="/block-media/shadcnblocks/block/photos/simone-hutsch-duxeKbu9FDE-unsplash.jpg"
|
||
alt="ساده‌سازی عملیات کسب‌وکار با خودکارسازی گردش کار"
|
||
className="size-full max-h-[267px] object-cover grayscale-100 transition-all duration-300 group-hover:grayscale-50"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-primary to-transparent" />
|
||
<div className="absolute inset-0 z-10 flex flex-col justify-between p-8 text-start">
|
||
<Badge className="border border-background/20 bg-background/15 backdrop-blur-sm">
|
||
جدیدترین
|
||
</Badge>
|
||
<div className="flex flex-col gap-4">
|
||
<h2 className="text-xl font-medium text-background">
|
||
ساده‌سازی عملیات کسب‌وکار با خودکارسازی مؤثر گردش کار
|
||
</h2>
|
||
<div className="flex items-center gap-2">
|
||
<time className="text-sm text-background/80">
|
||
۲۳ بهمن ۱۴۲
|
||
</time>
|
||
<Avatar className="size-6 border border-primary">
|
||
<AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
|
||
</Avatar>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<a
|
||
href="#"
|
||
className="group relative isolate overflow-hidden rounded-2xl border border-border transition-transform duration-300 hover:-translate-y-0.5"
|
||
>
|
||
<img
|
||
src="/block-media/shadcnblocks/block/photos/simone-hutsch-zr8IvMz0OWk-unsplash.jpg"
|
||
alt="بهبود چشمگیر کارایی جستجو"
|
||
className="size-full max-h-[267px] object-cover grayscale-100 transition-all duration-300 group-hover:grayscale-50"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-primary to-transparent" />
|
||
<div className="absolute inset-0 z-10 flex flex-col justify-between p-8 text-start">
|
||
<Badge className="border border-background/20 bg-background/15 backdrop-blur-sm">
|
||
جدیدترین
|
||
</Badge>
|
||
<div className="flex flex-col gap-4">
|
||
<h2 className="text-xl font-medium text-background">
|
||
افزایش کارایی کلی: چگونه کارایی جستجو را به‌طور چشمگیر
|
||
بهبود دادیم
|
||
</h2>
|
||
<div className="flex items-center gap-2">
|
||
<time className="text-sm text-background/80">
|
||
۱۲ فروردین ۱۴۰۴
|
||
</time>
|
||
<Avatar className="size-6 border border-primary">
|
||
<AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
|
||
</Avatar>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div className="mt-24">
|
||
<h2 className="mb-6 text-start text-xl font-medium md:text-3xl">
|
||
آخرین به‌روزرسانی‌ها
|
||
</h2>
|
||
<Tabs
|
||
defaultValue="all"
|
||
className="border-b border-border"
|
||
onValueChange={setSelectedCategory}
|
||
>
|
||
<TabsList className="flex h-auto gap-2 bg-background p-0">
|
||
{CATEGORIES.map((category) => (
|
||
<TabsTrigger
|
||
key={category.value}
|
||
value={category.value}
|
||
className="group relative py-2.5 data-[state=active]:!shadow-none"
|
||
>
|
||
{category.label}
|
||
<span className="absolute -bottom-px group-data-[state=active]:h-px group-data-[state=active]:w-full group-data-[state=active]:bg-primary" />
|
||
</TabsTrigger>
|
||
))}
|
||
</TabsList>
|
||
</Tabs>
|
||
<div className="mt-4">
|
||
{filteredBlogs.map((blog, idx) => (
|
||
<a
|
||
key={idx}
|
||
href={blog.link}
|
||
className="flex flex-col justify-between gap-4 border-b border-border py-6 text-start md:flex-row"
|
||
>
|
||
<h3 className="font-medium md:line-clamp-1">{blog.title}</h3>
|
||
<div className="flex w-full shrink-0 grid-cols-3 justify-between gap-2 md:grid md:max-w-80">
|
||
<p className="text-sm text-muted-foreground">
|
||
{CATEGORY_LABELS[blog.category]}
|
||
</p>
|
||
<time className="text-sm text-muted-foreground">
|
||
{blog.date}
|
||
</time>
|
||
<div className="hidden items-center justify-end -space-x-2 md:flex">
|
||
{blog.author.map((author, authorIdx) => (
|
||
<Avatar
|
||
key={authorIdx}
|
||
className="size-6 border border-border"
|
||
>
|
||
<AvatarImage src={author} />
|
||
</Avatar>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export { Resources2 };
|