feat(ui): 添加空态和骨架组件
This commit is contained in:
@@ -152,3 +152,30 @@ export function SectionTitle({ icon, title, description }: { icon?: ReactNode; t
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function Skeleton({ className, ...props }: ComponentPropsWithoutRef<'div'>) {
|
||||
return <div className={cn('rounded-md bg-white/5 motion-safe:animate-pulse', className)} {...props} />
|
||||
}
|
||||
|
||||
export function EmptyState({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
action,
|
||||
className,
|
||||
}: {
|
||||
icon?: ReactNode
|
||||
title: string
|
||||
description?: string
|
||||
action?: ReactNode
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<div className={cn('flex flex-col items-center justify-center py-12 text-center', className)}>
|
||||
{icon && <div className="mb-4 text-zinc-500">{icon}</div>}
|
||||
<h3 className="text-sm font-medium text-zinc-200">{title}</h3>
|
||||
{description && <p className="mt-1 text-sm text-zinc-500 max-w-sm">{description}</p>}
|
||||
{action && <div className="mt-6">{action}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user