UseGeolocationDemo

1'use client';
2 
3import React 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 { useGeolocation } from '@/hooks/guarahooks/use-geolocation';
16 
17export default function UseGeolocationDemo() {
18  const { position, error, isLoading, clearWatch } = useGeolocation();
19 
20  return (
21    <Card className="relative max-w-sm w-full">
22      <CardHeader>
23        <CardTitle>useGeolocation</CardTitle>
24        <CardDescription>
25          Declarative Geolocation API hook demo.
26        </CardDescription>
27      </CardHeader>
28      <CardContent className="space-y-4">
29        {isLoading && <p>Loading...</p>}
30        {error && <p className="text-red-500">{error.message}</p>}
31        {position && (
32          <div>
33            <p>Latitude: {position.coords.latitude}</p>
34            <p>Longitude: {position.coords.longitude}</p>
35          </div>
36        )}
37      </CardContent>
38      <CardFooter className="flex gap-2">
39        <Button onClick={clearWatch}>Clear Watch</Button>
40      </CardFooter>
41    </Card>
42  );
43}