Error State

pnpm dlx shadcn@latest add @whereui/error-state

import { ErrorState } from "@/components/ui/error-state"<ErrorState  description="โหลดรายชื่อพนักงานไม่สำเร็จ"  onRetry={() => refetch()}/>

import * as React from "react"import { CircleAlertIcon } from "lucide-react"import { cn } from "cn"import { Button } from "@/components/ui/button"// หน้า/ส่วนผิดพลาด — โครงตาม empty.tsx (กลางหน้า ข้อความสมดุล) พร้อมปุ่มลองใหม่function ErrorState({  className,  title = "เกิดข้อผิดพลาด",  description = "ไม่สามารถโหลดข้อมูลได้ โปรดลองอีกครั้ง",  onRetry,  retryLabel = "ลองอีกครั้ง",  ...props}: React.ComponentProps<"div"> & {  title?: React.ReactNode  description?: React.ReactNode  /** ถ้าส่งมาจะแสดงปุ่มลองใหม่ */  onRetry?: () => void  retryLabel?: string}) {  return (    <div      data-slot="error-state"      role="alert"      className={cn(        "flex min-h-64 w-full min-w-0 flex-col items-center justify-center gap-4 p-6 text-center",        className      )}      {...props}    >      <CircleAlertIcon        aria-hidden="true"        className="size-10 shrink-0 text-destructive"      />      <div className="flex max-w-sm flex-col gap-1 text-balance">        <div className="font-heading text-base font-medium">{title}</div>        <div className="text-sm text-muted-foreground">{description}</div>      </div>      {onRetry ? (        <Button variant="outline" onClick={onRetry}>          {retryLabel}        </Button>      ) : null}    </div>  )}export { ErrorState }