98 lines
2.7 KiB
TypeScript
98 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { X } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Banner5Props {
|
|
title: string;
|
|
description: string;
|
|
buttonText: string;
|
|
buttonUrl: string;
|
|
defaultVisible?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const Banner5 = ({
|
|
title = "نسخه ۲.۰ منتشر شد",
|
|
description = "قابلیتها و امکانات جدید را بررسی کنید",
|
|
buttonText = "اطلاعات بیشتر",
|
|
buttonUrl = "https://ShadcnBlocks",
|
|
defaultVisible = true,
|
|
className,
|
|
}: Banner5Props) => {
|
|
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-fade-in",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="mx-4">
|
|
<div className="w-full rounded-lg border bg-background p-4 shadow-md">
|
|
<div className="relative flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute top-0 end-0 h-8 w-8 md:hidden"
|
|
aria-label="بستن"
|
|
onClick={handleClose}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
|
|
<div className="flex flex-col items-start gap-3 pt-2 text-start md:flex-row md:items-center md:pt-0">
|
|
<div className="flex flex-col gap-1 md:flex-row md:items-center">
|
|
<p className="text-sm font-medium">{title}</p>
|
|
<p className="text-sm text-muted-foreground">{description}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full md:w-auto"
|
|
asChild
|
|
>
|
|
<a
|
|
href={buttonUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{buttonText}
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="hidden h-8 w-8 md:inline-flex"
|
|
aria-label="بستن"
|
|
onClick={handleClose}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Banner5 };
|