feat(ui): 添加空态和骨架组件
This commit is contained in:
@@ -152,3 +152,30 @@ export function SectionTitle({ icon, title, description }: { icon?: ReactNode; t
|
|||||||
</div>
|
</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