{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-notifications-demo",
  "title": "UseNotificationsDemo",
  "description": "use-notifications's hook in action.",
  "registryDependencies": [
    "card",
    "alert",
    "button",
    "badge",
    "lucide-react",
    "https://guarahooks.com/r/use-notifications.json"
  ],
  "files": [
    {
      "path": "registry/example/use-notifications-demo.tsx",
      "content": "'use client';\n\nimport {\n  AlertCircleIcon,\n  BellIcon,\n  CheckCircle2Icon,\n  XCircleIcon,\n} from 'lucide-react';\n\nimport { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\n\nimport { useNotifications } from '@/hooks/guarahooks/use-notifications';\n\nexport default function UseNotificationsDemo() {\n  const {\n    permission,\n    requestPermission,\n    showNotification,\n    isSupported,\n    isSecureContext,\n    supportsActions,\n    supportsBadge,\n    supportsImage,\n    supportsVibrate,\n    supportsSound,\n  } = useNotifications();\n\n  const handleRequestPermission = async () => {\n    try {\n      await requestPermission();\n    } catch (error) {\n      console.error('Failed to request permission:', error);\n    }\n  };\n\n  const handleShowNotification = () => {\n    showNotification('Demo Notification', {\n      body: 'This is a test notification from the demo component',\n      icon: '/favicon.ico',\n      badge: '/favicon.ico',\n      image: '/favicon.ico',\n      // Actions are only supported with Service Worker\n      // actions: [\n      //   {\n      //     action: 'view',\n      //     title: 'View Details',\n      //   },\n      // ],\n    });\n  };\n\n  return (\n    <Card className=\"relative max-w-2xl w-full\">\n      <CardHeader>\n        <CardTitle className=\"flex items-center gap-2\">\n          <BellIcon className=\"h-5 w-5\" />\n          useNotifications\n        </CardTitle>\n        <CardDescription>\n          This component demonstrates the use of the{' '}\n          <code>useNotifications</code> hook to manage browser notifications.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"space-y-4\">\n        <div className=\"space-y-2\">\n          <h3 className=\"font-medium\">Browser Support</h3>\n          <div className=\"flex flex-wrap gap-2\">\n            <Badge variant={isSupported ? 'default' : 'destructive'}>\n              {isSupported ? 'Supported' : 'Not Supported'}\n            </Badge>\n            <Badge variant={isSecureContext ? 'default' : 'destructive'}>\n              {isSecureContext ? 'Secure Context' : 'Not Secure'}\n            </Badge>\n          </div>\n        </div>\n\n        <div className=\"space-y-2\">\n          <h3 className=\"font-medium\">Feature Support</h3>\n          <div className=\"flex flex-wrap gap-2\">\n            <Badge variant={supportsActions ? 'default' : 'secondary'}>\n              Actions {supportsActions ? '✓' : '✗'}\n            </Badge>\n            <Badge variant={supportsBadge ? 'default' : 'secondary'}>\n              Badge {supportsBadge ? '✓' : '✗'}\n            </Badge>\n            <Badge variant={supportsImage ? 'default' : 'secondary'}>\n              Image {supportsImage ? '✓' : '✗'}\n            </Badge>\n            <Badge variant={supportsVibrate ? 'default' : 'secondary'}>\n              Vibrate {supportsVibrate ? '✓' : '✗'}\n            </Badge>\n            <Badge variant={supportsSound ? 'default' : 'secondary'}>\n              Sound {supportsSound ? '✓' : '✗'}\n            </Badge>\n          </div>\n        </div>\n\n        <div className=\"space-y-2\">\n          <h3 className=\"font-medium\">Permission Status</h3>\n          <Badge\n            variant={\n              permission === 'granted'\n                ? 'default'\n                : permission === 'denied'\n                  ? 'destructive'\n                  : 'secondary'\n            }\n          >\n            {permission === 'granted' ? (\n              <CheckCircle2Icon className=\"mr-1 h-3 w-3\" />\n            ) : permission === 'denied' ? (\n              <XCircleIcon className=\"mr-1 h-3 w-3\" />\n            ) : (\n              <AlertCircleIcon className=\"mr-1 h-3 w-3\" />\n            )}\n            {permission.charAt(0).toUpperCase() + permission.slice(1)}\n          </Badge>\n        </div>\n\n        {!isSupported && (\n          <Alert variant=\"destructive\">\n            <AlertCircleIcon className=\"h-4 w-4\" />\n            <AlertTitle>Not Supported</AlertTitle>\n            <AlertDescription>\n              Your browser does not support the Notifications API. Consider\n              using a fallback UI notification system.\n            </AlertDescription>\n          </Alert>\n        )}\n\n        {!isSecureContext && (\n          <Alert variant=\"destructive\">\n            <AlertCircleIcon className=\"h-4 w-4\" />\n            <AlertTitle>Not Secure</AlertTitle>\n            <AlertDescription>\n              The Notifications API requires a secure context (HTTPS). Please\n              use HTTPS to enable notifications.\n            </AlertDescription>\n          </Alert>\n        )}\n\n        {supportsActions && (\n          <Alert variant=\"default\">\n            <AlertCircleIcon className=\"h-4 w-4\" />\n            <AlertTitle>Actions Support</AlertTitle>\n            <AlertDescription>\n              Note: Notification actions are only supported when using a Service\n              Worker. This demo uses the basic Notification API without a\n              Service Worker.\n            </AlertDescription>\n          </Alert>\n        )}\n      </CardContent>\n      <CardFooter className=\"flex lg:flex-row items-start flex-col gap-2\">\n        <Button\n          onClick={handleRequestPermission}\n          disabled={!isSupported || !isSecureContext}\n        >\n          Request Permission\n        </Button>\n        <Button\n          onClick={handleShowNotification}\n          disabled={\n            !isSupported || !isSecureContext || permission !== 'granted'\n          }\n        >\n          Show Notification\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}\n",
      "type": "registry:example",
      "target": "components/example/use-notifications-demo.tsx"
    }
  ],
  "type": "registry:example"
}