TagsInput

"use client";

import { useState } from "react";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  TagsInput,
  Badge,
  Button
} from "@pimolu/react";

function ArticleTags() {
  const [tags, setTags] = useState([
    "design systems",
    "accessibility",
  ]);
  const [published, setPublished] = useState(false);
  return (
    <Card>
      <CardHeader>
        <CardTitle>Publish an article</CardTitle>
        <CardDescription>
          Add up to five topics. Enter or comma commits a tag; Backspace
          removes the last one.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid gap-5 min-w-0">
          <TagsInput
            label="Topics"
            placeholder="Add a topic"
            value={tags}
            onValueChange={(next: string[]) => {
              setTags(next);
              setPublished(false);
            }}
            maxTags={5}
            fullWidth
            error={tags.length === 0}
            errorMessage={tags.length === 0
              ? "An article needs at least one topic."
              : undefined}
            helperText={`${tags.length} of 5 topics selected.`}
          />
          <div className="flex flex-wrap items-center gap-3 min-w-0">
            <Badge variant="primary">
              {tags.length} topics
            </Badge>
            <Button
              size="sm"
              disabled={tags.length === 0}
              onClick={() => setPublished(true)}
            >
              Publish
            </Button>
            {
              published
                ? (<span className="text-sm text-muted leading-relaxed">
                  Published with {tags.join(", ")}.
                </span>)
                : null
            }
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

export function DemoExample() {
  return (<ArticleTags />);
}