UseMediaDemo

1'use client';
2 
3import {
4  Card,
5  CardContent,
6  CardDescription,
7  CardFooter,
8  CardHeader,
9  CardTitle,
10} from '@/components/ui/card';
11 
12import { useMedia } from '@/hooks/guarahooks/use-media';
13 
14export default function UseMediaDemo() {
15  const isMobile = useMedia('(max-width: 768px)');
16  const isDesktop = useMedia('(min-width: 768px)');
17 
18  return (
19    <Card className="relative max-w-sm w-full">
20      <CardHeader>
21        <CardTitle>useMedia</CardTitle>
22        <CardDescription>
23          This component uses the <code>useMedia</code> hook to check if the
24          current window matches a media query.
25        </CardDescription>
26      </CardHeader>
27      <CardContent>
28        <p>Is mobile: {isMobile ? 'Yes' : 'No'}</p>
29        <p>Is desktop: {isDesktop ? 'Yes' : 'No'}</p>
30      </CardContent>
31      <CardFooter>
32        <p className="text-sm text-muted-foreground">
33          Change the window size to see the values changing.
34        </p>
35      </CardFooter>
36    </Card>
37  );
38}