UseEyeDropperDemo

1'use client';
2 
3import React from 'react';
4 
5import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
6import { Button } from '@/components/ui/button';
7import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
8 
9import { useColorPicker } from '@/hooks/guarahooks/use-eye-dropper';
10 
11export function ColorPickerExample() {
12  const { color, error, isSupported, pickColor } = useColorPicker();
13 
14  return (
15    <Card className="max-w-sm mx-auto shadow-lg border-muted">
16      <CardHeader>
17        <CardTitle className="text-center text-2xl font-bold tracking-tight">
18          Color Picker
19        </CardTitle>
20      </CardHeader>
21      <CardContent>
22        <div className="flex flex-col items-center gap-4">
23          <div className="w-full text-center">
24            <p className="text-sm text-muted-foreground mb-2">
25              Click the button below to pick a color from anywhere on your
26              screen.
27            </p>
28          </div>
29          <div
30            className="rounded-lg mb-2 h-20 w-20 flex items-center justify-center text-white font-semibold border-4 transition-all duration-300"
31            style={{
32              background: color || '#888',
33              borderColor: color ? color : '#888',
34              boxShadow: color ? `0 0 0 4px ${color}33` : undefined,
35            }}
36          >
37            {color ? (
38              <span className="text-xs font-medium drop-shadow">{color}</span>
39            ) : (
40              <span className="text-xs opacity-70">No color selected</span>
41            )}
42          </div>
43 
44          {isSupported() ? (
45            <Button
46              onClick={pickColor}
47              className="w-full flex items-center gap-2"
48              variant="default"
49              size="lg"
50            >
51              Pick color
52            </Button>
53          ) : (
54            <Alert variant="destructive" className="w-full">
55              <AlertTitle>Not Supported</AlertTitle>
56              <AlertDescription>
57                EyeDropper API not supported in this browser.
58              </AlertDescription>
59            </Alert>
60          )}
61 
62          {error && (
63            <Alert variant="destructive" className="w-full">
64              <AlertTitle>Error</AlertTitle>
65              <AlertDescription>{error.message}</AlertDescription>
66            </Alert>
67          )}
68        </div>
69      </CardContent>
70    </Card>
71  );
72}