DenozordecandCursor
9ff1af849e
- Added new dependencies for drag-and-drop functionality with @dnd-kit packages. - Updated package versions for @tanstack/react-virtual and date-fns. - Refactored AppShell component to utilize AppSidebar and SiteHeader for improved layout. - Enhanced Frame component with new theming capabilities and improved structure. - Introduced filtering capabilities in Agents and Lists pages with new UI elements. - Added new utility functions for authentication claims management. Co-authored-by: Cursor <cursoragent@cursor.com>
93 lines
2.4 KiB
TypeScript
93 lines
2.4 KiB
TypeScript
import { InboxIcon, type LucideIcon } from 'lucide-react'
|
|
import { IconStack } from '@/components/reui/icon-stack'
|
|
import {
|
|
Empty,
|
|
EmptyContent,
|
|
EmptyDescription,
|
|
EmptyHeader,
|
|
EmptyMedia,
|
|
EmptyTitle,
|
|
} from '@evofw/ui/components/empty'
|
|
import { cn } from '@evofw/ui/lib/utils'
|
|
|
|
interface EmptyStateProps {
|
|
icon?: LucideIcon
|
|
title: string
|
|
description?: string
|
|
action?: React.ReactNode
|
|
className?: string
|
|
/** Use IconStack media (empty-state-12). Default true. */
|
|
stackedIcon?: boolean
|
|
/**
|
|
* Center in available width/height (empty-state-12).
|
|
* Preview: https://reui.io/preview/base/empty-state-12
|
|
* Set false for tight panels/sheets.
|
|
*/
|
|
centered?: boolean
|
|
}
|
|
|
|
/**
|
|
* ReUI Empty + IconStack — adapted from empty-state-12.
|
|
* @see https://reui.io/preview/base/empty-state-12
|
|
*/
|
|
export function EmptyState({
|
|
icon: Icon = InboxIcon,
|
|
title,
|
|
description,
|
|
action,
|
|
className,
|
|
stackedIcon = true,
|
|
centered = true,
|
|
}: EmptyStateProps) {
|
|
const body = (
|
|
<Empty
|
|
className={cn(
|
|
'max-w-md flex-none border-0 bg-transparent p-0',
|
|
!centered && className,
|
|
)}
|
|
>
|
|
<EmptyHeader className="gap-5 text-center">
|
|
<EmptyMedia className="mb-0">
|
|
{stackedIcon ? (
|
|
<IconStack aria-hidden="true" className="h-14 w-12">
|
|
<Icon strokeWidth={1.9} aria-hidden="true" className="size-5" />
|
|
</IconStack>
|
|
) : (
|
|
<span className="bg-muted text-muted-foreground flex size-10 items-center justify-center rounded-lg [&_svg]:size-5">
|
|
<Icon aria-hidden="true" />
|
|
</span>
|
|
)}
|
|
</EmptyMedia>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<EmptyTitle className="text-base font-semibold tracking-tight">
|
|
{title}
|
|
</EmptyTitle>
|
|
{description ? (
|
|
<EmptyDescription className="max-w-sm text-sm/relaxed">
|
|
{description}
|
|
</EmptyDescription>
|
|
) : null}
|
|
</div>
|
|
</EmptyHeader>
|
|
{action ? (
|
|
<EmptyContent className="mt-1 items-center justify-center">
|
|
{action}
|
|
</EmptyContent>
|
|
) : null}
|
|
</Empty>
|
|
)
|
|
|
|
if (!centered) return body
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex w-full flex-1 items-center justify-center py-14 sm:py-16',
|
|
className,
|
|
)}
|
|
>
|
|
{body}
|
|
</div>
|
|
)
|
|
}
|