37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import React, { PropsWithChildren, useState } from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import { X } from "lucide-react";
|
|
|
|
type Props = {
|
|
variant?: "alert";
|
|
};
|
|
|
|
export const Banner: React.FC<PropsWithChildren<Props>> = ({ children, variant }) => {
|
|
const [visible, setVisible] = useState(true);
|
|
if (!visible) {
|
|
return null;
|
|
}
|
|
return (
|
|
<div className="fixed inset-x-0 bottom-0 z-50 pointer-events-none sm:flex sm:justify-center sm:px-6 sm:pb-5 lg:px-8">
|
|
<div
|
|
className={cn(
|
|
"pointer-events-auto flex items-center justify-between gap-x-6 px-6 py-2.5 sm:rounded-lg sm:py-3 sm:pl-4 sm:pr-3.5",
|
|
{
|
|
"bg-primary text-primary-foreground": variant === undefined,
|
|
"bg-alert text-alert-foreground": variant === "alert",
|
|
},
|
|
)}
|
|
>
|
|
{children}
|
|
<button type="button" className="-m-1.5 flex-none p-1.5" onClick={() => setVisible(false)}>
|
|
<span className="sr-only">Close</span>
|
|
<X className="w-5 h-5 " aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|