UseFullscreenDemo

1'use client';
2 
3import React, { useRef } from 'react';
4 
5import { Button } from '@/components/ui/button';
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardFooter,
11  CardHeader,
12  CardTitle,
13} from '@/components/ui/card';
14 
15import { useFullscreen } from '@/hooks/guarahooks/use-fullscreen';
16 
17export default function UseFullscreenDemo() {
18  const boxRef = useRef<HTMLDivElement>(null);
19  const [isFullscreen, enter, exit] = useFullscreen(
20    boxRef as React.RefObject<HTMLElement>,
21  );
22 
23  return (
24    <Card className="relative max-w-md w-full">
25      <CardHeader>
26        <CardTitle>useFullscreen</CardTitle>
27        <CardDescription>
28          This component uses the <code>useFullscreen</code> hook to toggle
29          fullscreen mode for a specific element.
30        </CardDescription>
31      </CardHeader>
32      <CardContent>
33        <p className="text-lg font-semibold text-primary">
34          {isFullscreen ? 'In Fullscreen' : 'Not Fullscreen'}
35        </p>
36      </CardContent>
37      <CardFooter className="flex gap-2">
38        <Button onClick={enter} disabled={isFullscreen} variant="secondary">
39          Enter Fullscreen
40        </Button>
41        <Button onClick={exit} disabled={!isFullscreen} variant="destructive">
42          Exit Fullscreen
43        </Button>
44      </CardFooter>
45    </Card>
46  );
47}