Spaces:
Build error
Build error
Upload components/ui/toast.jsx with huggingface_hub
Browse files- 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 |
+
}
|