61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowRight, X } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Banner7Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Banner7 = ({ className }: Banner7Props) => {
|
|
const [isVisible, setIsVisible] = useState(true);
|
|
|
|
const handleClose = () => {
|
|
setIsVisible(false);
|
|
};
|
|
|
|
if (!isVisible) return null;
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"flex items-center justify-between gap-2 border-t-3 border-t-primary bg-muted px-4 py-4 dark:bg-card",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="flex flex-1 items-center gap-4 text-sm font-medium md:justify-center md:text-center">
|
|
<p>
|
|
پلن سازمانی اکنون در دسترس است. با امکانات پیشرفته و گزارشدهی جامع، مدیریت تیم را بهبود بخشید
|
|
<a href="#" className="ms-2 whitespace-nowrap underline md:hidden">
|
|
<span>اطلاعات بیشتر</span>
|
|
</a>
|
|
</p>
|
|
<Separator
|
|
orientation="vertical"
|
|
className="hidden self-stretch bg-primary data-[orientation=vertical]:h-auto md:block"
|
|
/>
|
|
<a href="#" className="group hidden items-center gap-2 md:flex">
|
|
<span>اطلاعات بیشتر</span>
|
|
<ArrowRight className="size-4 transition-transform duration-200 group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
|
|
</a>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
aria-label="بستن"
|
|
onClick={handleClose}
|
|
>
|
|
<X />
|
|
</Button>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Banner7 };
|