EmptyState
EmptyState is a component that can be used to display a message there is no data to display.
'use client'import {Button,EmptyState,EmptyStateIcon,EmptyStateTitle,EmptyStateDescription,EmptyStateActions,} from '@nerdfish/ui'import { TriangleAlertIcon } from 'lucide-react'export function EmptyStateExample() {return (<EmptyState><EmptyStateIcon><TriangleAlertIcon className="!text-danger" /></EmptyStateIcon><EmptyStateTitle>No data</EmptyStateTitle><EmptyStateDescription>No data to display</EmptyStateDescription><EmptyStateActions><Button variant="secondary">Import items</Button><Button>Create first item</Button></EmptyStateActions></EmptyState>)}
Usage
import {EmptyState,Button,EmptyStateIcon,EmptyStateTitle,EmptyStateDescription,EmptyStateActions,} from '@nerdfish/ui'import { TriangleAlertIcon } from 'lucide-react'
<EmptyState><EmptyStateIcon><TriangleAlertIcon /></EmptyStateIcon><EmptyStateTitle>No data</EmptyStateTitle><EmptyStateDescription>No data to display</EmptyStateDescription><EmptyStateActions><Button>Add data</Button></EmptyStateActions></EmptyState>