UseNotificationsDemo

1'use client';
2 
3import {
4  AlertCircleIcon,
5  BellIcon,
6  CheckCircle2Icon,
7  XCircleIcon,
8} from 'lucide-react';
9 
10import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
11import { Badge } from '@/components/ui/badge';
12import { Button } from '@/components/ui/button';
13import {
14  Card,
15  CardContent,
16  CardDescription,
17  CardFooter,
18  CardHeader,
19  CardTitle,
20} from '@/components/ui/card';
21 
22import { useNotifications } from '@/hooks/guarahooks/use-notifications';
23 
24export default function UseNotificationsDemo() {
25  const {
26    permission,
27    requestPermission,
28    showNotification,
29    isSupported,
30    isSecureContext,
31    supportsActions,
32    supportsBadge,
33    supportsImage,
34    supportsVibrate,
35    supportsSound,
36  } = useNotifications();
37 
38  const handleRequestPermission = async () => {
39    try {
40      await requestPermission();
41    } catch (error) {
42      console.error('Failed to request permission:', error);
43    }
44  };
45 
46  const handleShowNotification = () => {
47    showNotification('Demo Notification', {
48      body: 'This is a test notification from the demo component',
49      icon: '/favicon.ico',
50      badge: '/favicon.ico',
51      image: '/favicon.ico',
52      // Actions are only supported with Service Worker
53      // actions: [
54      //   {
55      //     action: 'view',
56      //     title: 'View Details',
57      //   },
58      // ],
59    });
60  };
61 
62  return (
63    <Card className="relative max-w-2xl w-full">
64      <CardHeader>
65        <CardTitle className="flex items-center gap-2">
66          <BellIcon className="h-5 w-5" />
67          useNotifications
68        </CardTitle>
69        <CardDescription>
70          This component demonstrates the use of the{' '}
71          <code>useNotifications</code> hook to manage browser notifications.
72        </CardDescription>
73      </CardHeader>
74      <CardContent className="space-y-4">
75        <div className="space-y-2">
76          <h3 className="font-medium">Browser Support</h3>
77          <div className="flex flex-wrap gap-2">
78            <Badge variant={isSupported ? 'default' : 'destructive'}>
79              {isSupported ? 'Supported' : 'Not Supported'}
80            </Badge>
81            <Badge variant={isSecureContext ? 'default' : 'destructive'}>
82              {isSecureContext ? 'Secure Context' : 'Not Secure'}
83            </Badge>
84          </div>
85        </div>
86 
87        <div className="space-y-2">
88          <h3 className="font-medium">Feature Support</h3>
89          <div className="flex flex-wrap gap-2">
90// … truncated