Tag

"use client";

import { useState } from "react";
import { Tag, HStack } from "astralis-ui";

export function TagDemo() {
  const [tags, setTags] = useState(["Design", "Engineering", "Research"]);

  return (
    <HStack gap="2" wrap="wrap" justifyContent="center">
      <Tag colorScheme="purple">Astralis</Tag>
      <Tag variant="outline" colorScheme="blue">v0.1</Tag>
      {tags.map((tag) => (
        <Tag key={tag} closable onClose={() => setTags(tags.filter((t) => t !== tag))}>
          {tag}
        </Tag>
      ))}
    </HStack>
  );
}

"use client";

import { useState } from "react";
import { Tag, Text, VStack } from "astralis-ui";

export function TagCheckable() {
  const [topics, setTopics] = useState<Array<string | number>>(["react"]);

  return (
    <VStack gap="3" alignItems="center">
      <Tag.Group
        multiple
        value={topics}
        onChange={setTopics}
        options={[
          { label: "React", value: "react" },
          { label: "Vue", value: "vue" },
          { label: "Svelte", value: "svelte" },
          { label: "Solid", value: "solid" },
        ]}
      />
      <Text size="xs" color="muted">
        Following: {topics.length ? topics.join(", ") : "nothing yet"}
      </Text>
    </VStack>
  );
}