One Calendar is a privacy-first calendar web app built with Next.js. It has modern security features, including e2ee, password-protected sharing, and self-destructing share links 📅
calendar.xyehr.cn
ui: update ui library
authored by
Evan Huang
and committed by
GitHub
c699d4f1
4fe96095
+23
-21
+23
-21
components/ui/empty.tsx
+23
-21
components/ui/empty.tsx
···
1
-
import type React from "react";
2
-
import { cva, type VariantProps } from "class-variance-authority";
1
+
import { cva, type VariantProps } from "class-variance-authority"
3
2
4
-
import { cn } from "@/lib/utils";
3
+
import { cn } from "@/lib/utils"
5
4
6
5
function Empty({ className, ...props }: React.ComponentProps<"div">) {
7
6
return (
8
7
<div
9
8
data-slot="empty"
10
9
className={cn(
11
-
"gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",
12
-
className,
10
+
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
11
+
className
13
12
)}
14
13
{...props}
15
14
/>
16
-
);
15
+
)
17
16
}
18
17
19
18
function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
20
19
return (
21
20
<div
22
21
data-slot="empty-header"
23
-
className={cn("gap-2 flex max-w-sm flex-col items-center", className)}
22
+
className={cn("flex max-w-sm flex-col items-center gap-2", className)}
24
23
{...props}
25
24
/>
26
-
);
25
+
)
27
26
}
28
27
29
28
const emptyMediaVariants = cva(
···
32
31
variants: {
33
32
variant: {
34
33
default: "bg-transparent",
35
-
icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4",
34
+
icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
36
35
},
37
36
},
38
37
defaultVariants: {
39
38
variant: "default",
40
39
},
41
-
},
42
-
);
40
+
}
41
+
)
43
42
44
43
function EmptyMedia({
45
44
className,
···
53
52
className={cn(emptyMediaVariants({ variant, className }))}
54
53
{...props}
55
54
/>
56
-
);
55
+
)
57
56
}
58
57
59
58
function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
60
59
return (
61
60
<div
62
61
data-slot="empty-title"
63
-
className={cn("text-sm font-medium tracking-tight", className)}
62
+
className={cn(
63
+
"cn-font-heading text-sm font-medium tracking-tight",
64
+
className
65
+
)}
64
66
{...props}
65
67
/>
66
-
);
68
+
)
67
69
}
68
70
69
71
function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
···
71
73
<div
72
74
data-slot="empty-description"
73
75
className={cn(
74
-
"text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
75
-
className,
76
+
"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
77
+
className
76
78
)}
77
79
{...props}
78
80
/>
79
-
);
81
+
)
80
82
}
81
83
82
84
function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
···
84
86
<div
85
87
data-slot="empty-content"
86
88
className={cn(
87
-
"gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance",
88
-
className,
89
+
"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
90
+
className
89
91
)}
90
92
{...props}
91
93
/>
92
-
);
94
+
)
93
95
}
94
96
95
97
export {
···
99
101
EmptyDescription,
100
102
EmptyContent,
101
103
EmptyMedia,
102
-
};
104
+
}