Checkbox Card

import { CheckboxCard } from "@/components/ui/checkbox-card"

const Demo = () => {
  return (
    <CheckboxCard label="Next.js" description="Best for apps" maxW="240px" />
  )
}

import { CheckboxGroup, Flex, Text } from "@chakra-ui/react"
import { CheckboxCard } from "@/components/ui/checkbox-card"

const Demo = () => {
  return (
    <CheckboxGroup defaultValue={["next"]}>
      <Text textStyle="sm" fontWeight="medium">
        Select framework(s)
      </Text>
      <Flex gap="2">
        {items.map((item) => (
          <CheckboxCard
            label={item.title}
            description={item.description}
            key={item.value}
            value={item.value}
          />
        ))}
      </Flex>
    </CheckboxGroup>
  )
}

const items = [
  { value: "next", title: "Next.js", description: "Best for apps" },
  { value: "vite", title: "Vite", description: "Best for SPAs" },
  { value: "astro", title: "Astro", description: "Best for static sites" },
]

import { For, Stack } from "@chakra-ui/react"
import { CheckboxCard } from "@/components/ui/checkbox-card"

const Demo = () => {
  return (
    <Stack maxW="320px">
      <For each={["sm", "md", "lg"]}>
        {(size) => <CheckboxCard label={`Checkbox (${size})`} size={size} />}
      </For>
    </Stack>
  )
}

import { For, Stack } from "@chakra-ui/react"
import { CheckboxCard } from "@/components/ui/checkbox-card"

const Demo = () => {
  return (
    <Stack maxW="320px">
      <For each={["subtle", "surface", "outline"]}>
        {(variant) => (
          <CheckboxCard
            defaultChecked
            label={`Checkbox (${variant})`}
            colorPalette="teal"
            variant={variant}
          />
        )}
      </For>
    </Stack>
  )
}

import { CheckboxCard } from "@/components/ui/checkbox-card"

const Demo = () => {
  return (
    <CheckboxCard
      disabled
      label="Disabled"
      description="This is a disabled checkbox"
      maxW="320px"
    />
  )
}

import { Badge, HStack } from "@chakra-ui/react"
import { CheckboxCard } from "@/components/ui/checkbox-card"

const Demo = () => {
  return (
    <CheckboxCard
      label="With Addon"
      description="Some description"
      maxW="300px"
      addon={
        <HStack>
          Some supporting text
          <Badge variant="solid">New</Badge>
        </HStack>
      }
    />
  )
}

import { CheckboxGroup, Float, Icon, SimpleGrid } from "@chakra-ui/react"
import {
  CheckboxCard,
  CheckboxCardIndicator,
} from "@/components/ui/checkbox-card"
import { HiGlobeAlt, HiLockClosed, HiShieldCheck, HiUser } from "react-icons/hi"

const Demo = () => {
  return (
    <CheckboxGroup defaultValue={["Guest"]}>
      <SimpleGrid minChildWidth="200px" gap="2">
        {items.map((item) => (
          <CheckboxCard
            align="center"
            key={item.label}
            icon={
              <Icon fontSize="2xl" mb="2">
                {item.icon}
              </Icon>
            }
            label={item.label}
            description={item.description}
            indicator={
              <Float placement="top-end" offset="6">
                <CheckboxCardIndicator />
              </Float>
            }
          />
        ))}
      </SimpleGrid>
    </CheckboxGroup>
  )
}

const items = [
  { icon: <HiShieldCheck />, label: "Admin", description: "Give full access" },
  { icon: <HiUser />, label: "User", description: "Give limited access" },
  {
    icon: <HiGlobeAlt />,
    label: "Guest",
    description: "Give read-only access",
  },
  { icon: <HiLockClosed />, label: "Blocked", description: "No access" },
]