paulmataruso/chartdb
1
0
Fork 0
mirror of https://github.com/chartdb/chartdb.git synced 2025-11-17 04:11:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(empty_state): customize empty state (#533)

Browse Source
This commit is contained in:
Guy Ben-Aharon
2025-01-26 14:19:02 +02:00
committed by GitHub
parent 42d4cbac8c
commit 1643e7bdeb
1 changed files with 39 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/empty-state/empty-state.tsx
View File

@@ -6,25 +6,49 @@ import { cn } from '@/lib/utils';
export interface EmptyStateProps {
title: string;
description: string;
imageClassName?: string;
titleClassName?: string;
descriptionClassName?: string;
}
export const EmptyState = forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & EmptyStateProps
>(({ title, description, className }, ref) => (
<div
ref={ref}
className={cn(
'flex flex-1 flex-col items-center justify-center space-y-1',
className
)}
>
<img src={EmptyStateImage} alt="Empty state" className="mb-2 w-20" />
<Label className="text-base">{title}</Label>
<Label className="text-sm font-normal text-muted-foreground">
{description}
</Label>
</div>
));
>(
(
{
title,
description,
className,
titleClassName,
descriptionClassName,
imageClassName,
},
ref
) => (
<div
ref={ref}
className={cn(
'flex flex-1 flex-col items-center justify-center space-y-1',
className
)}
>
<img
src={EmptyStateImage}
alt="Empty state"
className={cn('mb-2 w-20', imageClassName)}
/>
<Label className={cn('text-base', titleClassName)}>{title}</Label>
<Label
className={cn(
'text-sm font-normal text-muted-foreground',
descriptionClassName
)}
>
{description}
</Label>
</div>
)
);
EmptyState.displayName = 'EmptyState';