Tag

'use client'

import { HStack } from '@chakra-ui/react'
import { Tag } from '@saas-ui/react'

export const TagBasic = () => {
  return (
    <HStack>
      <Tag>Plain Tag</Tag>
      <Tag closable>Closable Tag</Tag>
    </HStack>
  )
}

'use client'

import { HStack } from '@chakra-ui/react'
import { Tag } from '@saas-ui/react'
import { LuCircleUser, LuFileBadge } from 'react-icons/lu'

export const TagWithIcon = () => {
  return (
    <HStack>
      <Tag startElement={<LuCircleUser />}>Tag 2</Tag>
      <Tag startElement={<LuFileBadge />}>Top Rated</Tag>
    </HStack>
  )
}

'use client'

import { For, HStack, Stack } from '@chakra-ui/react'
import { Tag } from '@saas-ui/react'
import { HiCheck } from 'react-icons/hi'

export const TagWithVariants = () => {
  return (
    <Stack gap="8">
      <For each={['subtle', 'solid', 'outline', 'surface']}>
        {(variant) => (
          <HStack key={variant}>
            <Tag variant={variant}>Gray</Tag>
            <Tag variant={variant} closable>
              Gray
            </Tag>
            <Tag endElement={<HiCheck />} variant={variant}>
              Gray
            </Tag>
          </HStack>
        )}
      </For>
    </Stack>
  )
}

'use client'

import { For, HStack, Stack } from '@chakra-ui/react'
import { Tag } from '@saas-ui/react'
import { HiCheck } from 'react-icons/hi'

export const TagWithSizes = () => {
  return (
    <Stack gap="8">
      <For each={['sm', 'md', 'lg']}>
        {(size) => (
          <HStack key={size}>
            <Tag size={size}>Gray</Tag>
            <Tag size={size} closable>
              Gray
            </Tag>
            <Tag endElement={<HiCheck />} size={size}>
              Gray
            </Tag>
          </HStack>
        )}
      </For>
    </Stack>
  )
}

'use client'

import { Stack, Text } from '@chakra-ui/react'
import { Tag } from '@saas-ui/react'
import { HiPlus } from 'react-icons/hi'

import { colorPalettes } from '../lib/color-palettes'

export const TagWithColors = () => {
  return (
    <Stack gap="2" align="flex-start">
      {colorPalettes.map((colorPalette) => (
        <Stack
          align="center"
          key={colorPalette}
          direction="row"
          gap="10"
          px="4"
        >
          <Text minW="8ch">{colorPalette}</Text>
          <Tag size="sm" colorPalette={colorPalette}>
            Content
          </Tag>
          <Tag startElement={<HiPlus />} size="sm" colorPalette={colorPalette}>
            Content
          </Tag>
          <Tag size="sm" colorPalette={colorPalette} variant="solid" closable>
            Content
          </Tag>
        </Stack>
      ))}
    </Stack>
  )
}

'use client'

import { HStack } from '@chakra-ui/react'
import { Tag } from '@saas-ui/react'
import { LuActivity } from 'react-icons/lu'

export const TagWithClose = () => {
  return (
    <HStack>
      <Tag startElement={<LuActivity />} closable>
        Tag 1
      </Tag>
      <Tag closable>Tag 2</Tag>
    </HStack>
  )
}

'use client'

import { Tag } from '@saas-ui/react'

export const TagWithOverflow = () => {
  return (
    <Tag size="sm" colorPalette="blue" maxW="200px" closable>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
      molestias, laboriosam, quod, quia quidem quae voluptatem natus
      exercitationem autem quibusdam
    </Tag>
  )
}

'use client'

import { For, HStack } from '@chakra-ui/react'
import { Avatar, Tag } from '@saas-ui/react'

export const TagWithAvatar = () => {
  return (
    <HStack>
      <For each={['sm', 'md', 'lg', 'xl']}>
        {(size) => (
          <Tag
            key={size}
            rounded="full"
            size={size}
            startElement={
              <Avatar
                size="full"
                src="https://i.pravatar.cc/300?u=1"
                name="John Doe"
              />
            }
          >
            Emily ({size})
          </Tag>
        )}
      </For>
    </HStack>
  )
}

'use client'

import { Tag } from '@saas-ui/react'
import { LuCheck } from 'react-icons/lu'

export const TagAsButton = () => {
  return (
    <Tag as="button" variant="solid" endElement={<LuCheck />}>
      Fish
    </Tag>
  )
}