-
-
Notifications
You must be signed in to change notification settings - Fork 505
Expand file tree
/
Copy pathtoast.colors.tsx
More file actions
75 lines (71 loc) · 2.74 KB
/
toast.colors.tsx
File metadata and controls
75 lines (71 loc) · 2.74 KB
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
import { Toast, ToastToggle } from "flowbite-react";
import { HiCheck, HiExclamation, HiX } from "react-icons/hi";
import type { CodeData } from "~/components/code-demo";
const code = `
import { Toast, ToastToggle } from "flowbite-react";
import { HiCheck, HiExclamation, HiX } from "react-icons/hi";
export function Component() {
return (
<div className="flex flex-col gap-4">
<Toast>
<div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200">
<HiCheck className="h-5 w-5" />
</div>
<div className="ml-3 text-sm font-normal">Item moved successfully.</div>
<ToastToggle />
</Toast>
<Toast>
<div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200">
<HiX className="h-5 w-5" />
</div>
<div className="ml-3 text-sm font-normal">Item has been deleted.</div>
<ToastToggle />
</Toast>
<Toast>
<div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-100 text-orange-500 dark:bg-orange-700 dark:text-orange-200">
<HiExclamation className="h-5 w-5" />
</div>
<div className="ml-3 text-sm font-normal">Improve password difficulty.</div>
<ToastToggle />
</Toast>
</div>
);
}
`;
export function Component() {
return (
<div className="flex flex-col gap-4">
<Toast>
<div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200">
<HiCheck className="h-5 w-5" />
</div>
<div className="ml-3 text-sm font-normal">Item moved successfully.</div>
<ToastToggle />
</Toast>
<Toast>
<div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200">
<HiX className="h-5 w-5" />
</div>
<div className="ml-3 text-sm font-normal">Item has been deleted.</div>
<ToastToggle />
</Toast>
<Toast>
<div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-100 text-orange-500 dark:bg-orange-700 dark:text-orange-200">
<HiExclamation className="h-5 w-5" />
</div>
<div className="ml-3 text-sm font-normal">Improve password difficulty.</div>
<ToastToggle />
</Toast>
</div>
);
}
export const colors: CodeData = {
type: "single",
code: {
fileName: "index",
language: "tsx",
code,
},
githubSlug: "toast/toast.colors.tsx",
component: <Component />,
};