UseBatteryStatusDemo

1'use client';
2 
3import React from 'react';
4 
5import { Badge } from '@/components/ui/badge';
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardFooter,
11  CardHeader,
12  CardTitle,
13} from '@/components/ui/card';
14 
15import { cn } from '@/lib/utils';
16 
17import { useBatteryStatus } from '@/hooks/guarahooks/use-battery-status';
18 
19export default function UseBatteryStatusDemo() {
20  const { supported, level, charging, chargingTime, dischargingTime } =
21    useBatteryStatus();
22 
23  if (!supported) {
24    return (
25      <Card className="max-w-sm w-full">
26        <CardHeader>
27          <CardTitle>useBatteryStatus</CardTitle>
28          <CardDescription>
29            Battery Status API is not supported in this browser.
30          </CardDescription>
31        </CardHeader>
32      </Card>
33    );
34  }
35 
36  const percentage = Math.round(level * 100);
37 
38  return (
39    <Card className="max-w-sm w-full">
40      <CardHeader>
41        <CardTitle>useBatteryStatus</CardTitle>
42        <CardDescription>
43          Live system battery status using the Battery Status API.
44        </CardDescription>
45      </CardHeader>
46      <CardContent className="space-y-4">
47        <div>
48          <span className="font-medium">Level:</span>{' '}
49          <span className="text-lg font-semibold">{percentage}%</span>
50        </div>
51        <div className="w-full">
52          <progress
53            className="w-full h-2 rounded bg-gray-200"
54            value={percentage}
55            max={100}
56          />
57        </div>
58        <Badge
59          variant="secondary"
60          className={cn(
61            'w-fit',
62            charging
63              ? 'bg-green-500/30 border-green-500 text-green-300'
64              : 'bg-red-500/30 border-red-500 text-red-300',
65          )}
66        >
67          {charging ? 'Charging' : 'Discharging'}
68        </Badge>
69        <CardFooter>
70          <p className="text-sm text-muted-foreground">
71            Charging Time: {chargingTime}s, Discharging Time: {dischargingTime}s
72          </p>
73        </CardFooter>
74      </CardContent>
75    </Card>
76  );
77}