UseCopyToClipboardDemo

1'use client';
2 
3import React, { useState } from 'react';
4 
5import { Button } from '@/components/ui/button';
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardHeader,
11  CardTitle,
12} from '@/components/ui/card';
13import { Input } from '@/components/ui/input';
14 
15import { useCopyToClipboard } from '@/hooks/guarahooks/use-copy-to-clipboard';
16 
17export function UseCopyToClipboardDemo() {
18  const [text, setText] = useState('');
19  const { copied, copy } = useCopyToClipboard();
20 
21  return (
22    <Card className="relative max-w-sm w-full">
23      <CardHeader>
24        <CardTitle>useCopyToClipboard</CardTitle>
25        <CardDescription>
26          This component uses the <code>useCopyToClipboard</code> hook to copy
27          text to the clipboard.
28        </CardDescription>
29      </CardHeader>
30      <CardContent className="space-y-4">
31        <Input
32          value={text}
33          onChange={(e) => setText(e.target.value)}
34          placeholder="Type something to copy..."
35        />
36        <div className="flex items-center gap-2">
37          <Button onClick={() => copy(text)} disabled={!text}>
38            Copiar
39          </Button>
40          {copied && (
41            <span className="text-green-500 bg-green-500/20 px-2 py-0.5 rounded-md">
42              Copied!
43            </span>
44          )}
45        </div>
46      </CardContent>
47    </Card>
48  );
49}