132 lines
3.6 KiB
TypeScript
132 lines
3.6 KiB
TypeScript
// This template requires the Embla Auto Scroll plugin to be installed:
|
||
//
|
||
// npm install embla-carousel-auto-scroll
|
||
|
||
"use client";
|
||
|
||
import AutoScroll from "embla-carousel-auto-scroll";
|
||
|
||
import {
|
||
Carousel,
|
||
CarouselContent,
|
||
CarouselItem,
|
||
} from "@/components/ui/carousel";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
interface Logo {
|
||
id: string;
|
||
description: string;
|
||
image: string;
|
||
className?: string;
|
||
}
|
||
|
||
interface Logos3Props {
|
||
heading?: string;
|
||
logos?: Logo[];
|
||
className?: string;
|
||
}
|
||
|
||
const Logos3 = ({
|
||
heading = "مورد اعتماد شرکتهای پیشرو",
|
||
logos = [
|
||
{
|
||
id: "logo-1",
|
||
description: "لوگوی ۱",
|
||
image:
|
||
"/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
|
||
className: "h-7 w-auto",
|
||
},
|
||
{
|
||
id: "logo-2",
|
||
description: "لوگوی ۲",
|
||
image:
|
||
"/block-media/shadcnblocks/block/logos/figma-wordmark.svg",
|
||
className: "h-7 w-auto",
|
||
},
|
||
{
|
||
id: "logo-3",
|
||
description: "لوگوی ۳",
|
||
image:
|
||
"/block-media/shadcnblocks/block/logos/nextjs-wordmark.svg",
|
||
className: "h-7 w-auto",
|
||
},
|
||
{
|
||
id: "logo-4",
|
||
description: "لوگوی ۴",
|
||
image:
|
||
"/block-media/shadcnblocks/block/logos/react-wordmark.svg",
|
||
className: "h-7 w-auto",
|
||
},
|
||
{
|
||
id: "logo-5",
|
||
description: "لوگوی ۵",
|
||
image:
|
||
"/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg",
|
||
className: "h-7 w-auto",
|
||
},
|
||
{
|
||
id: "logo-6",
|
||
description: "لوگوی ۶",
|
||
image:
|
||
"/block-media/shadcnblocks/block/logos/supabase-wordmark.svg",
|
||
className: "h-7 w-auto",
|
||
},
|
||
{
|
||
id: "logo-7",
|
||
description: "لوگوی ۷",
|
||
image:
|
||
"/block-media/shadcnblocks/block/logos/tailwind-wordmark.svg",
|
||
className: "h-4 w-auto",
|
||
},
|
||
{
|
||
id: "logo-8",
|
||
description: "لوگوی ۸",
|
||
image:
|
||
"/block-media/shadcnblocks/block/logos/vercel-wordmark.svg",
|
||
className: "h-7 w-auto",
|
||
},
|
||
],
|
||
className,
|
||
}: Logos3Props) => {
|
||
return (
|
||
<section dir="rtl" lang="fa" className={cn("py-64", className)}>
|
||
<div className="container flex flex-col items-center text-center">
|
||
<h1 className="my-6 text-xl font-bold text-pretty lg:text-xl">
|
||
{heading}
|
||
</h1>
|
||
</div>
|
||
<div className="pt-10 md:pt-16 lg:pt-20">
|
||
<div className="relative mx-auto flex items-center justify-center lg:max-w-5xl">
|
||
<Carousel
|
||
opts={{ loop: true, direction: "rtl", align: "start" }}
|
||
plugins={[AutoScroll({ playOnInit: true })]}
|
||
>
|
||
<CarouselContent className="ms-0">
|
||
{logos.map((logo) => (
|
||
<CarouselItem
|
||
key={logo.id}
|
||
className="flex basis-1/3 justify-center ps-0 sm:basis-1/4 md:basis-1/5 lg:basis-1/6"
|
||
>
|
||
<div className="mx-10 flex shrink-0 items-center justify-center">
|
||
<div>
|
||
<img
|
||
src={logo.image}
|
||
alt={logo.description}
|
||
className={logo.className}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</CarouselItem>
|
||
))}
|
||
</CarouselContent>
|
||
</Carousel>
|
||
<div className="absolute inset-y-0 start-0 w-12 bg-linear-to-l from-background to-transparent" />
|
||
<div className="absolute inset-y-0 end-0 w-12 bg-linear-to-r from-background to-transparent" />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export { Logos3 };
|