Radio Card

'use client'

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

export const RadioCardBasic = () => {
  return (
    <RadioCard.Root defaultValue="next">
      <RadioCard.Label>Select framework</RadioCard.Label>
      <HStack align="stretch">
        {items.map((item) => (
          <RadioCard.Item
            label={item.title}
            description={item.description}
            key={item.value}
            value={item.value}
          />
        ))}
      </HStack>
    </RadioCard.Root>
  )
}

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' },
]

'use client'

import { For, HStack, Stack } from '@chakra-ui/react'
import { RadioCard } from '@saas-ui/react'

export const RadioCardWithSizes = () => {
  return (
    <Stack gap="8">
      <For each={['sm', 'md', 'lg']}>
        {(size) => (
          <RadioCard.Root key={size} size={size} defaultValue="next">
            <RadioCard.Label>size = ({size})</RadioCard.Label>
            <HStack align="stretch">
              {items.map((item) => (
                <RadioCard.Item
                  label={item.title}
                  key={item.value}
                  value={item.value}
                />
              ))}
            </HStack>
          </RadioCard.Root>
        )}
      </For>
    </Stack>
  )
}

const items = [
  { value: 'next', title: 'Next.js' },
  { value: 'vite', title: 'Vite' },
]

'use client'

import { For, HStack, Stack } from '@chakra-ui/react'
import { RadioCard } from '@saas-ui/react'

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

export const RadioCardWithColors = () => {
  return (
    <Stack gap="8">
      <For each={colorPalettes}>
        {(colorPalette) => (
          <RadioCard.Root
            key={colorPalette}
            colorPalette={colorPalette}
            defaultValue="next"
          >
            <RadioCard.Label>Select Framework</RadioCard.Label>
            <HStack align="stretch">
              {items.map((item) => (
                <RadioCard.Item
                  label={item.title}
                  key={item.value}
                  value={item.value}
                />
              ))}
            </HStack>
          </RadioCard.Root>
        )}
      </For>
    </Stack>
  )
}

const items = [
  { value: 'next', title: 'Next.js' },
  { value: 'vite', title: 'Vite' },
]

'use client'

import { HStack, Icon } from '@chakra-ui/react'
import { RadioCard } from '@saas-ui/react'
import { LuArrowRight, LuCircleOff, LuLock } from 'react-icons/lu'

export const RadioCardWithIcon = () => {
  return (
    <RadioCard.Root defaultValue="next">
      <RadioCard.Label>Select permission</RadioCard.Label>
      <HStack align="stretch">
        {items.map((item) => (
          <RadioCard.Item
            icon={
              <Icon fontSize="2xl" color="fg.muted" mb="2">
                {item.icon}
              </Icon>
            }
            label={item.title}
            description={item.description}
            key={item.value}
            value={item.value}
          />
        ))}
      </HStack>
    </RadioCard.Root>
  )
}

const items = [
  {
    icon: <LuArrowRight />,
    value: 'allow',
    title: 'Allow',
    description: 'This user can access the system',
  },
  {
    icon: <LuCircleOff />,
    value: 'deny',
    title: 'Deny',
    description: 'This user will be denied access to the system',
  },
  {
    icon: <LuLock />,
    value: 'lock',
    title: 'Lock',
    description: 'This user will be locked out of the system',
  },
]

'use client'

import { HStack, Icon } from '@chakra-ui/react'
import { RadioCard } from '@saas-ui/react'
import { LuClock, LuDollarSign, LuTrendingUp } from 'react-icons/lu'

export const RadioCardCentered = () => {
  return (
    <RadioCard.Root orientation="vertical" align="center" defaultValue="next">
      <RadioCard.Label>Select contract type</RadioCard.Label>
      <HStack align="stretch">
        {items.map((item) => (
          <RadioCard.Item
            icon={
              <Icon fontSize="2xl" color="fg.muted" mb="2">
                {item.icon}
              </Icon>
            }
            label={item.title}
            key={item.value}
            value={item.value}
          />
        ))}
      </HStack>
    </RadioCard.Root>
  )
}

const items = [
  { icon: <LuDollarSign />, value: 'fixed', title: 'Fixed Rate' },
  { icon: <LuTrendingUp />, value: 'milestone', title: 'Milestone' },
  { icon: <LuClock />, value: 'hourly', title: 'Hourly' },
]

'use client'

import { HStack, RadioCardRoot } from '@chakra-ui/react'
import { RadioCard } from '@saas-ui/react'

export const RadioCardWithAddon = () => {
  return (
    <RadioCard.Root defaultValue="next">
      <RadioCard.Label>Select framework</RadioCard.Label>
      <HStack align="stretch">
        {items.map((item) => (
          <RadioCard.Item
            label={item.title}
            description={item.description}
            key={item.value}
            value={item.value}
            addon="Some addon text"
          />
        ))}
      </HStack>
    </RadioCard.Root>
  )
}

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' },
]