useClipboard

"use client";
import { useState } from "react";
import { Button } from "@/ui/button";
import { Input } from "@/ui/input";
import { Stack } from "@/ui/stack";
import { Typography } from "@/ui/typography";
import { CheckIcon, CopyIcon } from "@/icons/*";
import { useClipboard } from "@/hooks/use-clipboard";

export function UseClipboardDemo() {
  const { copy, copied, error } = useClipboard();
  const [text, setText] = useState<string | undefined>(undefined);

  if (error) return <Typography className="text-sm text-destructive">{error.message}</Typography>;

  return (
    <Stack className="m-auto size-full max-w-96">
      <Button
        title="copy"
        variant="outline"
        color="green"
        size="icon"
        aria-label="copy button"
        disabled={!text}
        onClick={() => {
          if (text) copy(text);
        }}
      >
        {copied ? <CheckIcon /> : <CopyIcon />}
      </Button>

      <Input id="set-text" title="input text" placeholder="input text to copy" onChange={e => setText(e.target.value)} />
    </Stack>
  );
}