QRCode

"use client";

import {
  Input,
  QRCode,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent
} from "@pimolu/react";
import { useState } from "react";

export function DemoExample() {
  const [value, setValue] = useState("https://pimolu.dev/components/qr-code");
  return (
    <div
      className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-6 min-w-0 items-start"
    >
      <div className="grid gap-5 min-w-0">
        <Input
          label="Value"
          value={value}
          onValueChange={setValue}
          helperText={`${value.length} character(s) · UTF-8 byte mode`}
          placeholder="https://pimolu.dev"
        />
        {
          value.trim()
            ? (<QRCode
              value={value}
              size={220}
              level="M"
              aria-label="QR code for the current value"
            />)
            : (<p
              className="text-sm text-muted"
            >Enter at least one character to draw a code.</p>)
        }
      </div>
      <Card>
        <CardHeader>
          <CardTitle>Why SVG?</CardTitle>
          <CardDescription>
            A vector path stays sharp at any size, prints cleanly and needs
            no image pipeline.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <ul className="text-sm text-muted">
            <li>
              Versions 1–10 cover roughly 271 bytes at level L and 119 bytes
              at level H.
            </li>
            <li>Levels trade capacity for resilience: H survives more damage.</li>
            <li>
              The quiet zone defaults to four modules and can be changed with
              margin.
            </li>
            <li>No logo overlay: scanners are more reliable without one.</li>
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}