reui-blocks/blocks/blog21.tsx

"use client";

import { ArrowLeft, ArrowRight, Calendar } from "lucide-react";
import { useEffect, useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import type { CarouselApi } from "@/components/ui/carousel";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

interface DataItem {
  id: string;
  title: string;
  summary: string;
  href: string;
  image: string;
  date: string;
  tag: string;
}

const DATA: DataItem[] = [
  {
    id: "item-1",
    title: "ویژگی‌های کلیدی اپلیکیشن یادداشت ما را بشناسید",
    summary:
      "الگوریتم‌های پیشرفته هوش مصنوعی که زبان انسان را درک و پردازش می‌کنند و ارتباط روان میان کاربر و ماشین را از طریق متن و گفتار ممکن می‌سازند.",
    href: "https://www.ShadcnBlocks",
    image:
      "/block-media/shadcnblocks/block/placeholder-1.svg",
    date: "۲۰ تیر ۱۴۰۳",
    tag: "هوش مصنوعی",
  },
  {
    id: "item-2",
    title: "فناوری بینایی ماشین، تحولی در صنعت",
    summary:
      "قابلیت‌های قدرتمند تشخیص و پردازش تصویر که به سیستم‌های هوش مصنوعی امکان می‌دهد اطلاعات بصری را تحلیل، درک و تفسیر کنند.",
    href: "https://www.ShadcnBlocks",
    image:
      "/block-media/shadcnblocks/block/placeholder-2.svg",
    date: "۲۱ تیر ۱۴۰۳",
    tag: "توسعه",
  },
  {
    id: "item-3",
    title: "اتوماسیون یادگیری ماشین؛ آینده همین حالاست",
    summary:
      "الگوریتم‌های خودبهبودی که از الگوهای داده یاد می‌گیرند تا وظایف پیچیده را خودکار کنند و با کمترین دخالت انسان تصمیم بگیرند.",
    href: "https://www.ShadcnBlocks",
    image:
      "/block-media/shadcnblocks/block/placeholder-3.svg",
    date: "۲۲ تیر ۱۴۰۳",
    tag: "متن‌باز",
  },
  {
    id: "item-4",
    title: "تحلیل پیش‌بینی؛ کلید موفقیت",
    summary:
      "قابلیت‌های پیشرفته پیش‌بینی که داده‌های گذشته را تحلیل می‌کنند تا روندها و نتایج آینده را برآورد کنند و تصمیم‌گیری داده‌محور را ممکن سازند.",
    href: "https://www.ShadcnBlocks",
    image:
      "/block-media/shadcnblocks/block/placeholder-4.svg",
    date: "۲۳ تیر ۱۴۰۳",
    tag: "ویژگی",
  },
  {
    id: "item-5",
    title: "معماری شبکه عصبی؛ آینده همین حالاست",
    summary:
      "مدل‌های پیچیده هوش مصنوعی الهام‌گرفته از ساختار مغز انسان که از طریق یادگیری عمیق و تشخیص الگو، مسائل پیچیده را حل می‌کنند.",
    href: "https://www.ShadcnBlocks",
    image:
      "/block-media/shadcnblocks/block/placeholder-5.svg",
    date: "۲۴ تیر ۱۴۰۳",
    tag: "راهنما",
  },
];

interface Blog21Props {
  className?: string;
}

const Blog21 = ({ className }: Blog21Props) => {
  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
  const [canScrollPrev, setCanScrollPrev] = useState(false);
  const [canScrollNext, setCanScrollNext] = useState(false);

  useEffect(() => {
    if (!carouselApi) {
      return;
    }
    const updateSelection = () => {
      setCanScrollPrev(carouselApi.canScrollPrev());
      setCanScrollNext(carouselApi.canScrollNext());
    };
    updateSelection();
    carouselApi.on("select", updateSelection);
    return () => {
      carouselApi.off("select", updateSelection);
    };
  }, [carouselApi]);

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "bg-linear-to-b from-background to-muted/20 py-24",
        className,
      )}
    >
      <div className="container">
        <div className="mb-12 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
          <div className="space-y-2 text-start">
            <h2 className="text-3xl font-bold tracking-tight md:text-xl">
              آخرین مطالب وبلاگ
            </h2>
            <p className="text-muted-foreground">
              با جدیدترین مقالات و تحلیل‌های ما همراه باشید
                                      </p>
          </div>
          <div className="flex gap-2">
            <Button
              size="icon"
              variant="outline"
              onClick={() => carouselApi?.scrollPrev()}
              disabled={!canScrollPrev}
              className="rounded-full hover:bg-background/80 disabled:opacity-50"
            >
              <ArrowLeft className="size-4 rtl:rotate-180" />
            </Button>
            <Button
              size="icon"
              variant="outline"
              onClick={() => carouselApi?.scrollNext()}
              disabled={!canScrollNext}
              className="rounded-full hover:bg-background/80 disabled:opacity-50"
            >
              <ArrowRight className="size-4 rtl:rotate-180" />
            </Button>
          </div>
        </div>
      </div>
      <Carousel
        setApi={setCarouselApi}
        opts={{
          align: "start",
          loop: true,
          direction: "rtl",
          breakpoints: {
            "(max-width: 768px)": {
              dragFree: true,
            },
          },
        }}
        className="w-full"
      >
        <CarouselContent className="me-[calc(theme(container.padding))] gap-6 2xl:ms-[calc(50vw-700px+theme(container.padding)-20px)] 2xl:me-[calc(50vw-700px+theme(container.padding))]">
          {DATA.map((item) => (
            <CarouselItem
              key={item.id}
              className="px-4 md:basis-1/2 md:ps-4 md:pe-0 lg:basis-1/3"
            >
              <div className="group h-full overflow-hidden rounded-xl border bg-background shadow-sm transition-all hover:shadow-md">
                <a href={item.href} className="flex h-full flex-col">
                  <div className="relative aspect-4/3 w-full overflow-hidden bg-muted">
                    <Badge className="absolute top-4 end-4 z-10">
                      {item.tag}
                    </Badge>
                    <img
                      src={item.image || "/placeholder.svg"}
                      alt={item.title}
                      className="h-full w-full object-cover transition duration-500 group-hover:scale-105"
                    />
                  </div>
                  <div className="flex flex-1 flex-col justify-between p-6 text-start">
                    <div>
                      <h3 className="mb-2 line-clamp-2 text-xl font-semibold tracking-tight">
                        {item.title}
                      </h3>
                      <p className="line-clamp-2 text-muted-foreground">
                        {item.summary}
                      </p>
                    </div>
                    <div className="mt-6 flex items-center justify-between">
                      <Badge variant="secondary" className="rounded-full">
                        <Calendar className="ms-1.5 size-3.5" />
                        <span className="text-xs">{item.date}</span>
                      </Badge>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="rounded-full hover:bg-background"
                      >
                        <ArrowRight className="size-4 rtl:rotate-180" />
                      </Button>
                    </div>
                  </div>
                </a>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>
      <div className="mt-16 flex items-center justify-center">
        <Button
          variant="outline"
          size="lg"
          className="rounded-full px-8 font-medium hover:bg-primary hover:text-primary-foreground"
        >
          مشاهده همه مطالب
        </Button>
      </div>
    </section>
  );
};

export { Blog21 };