UseScrollPositionDemo

1'use client';
2 
3import {
4  Card,
5  CardContent,
6  CardDescription,
7  CardFooter,
8  CardHeader,
9  CardTitle,
10} from '@/components/ui/card';
11 
12import { useScrollPosition } from '@/hooks/guarahooks/use-scroll-position';
13 
14export default function UseScrollPositionDemo() {
15  const { x, y } = useScrollPosition();
16 
17  return (
18    <Card className="relative max-w-md w-full">
19      <CardHeader>
20        <CardTitle>useScrollPosition</CardTitle>
21        <CardDescription>
22          This component uses the <code>useScrollPosition</code> hook to track
23          the page scroll position.
24        </CardDescription>
25      </CardHeader>
26      <CardContent className="space-y-2">
27        <p>Scroll X: {x}px</p>
28        <p>Scroll Y: {y}px</p>
29      </CardContent>
30      <CardFooter>
31        <p className="text-sm text-muted-foreground">
32          Scroll the page to see the values change.
33        </p>
34      </CardFooter>
35    </Card>
36  );
37}