UseOrientationDemo

1'use client';
2 
3import {
4  Card,
5  CardContent,
6  CardDescription,
7  CardFooter,
8  CardHeader,
9  CardTitle,
10} from '@/components/ui/card';
11 
12import { useOrientation } from '@/hooks/guarahooks/use-orientation';
13 
14export default function UseOrientationDemo() {
15  const orientation = useOrientation();
16 
17  return (
18    <Card className="relative max-w-sm w-full">
19      <CardHeader>
20        <CardTitle>useOrientation</CardTitle>
21        <CardDescription>
22          This component uses the <code>useOrientation</code> hook to get the
23          current orientation of the device.
24        </CardDescription>
25      </CardHeader>
26      <CardContent>
27        <p>Current orientation: {orientation}</p>
28        {orientation === 'portrait' ? (
29          <p className="text-green-600">You are in portrait mode 📱</p>
30        ) : (
31          <p className="text-purple-600">You are in landscape mode 🖥️</p>
32        )}
33      </CardContent>
34      <CardFooter>
35        <p className="text-sm text-muted-foreground">
36          Try rotating your device or resizing the window.
37        </p>
38      </CardFooter>
39    </Card>
40  );
41}