/
toast.withButton.tsx
81 lines (74 loc) · 1.85 KB
/
toast.withButton.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import { Toast, ToastToggle } from "flowbite-react";
import { type CodeData } from "~/components/code-demo";
const code = `
"use client";
import { Toast } from "flowbite-react";
export function Component() {
return (
<Toast>
<div className="text-sm font-normal">Conversation archived.</div>
<div className="ml-auto flex items-center space-x-2">
<a
href="#"
className="rounded-lg p-1.5 text-sm font-medium text-cyan-600 hover:bg-cyan-100 dark:text-cyan-500 dark:hover:bg-gray-700"
>
Undo
</a>
<Toast.Toggle />
</div>
</Toast>
);
}
`;
const codeRSC = `
import { Toast, ToastToggle } from "flowbite-react";
export function Component() {
return (
<Toast>
<div className="text-sm font-normal">Conversation archived.</div>
<div className="ml-auto flex items-center space-x-2">
<a
href="#"
className="rounded-lg p-1.5 text-sm font-medium text-cyan-600 hover:bg-cyan-100 dark:text-cyan-500 dark:hover:bg-gray-700"
>
Undo
</a>
<ToastToggle />
</div>
</Toast>
);
}
`;
export function Component() {
return (
<Toast>
<div className="text-sm font-normal">Conversation archived.</div>
<div className="ml-auto flex items-center space-x-2">
<a
href="#"
className="rounded-lg p-1.5 text-sm font-medium text-cyan-600 hover:bg-cyan-100 dark:text-cyan-500 dark:hover:bg-gray-700"
>
Undo
</a>
<ToastToggle />
</div>
</Toast>
);
}
export const withButton: CodeData = {
type: "single",
code: [
{
fileName: "client",
language: "tsx",
code,
},
{
fileName: "server",
language: "tsx",
code: codeRSC,
},
],
githubSlug: "toast/toast.withButton.tsx",
component: <Component />,
};