Banner

pnpm dlx shadcn@latest add @whereui/banner

import { Banner } from "@/components/ui/banner"<Banner variant="info" onClose={() => {}}>  ระบบประเมินผลประจำปีเปิดใช้งานแล้ว</Banner>

"use client"import * as React from "react"import { cva, type VariantProps } from "class-variance-authority"import {  CircleAlertIcon,  CircleCheckIcon,  InfoIcon,  MegaphoneIcon,  TriangleAlertIcon,  XIcon,} from "lucide-react"import { cn } from "cn"const bannerVariants = cva(  "flex w-full items-start gap-2.5 px-4 py-3 text-sm has-data-[slot=banner-close]:pr-2",  {    variants: {      variant: {        neutral: "bg-muted text-foreground",        info: "bg-info-soft text-info",        success: "bg-success-soft text-success",        warning: "bg-warning-soft text-warning",        destructive: "bg-destructive-soft text-destructive",      },    },    defaultVariants: {      variant: "info",    },  })const bannerIcons = {  neutral: MegaphoneIcon,  info: InfoIcon,  success: CircleCheckIcon,  warning: TriangleAlertIcon,  destructive: CircleAlertIcon,} as const// แถบประกาศเต็มความกว้าง — ส่ง onClose เพื่อให้ปิดได้ (ปิดเองภายใน แล้วเรียกกลับ)function Banner({  className,  variant = "info",  onClose,  children,  ...props}: React.ComponentProps<"div"> &  VariantProps<typeof bannerVariants> & {    onClose?: () => void  }) {  const [open, setOpen] = React.useState(true)  const Icon = bannerIcons[variant ?? "info"]  if (!open) return null  return (    <div      data-slot="banner"      data-variant={variant}      role={variant === "destructive" ? "alert" : "status"}      className={cn(bannerVariants({ variant }), className)}      {...props}    >      <Icon aria-hidden="true" className="mt-0.5 size-4 shrink-0" />      <div className="min-w-0 flex-1 py-0.5 [&_a]:underline [&_a]:underline-offset-3">        {children}      </div>      {onClose ? (        <button          type="button"          data-slot="banner-close"          aria-label="ปิดประกาศ"          onClick={() => {            setOpen(false)            onClose()          }}          className="-my-1 grid size-8 shrink-0 place-items-center rounded-lg transition-colors hover:bg-foreground/10"        >          <XIcon className="size-4" />        </button>      ) : null}    </div>  )}export { Banner, bannerVariants }