44 lines
999 B
TypeScript
44 lines
999 B
TypeScript
import { FunctionComponent, ReactNode } from 'react'
|
|
import Button from './Button'
|
|
|
|
interface EmptyStateProps {
|
|
buttonText?: string
|
|
icon: ReactNode
|
|
onClickButton?: () => void
|
|
desc?: string
|
|
title: string
|
|
disabled?: boolean
|
|
}
|
|
|
|
const EmptyState: FunctionComponent<EmptyStateProps> = ({
|
|
buttonText,
|
|
icon,
|
|
onClickButton,
|
|
desc,
|
|
title,
|
|
disabled = false,
|
|
}) => {
|
|
return (
|
|
<div className="flex flex-col items-center rounded-lg px-4 pb-2 text-th-fgd-1">
|
|
<div className="mb-1 h-6 w-6 text-th-primary">{icon}</div>
|
|
<h2 className="mb-1 text-base">{title}</h2>
|
|
{desc ? (
|
|
<p
|
|
className={`text-center ${
|
|
buttonText && onClickButton ? 'mb-1' : 'mb-0'
|
|
}`}
|
|
>
|
|
{desc}
|
|
</p>
|
|
) : null}
|
|
{buttonText && onClickButton ? (
|
|
<Button className="mt-2" onClick={onClickButton} disabled={disabled}>
|
|
{buttonText}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default EmptyState
|