diff --git a/components/ui/EmptyState.tsx b/components/ui/EmptyState.tsx new file mode 100644 index 0000000..d971328 --- /dev/null +++ b/components/ui/EmptyState.tsx @@ -0,0 +1,74 @@ +import * as React from 'react'; +import { cn } from '@/lib/utils'; +import { Button } from '@/components/ui/button'; + +export interface EmptyStateAction { + label: string; + onClick: () => void; +} + +export interface EmptyStateProps { + illustration?: React.ReactNode; + title: string; + description?: string; + primaryAction?: EmptyStateAction; + secondaryAction?: EmptyStateAction; + headingLevel?: 1 | 2 | 3 | 4 | 5 | 6; + className?: string; + children?: React.ReactNode; +} + +export function EmptyState({ + illustration, + title, + description, + primaryAction, + secondaryAction, + headingLevel = 2, + className, + children, +}: EmptyStateProps) { + const HeadingTag = `h${headingLevel}` as keyof JSX.IntrinsicElements; + + return ( +
+
+ {illustration && ( + + )} + + {title} + + {description && ( +

{description}

+ )} + {(primaryAction || secondaryAction) && ( +
+ {primaryAction && ( + + )} + {secondaryAction && ( + + )} +
+ )} + {children} +
+
+ ); +} + +export default EmptyState; diff --git a/components/ui/EmptyState/index.ts b/components/ui/EmptyState/index.ts new file mode 100644 index 0000000..90b96df --- /dev/null +++ b/components/ui/EmptyState/index.ts @@ -0,0 +1,4 @@ +export { NoCollectionsIllustration } from './no-collections'; +export { NoResultsIllustration } from './no-results'; +export { NoRecentlyPlayedIllustration } from './no-recently-played'; +export { NoFollowersIllustration } from './no-followers'; diff --git a/components/ui/EmptyState/no-collections.tsx b/components/ui/EmptyState/no-collections.tsx new file mode 100644 index 0000000..0c424e8 --- /dev/null +++ b/components/ui/EmptyState/no-collections.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; + +export function NoCollectionsIllustration(props: React.ComponentProps<'svg'>) { + return ( + + ); +} diff --git a/components/ui/EmptyState/no-followers.tsx b/components/ui/EmptyState/no-followers.tsx new file mode 100644 index 0000000..6404706 --- /dev/null +++ b/components/ui/EmptyState/no-followers.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; + +export function NoFollowersIllustration(props: React.ComponentProps<'svg'>) { + return ( + + ); +} diff --git a/components/ui/EmptyState/no-recently-played.tsx b/components/ui/EmptyState/no-recently-played.tsx new file mode 100644 index 0000000..aa1dd54 --- /dev/null +++ b/components/ui/EmptyState/no-recently-played.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; + +export function NoRecentlyPlayedIllustration(props: React.ComponentProps<'svg'>) { + return ( + + ); +} diff --git a/components/ui/EmptyState/no-results.tsx b/components/ui/EmptyState/no-results.tsx new file mode 100644 index 0000000..f5cbfc0 --- /dev/null +++ b/components/ui/EmptyState/no-results.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; + +export function NoResultsIllustration(props: React.ComponentProps<'svg'>) { + return ( + + ); +}