Jensin commited on
Commit
cc23120
·
verified ·
1 Parent(s): d7f0f8c

Upload components/ui/toast.jsx with huggingface_hub

Browse files
Files changed (1) hide show
  1. components/ui/toast.jsx +82 -0
components/ui/toast.jsx ADDED
@@ -0,0 +1,82 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import { cva } from "class-variance-authority"
3
+ import { cn } from "@/lib/utils"
4
+
5
+ const ToastProvider = ({ children }) => {
6
+ return <div className="fixed top-4 right-4 z-[100] space-y-2">{children}</div>
7
+ }
8
+
9
+ const toastVariants = cva(
10
+ "relative w-full rounded-md border p-4 shadow-lg",
11
+ {
12
+ variants: {
13
+ variant: {
14
+ default: "bg-background text-foreground",
15
+ destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
16
+ },
17
+ },
18
+ defaultVariants: {
19
+ variant: "default",
20
+ },
21
+ }
22
+ )
23
+
24
+ const Toast = React.forwardRef(({ className, variant, ...props }, ref) => (
25
+ <div
26
+ ref={ref}
27
+ className={cn(toastVariants({ variant }), className)}
28
+ {...props}
29
+ />
30
+ ))
31
+ Toast.displayName = "Toast"
32
+
33
+ const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (
34
+ <div
35
+ ref={ref}
36
+ className={cn("text-sm font-semibold", className)}
37
+ {...props}
38
+ />
39
+ ))
40
+ ToastTitle.displayName = "ToastTitle"
41
+
42
+ const ToastDescription = React.forwardRef(({ className, ...props }, ref) => (
43
+ <div
44
+ ref={ref}
45
+ className={cn("text-sm opacity-90", className)}
46
+ {...props}
47
+ />
48
+ ))
49
+ ToastDescription.displayName = "ToastDescription"
50
+
51
+ const ToastClose = React.forwardRef(({ className, ...props }, ref) => (
52
+ <button
53
+ ref={ref}
54
+ className={cn(
55
+ "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none group-hover:opacity-100",
56
+ className
57
+ )}
58
+ {...props}
59
+ />
60
+ ))
61
+ ToastClose.displayName = "ToastClose"
62
+
63
+ const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (
64
+ <div
65
+ ref={ref}
66
+ className={cn(
67
+ "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
68
+ className
69
+ )}
70
+ {...props}
71
+ />
72
+ ))
73
+ ToastViewport.displayName = "ToastViewport"
74
+
75
+ export {
76
+ ToastProvider,
77
+ Toast,
78
+ ToastTitle,
79
+ ToastDescription,
80
+ ToastClose,
81
+ ToastViewport,
82
+ }