paulmataruso/chartdb
1
0
Fork 0
mirror of https://github.com/chartdb/chartdb.git synced 2025-11-16 20:01:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(empty-state): fix dark-mode for empty-state (#547)

Browse Source
This commit is contained in:
Jonathan Fishner
2025-02-02 11:48:09 +02:00
committed by GitHub
parent eb9b41e4f6
commit 99a8201398
2 changed files with 33 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,9 @@
import React, { forwardRef } from 'react';
import EmptyStateImage from '@/assets/empty_state.png';
import EmptyStateImageDark from '@/assets/empty_state_dark.png';
import { Label } from '@/components/label/label';
import { cn } from '@/lib/utils';
import { useTheme } from '@/hooks/use-theme';
export interface EmptyStateProps {
title: string;
@@ -25,30 +27,40 @@ export const EmptyState = forwardRef<
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
) => {
const { effectiveTheme } = useTheme();
return (
<div
ref={ref}
className={cn(
'text-sm font-normal text-muted-foreground',
descriptionClassName
'flex flex-1 flex-col items-center justify-center space-y-1',
className
)}
>
{description}
</Label>
</div>
)
<img
src={
effectiveTheme === 'dark'
? EmptyStateImageDark
: 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';