[V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom animation for the progress button */ .transition-all.duration-3000 { transition-duration: 3000ms; } [V0_FILE]typescriptreact:file="notification-demo.tsx" isMerged="true" "use client" import { useState } from "react" import { Loader2, CheckCircle, AlertCircle, AlertTriangle } from "lucide-react" import { Button } from "@/components/ui/button" import { useToast } from "@/hooks/use-toast" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export default function NotificationDemo() { const [isLoading, setIsLoading] = useState(false) const { toast } = useToast() // Function to simulate form submission with different outcomes const simulateSubmission = (outcome: "success" | "error" | "warning") => { setIsLoading(true) setTimeout(() => { setIsLoading(false) switch (outcome) { case "success": toast({ title: "Success!", description: "Your form has been submitted successfully.", variant: "default", className: "bg-green-50 border-green-200 text-green-800", }) break case "error": toast({ title: "Error!", description: "There was a problem submitting your form.", variant: "destructive", }) break case "warning": toast({ title: "Warning", description: "Your form was submitted with some issues.", variant: "default", className: "bg-yellow-50 border-yellow-200 text-yellow-800", }) break } }, 1500) } // Custom notification with icon const showCustomNotification = () => { toast({ title: "Custom Notification", description: "This is a custom notification with an icon.", variant: "default", className: "bg-blue-50 border-blue-200 text-blue-800", action: (

), }) } return ( Notification Examples Click the buttons below to see different types of notifications

Notifications will automatically dismiss after a few seconds

) } [V0_FILE]typescriptreact:file="loading-ui-demo.tsx" isEdit="true" "use client" import { useState } from "react" import { Loader2, CheckCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { useToast } from "@/hooks/use-toast" import { Switch } from "@/components/ui/switch" // Enhanced user type with disabled property type User = { id: string name: string email: string role: string status: string disabled?: boolean } // Sample data for the table const initialUsers: User[] = [ { id: "1", name: "John Doe", email: "john@example.com", role: "Admin", status: "Active", disabled: false, }, { id: "2", name: "Jane Smith", email: "jane@example.com", role: "User", status: "Pending", disabled: false, }, { id: "3", name: "Robert Johnson", email: "robert@example.com", role: "Editor", status: "Active", disabled: true, // This user starts disabled }, { id: "4", name: "Emily Davis", email: "emily@example.com", role: "User", status: "Inactive", disabled: false, }, { id: "5", name: "Michael Wilson", email: "michael@example.com", role: "Admin", status: "Active", disabled: false, }, ] export default function LoadingUIDemo() { const [isTableLoading, setIsTableLoading] = useState(true) const [processingId, setProcessingId] = useState(null) const [users, setUsers] = useState(initialUsers) const { toast } = useToast() // Function to toggle table loading state with notification const toggleTableLoading = () => { const newState = !isTableLoading setIsTableLoading(newState) if (newState) { toast({ title: "Loading Data", description: "Fetching the latest user information...", variant: "default", }) } else { toast({ title: "Data Loaded", description: "User data has been successfully loaded.", variant: "default", className: "bg-green-50 border-green-200 text-green-800", }) } } // Function to handle edit button click with loading and notification const handleEditClick = (userId: string) => { setProcessingId(userId) // Simulate API call setTimeout(() => { setProcessingId(null) // Show success notification toast({ title: "User Updated", description: "The user information has been updated successfully.", variant: "default", className: "bg-green-50 border-green-200 text-green-800", }) }, 1500) } // Function to handle delete with loading and notification const handleDeleteClick = (userId: string) => { setProcessingId(`delete-${userId}`) // Simulate API call setTimeout(() => { setProcessingId(null) // Randomly succeed or fail to demonstrate both notifications const isSuccess = Math.random() > 0.3 if (isSuccess) { toast({ title: "User Deleted", description: "The user has been removed from the system.", variant: "default", className: "bg-green-50 border-green-200 text-green-800", }) } else { toast({ title: "Error", description: "There was a problem deleting this user. Please try again.", variant: "destructive", }) } }, 1500) } // Function to toggle user disabled state const toggleUserDisabled = (userId: string) => { setProcessingId(`toggle-${userId}`) // Simulate API call setTimeout(() => { setUsers((prevUsers) => prevUsers.map((user) => { if (user.id === userId) { const newDisabledState = !user.disabled // Show appropriate notification if (newDisabledState) { toast({ title: "User Disabled", description: `${user.name} has been disabled and can no longer access the system.`, variant: "default", className: "bg-yellow-50 border-yellow-200 text-yellow-800", }) } else { toast({ title: "User Enabled", description: `${user.name} has been enabled and can now access the system.`, variant: "default", className: "bg-green-50 border-green-200 text-green-800", }) } return { ...user, disabled: newDisabledState } } return user }), ) setProcessingId(null) }, 1000) } return (

User Management

{/* Table with skeleton loading */}

Name Email Role Status Enabled Actions {isTableLoading ? // Skeleton loading rows Array.from({ length: 5 }).map((_, index) => (

)) : // Actual data rows users.map((user) => ( {user.name} {user.disabled && (Disabled)} {user.email} {user.role} {user.status}

toggleUserDisabled(user.id)} disabled={processingId === `toggle-${user.id}`} className="relative" /> {processingId === `toggle-${user.id}` && ( )}

))}

{/* Button to add a new user with notification */}

) }