Components
Loading preview...
Banner alert inspired by shadcn/ui format
npx shadcn@latest add https://21st.dev/r/serafimcloud/banner"use client"
import { Banner } from "@/components/ui/banner"
import { Button } from "@/components/ui/button"
import { ArrowRight, Eclipse } from "lucide-react"
import { useState } from "react"
function BannerClosable() {
const [isVisible, setIsVisible] = useState(true)
if (!isVisible) return null
return (
<Banner
variant="muted"
className="dark text-foreground"
isClosable
onClose={() => setIsVisible(false)}
>
<div className="flex grow gap-3">
<Eclipse
className="mt-0.5 shrink-0 opacity-60"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
<div className="flex grow flex-col justify-between gap-2 md:flex-row">
<p className="text-sm">
We just added something awesome to make your experience even better.
</p>
<a href="#" className="group whitespace-nowrap text-sm font-medium">
Learn more
<ArrowRight
className="-mt-0.5 ms-1 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
</a>
</div>
</div>
</Banner>
)
}
export { BannerClosable }