31 lines
797 B
TypeScript
31 lines
797 B
TypeScript
|
import type { ReactNode } from 'react'
|
||
|
|
import { Button } from './Button.tsx'
|
||
|
|
import styles from './EmptyState.module.css'
|
||
|
|
|
||
|
|
export type EmptyStateAction = {
|
||
|
|
label: string
|
||
|
|
onClick: () => void
|
||
|
|
}
|
||
|
|
|
||
|
|
export type EmptyStateProps = {
|
||
|
|
title: string
|
||
|
|
children: ReactNode
|
||
|
|
// Optional primary action, rendered as a primary Button.
|
||
|
|
action?: EmptyStateAction
|
||
|
|
}
|
||
|
|
|
||
|
|
// Bagel title, body text and an optional primary action.
|
||
|
|
export function EmptyState({ title, children, action }: EmptyStateProps) {
|
||
|
|
return (
|
||
|
|
<section className={styles.empty}>
|
||
|
|
<h2 className={styles.title}>{title}</h2>
|
||
|
|
<p className={styles.body}>{children}</p>
|
||
|
|
{action && (
|
||
|
|
<Button className={styles.action} onClick={action.onClick}>
|
||
|
|
{action.label}
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</section>
|
||
|
|
)
|
||
|
|
}
|