44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import {
|
|
Empty,
|
|
EmptyContent,
|
|
EmptyDescription,
|
|
EmptyHeader,
|
|
EmptyMedia,
|
|
EmptyTitle,
|
|
} from "@/components/ui/empty"
|
|
import { IconStack } from "@/components/reui/icon-stack"
|
|
import { InboxIcon } from "lucide-react"
|
|
import { cn } from "@/lib/utils"
|
|
import type { ReactNode } from "react"
|
|
|
|
interface EmptyStateProps {
|
|
icon?: ReactNode
|
|
title: string
|
|
description?: string
|
|
action?: ReactNode
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* ReUI Empty + IconStack — Frame-friendly empty-state-14/12.
|
|
* Preview: https://reui.io/preview/base/empty-state-14 · https://reui.io/preview/base/empty-state-12
|
|
*/
|
|
function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
|
|
return (
|
|
<Empty className={cn("border-0 bg-transparent py-16", className)}>
|
|
<EmptyHeader className="gap-5">
|
|
<EmptyMedia className="mb-0">
|
|
<IconStack aria-hidden="true" className="h-14 w-12">
|
|
{icon ?? <InboxIcon strokeWidth={1.9} aria-hidden="true" className="size-5" />}
|
|
</IconStack>
|
|
</EmptyMedia>
|
|
<EmptyTitle>{title}</EmptyTitle>
|
|
{description ? <EmptyDescription>{description}</EmptyDescription> : null}
|
|
</EmptyHeader>
|
|
{action ? <EmptyContent>{action}</EmptyContent> : null}
|
|
</Empty>
|
|
)
|
|
}
|
|
|
|
export { EmptyState, type EmptyStateProps }
|