62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import { IconSpeakerphone, IconSearch, IconActivity, IconFileText } from '@tabler/icons-react'
|
|
import type { Icon } from '@tabler/icons-react'
|
|
|
|
interface Props {
|
|
title?: string
|
|
message?: string
|
|
actionLabel?: string
|
|
onAction?: () => void
|
|
icon?: Icon
|
|
}
|
|
|
|
export default function EmptyState({
|
|
title = 'Nothing here yet',
|
|
message = 'Be the first to share your thoughts and ideas',
|
|
actionLabel = 'Share feedback',
|
|
onAction,
|
|
icon: CustomIcon,
|
|
}: Props) {
|
|
const Icon = CustomIcon || IconSpeakerphone
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-20 px-4 fade-in">
|
|
<div
|
|
className="w-24 h-24 rounded-full flex items-center justify-center mb-8"
|
|
style={{
|
|
background: 'var(--accent-subtle)',
|
|
boxShadow: 'var(--shadow-glow)',
|
|
}}
|
|
>
|
|
<Icon size={44} stroke={1.5} style={{ color: 'var(--accent)' }} />
|
|
</div>
|
|
|
|
<h2
|
|
className="font-bold mb-3"
|
|
style={{
|
|
fontFamily: 'var(--font-heading)',
|
|
color: 'var(--text)',
|
|
fontSize: 'var(--text-xl)',
|
|
}}
|
|
>
|
|
{title}
|
|
</h2>
|
|
<p
|
|
className="mb-8 text-center"
|
|
style={{
|
|
color: 'var(--text-secondary)',
|
|
fontSize: 'var(--text-base)',
|
|
maxWidth: 360,
|
|
lineHeight: 1.6,
|
|
}}
|
|
>
|
|
{message}
|
|
</p>
|
|
{onAction && (
|
|
<button onClick={onAction} className="btn btn-primary">
|
|
{actionLabel}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|