Status Pill

pnpm dlx shadcn@latest add @whereui/status-pill

import { StatusPill } from "@/components/ui/status-pill"<StatusPill variant="success">อนุมัติ</StatusPill>

import * as React from "react"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "cn"const statusPillVariants = cva(  "inline-flex h-5 w-fit shrink-0 items-center gap-1.5 rounded-4xl px-2 text-xs font-medium whitespace-nowrap",  {    variants: {      variant: {        neutral: "bg-muted text-muted-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: "neutral",    },  })function StatusPill({  className,  variant,  dot = true,  children,  ...props}: React.ComponentProps<"span"> &  VariantProps<typeof statusPillVariants> & {    /** แสดงจุดสีนำหน้าข้อความ */    dot?: boolean  }) {  return (    <span      data-slot="status-pill"      data-variant={variant}      className={cn(statusPillVariants({ variant }), className)}      {...props}    >      {dot ? (        <span          data-slot="status-pill-dot"          aria-hidden="true"          className="size-1.5 shrink-0 rounded-full bg-current"        />      ) : null}      {children}    </span>  )}export { StatusPill, statusPillVariants }