ProductEmptyState.tsx82 lines · main

1	import { ExternalLink } from 'lucide-react'
2	import Link from 'next/link'
3	import { PropsWithChildren } from 'react'
4	import { Button } from 'ui'
5
6	import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
7
8	interface ProductEmptyStateProps {
9	title?: string
10	size?: 'medium' | 'large'
11	ctaButtonLabel?: string
12	infoButtonLabel?: string
13	infoButtonUrl?: string
14	onClickCta?: () => void
15	loading?: boolean
16	disabled?: boolean
17	disabledMessage?: string
18	ctaUrl?: string
19	}
20
21	const ProductEmptyState = ({
22	title = '',
23	size = 'medium',
24	children,
25	ctaButtonLabel = '',
26	infoButtonLabel = '',
27	infoButtonUrl = '',
28	onClickCta = () => {},
29	loading = false,
30	disabled = false,
31	disabledMessage = '',
32	ctaUrl,
33	}: PropsWithChildren<ProductEmptyStateProps>) => {
34	const hasAction = (ctaButtonLabel && onClickCta) || (infoButtonUrl && infoButtonLabel)
35
36	return (
37	<div className="flex h-full w-full items-center justify-center">
38	<div className="flex space-x-4 rounded-sm border bg-surface-100 p-6 shadow-md">
39	{/* A graphic can probably be placed here as a sibling to the div below*/}
40	<div className="flex flex-col">
41	<div className={`${size === 'medium' ? 'w-80' : 'w-[400px]'} space-y-4`}>
42	<h5 className="text-foreground">{title}</h5>
43	<div className="flex flex-col space-y-2 text-foreground-light">{children}</div>
44	{hasAction && (
45	<div className="flex items-center space-x-2">
46	{ctaButtonLabel && !!ctaUrl ? (
47	<Button asChild type="primary">
48	<Link href={ctaUrl}>{ctaButtonLabel}</Link>
49	</Button>
50	) : ctaButtonLabel && !!onClickCta ? (
51	<ButtonTooltip
52	type="primary"
53	onClick={onClickCta}
54	loading={loading}
55	disabled={loading || disabled}
56	tooltip={{
57	content: {
58	side: 'bottom',
59	text: disabled && disabledMessage.length > 0 ? disabledMessage : undefined,
60	},
61	}}
62	>
63	{ctaButtonLabel}
64	</ButtonTooltip>
65	) : null}
66	{infoButtonUrl && infoButtonLabel ? (
67	<Button type="default" icon={<ExternalLink strokeWidth={1.5} />}>
68	<a target="_blank" rel="noreferrer" href={infoButtonUrl}>
69	{infoButtonLabel}
70	</a>
71	</Button>
72	) : null}
73	</div>
74	)}
75	</div>
76	</div>
77	</div>
78	</div>
79	)
80	}
81
82	export default ProductEmptyState