101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { X } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Banner6Props {
|
|
count?: string;
|
|
description?: string;
|
|
buttonText?: string;
|
|
buttonUrl?: string;
|
|
avatars?: Array<{
|
|
src: string;
|
|
fallback: string;
|
|
}>;
|
|
defaultVisible?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const Banner6 = ({
|
|
description = "بیش از ۲۰۰۰ سازمان در سراسر جهان به ما اعتماد کردهاند",
|
|
avatars = [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/avatar-1.webp",
|
|
fallback: "کاربر",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/avatar-2.webp",
|
|
fallback: "کاربر",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/avatar-3.webp",
|
|
fallback: "کاربر",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/avatar-4.webp",
|
|
fallback: "کاربر",
|
|
},
|
|
],
|
|
defaultVisible = true,
|
|
className,
|
|
}: Banner6Props) => {
|
|
const [isVisible, setIsVisible] = useState(defaultVisible);
|
|
|
|
const handleClose = () => {
|
|
setIsVisible(false);
|
|
};
|
|
|
|
if (!isVisible) return null;
|
|
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"absolute top-4 inset-x-0 z-50 mx-auto max-w-2xl animate-in fade-in slide-in-from-top-2",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="mx-4">
|
|
<div className="w-full rounded-full border bg-background p-4 shadow-md">
|
|
<div className="relative flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex -space-x-2">
|
|
{avatars.map((avatar, i) => (
|
|
<Avatar key={i} className="ring-2 ring-white">
|
|
<AvatarImage
|
|
src={avatar.src}
|
|
alt={`کاربر ${(i + 1).toLocaleString("fa-IR")}`}
|
|
/>
|
|
<AvatarFallback>{avatar.fallback}</AvatarFallback>
|
|
</Avatar>
|
|
))}
|
|
</div>
|
|
<p className="text-start text-sm font-semibold">{description}</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 rounded-full"
|
|
aria-label="بستن"
|
|
onClick={handleClose}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Banner6 };
|