Empty

1import { cva, type VariantProps } from "class-variance-authority";
2import { Children, cloneElement } from "react";
3import { View } from "react-native";
4import { cn } from "@/lib/utils";
5import { Text } from "./text";
6 
7// Types
8type EmptyMediaProps = React.ComponentProps<typeof View> &
9  VariantProps<typeof emptyMediaVariants>;
10 
11// Components
12export const Empty = ({
13  className,
14  ...props
15}: React.ComponentProps<typeof View>) => {
16  return (
17    <View
18      className={cn(
19        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 text-balance rounded-xl border-dashed p-6 text-center",
20        className
21      )}
22      data-slot="empty"
23      {...props}
24    />
25  );
26};
27 
28export const EmptyHeader = ({
29  className,
30  ...props
31}: React.ComponentProps<typeof View>) => {
32  return (
33    <View
34      className={cn("flex max-w-sm flex-col items-center gap-0.5", className)}
35      data-slot="empty-header"
36      {...props}
37    />
38  );
39};
40 
41export const EmptyMedia = ({
42  className,
43  variant = "default",
44  ...props
45}: EmptyMediaProps) => {
46  return (
47    <View
48      className={cn(emptyMediaVariants({ className, variant }))}
49      data-slot="empty-icon"
50      data-variant={variant}
51      {...props}
52    />
53  );
54};
55 
56export const EmptyMediaIcon = ({
57  children,
58  ...props
59}: React.ComponentProps<typeof View>) => {
60  const child = Children.only(children);
61 
62  if (!child) {
63    if (__DEV__) {
64      throw new Error(
65        "EmptyMediaIcon expects a single React element as children"
66      );
67    }
68    return null;
69  }
70 
71  return cloneElement(
72    child as React.ReactElement<React.ComponentProps<typeof View>>,
73    {
74      ...props,
75      className: cn("size-4", props.className),
76    }
77  );
78};
79 
80export const EmptyTitle = ({
81  className,
82  ...props
83}: React.ComponentProps<typeof Text>) => {
84  return (
85    <Text
86      className={cn("font-medium text-base tracking-tight", className)}
87      data-slot="empty-title"
88      {...props}
89    />
90  );
91};
92 
93export const EmptyDescription = ({
94  className,
95  ...props
96}: React.ComponentProps<typeof Text>) => {
97  return (
98    <Text
99      className={cn(
100        "text-center text-muted-foreground text-sm/relaxed [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
101        className
102      )}
103      data-slot="empty-description"
104      {...props}
105    />
106  );
107};
108 
109export const EmptyContent = ({
110  className,
111  ...props
112}: React.ComponentProps<typeof View>) => {
113  return (
114    <View
115      className={cn(
116// … truncated