Segmented Control

'use client'

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

export const SegmentedControlBasic = () => {
  return (
    <SegmentedControl defaultValue="React" items={['React', 'Vue', 'Solid']} />
  )
}

'use client'

import { For, Stack, Text, VStack } from '@chakra-ui/react'
import { SegmentedControl } from '@saas-ui/react'

export const SegmentedControlWithSizes = () => {
  return (
    <Stack gap="5" align="flex-start">
      <For each={['xs', 'sm', 'md', 'lg']}>
        {(size) => (
          <VStack key={size} align="flex-start">
            <SegmentedControl
              size={size}
              defaultValue="React"
              items={['React', 'Vue', 'Solid']}
            />
            <Text>size = {size}</Text>
          </VStack>
        )}
      </For>
    </Stack>
  )
}

'use client'

import { useState } from 'react'

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

export const SegmentedControlControlled = () => {
  const [value, setValue] = useState('React')
  return (
    <SegmentedControl
      value={value}
      onValueChange={(e) => setValue(e.value)}
      items={['React', 'Vue', 'Solid']}
    />
  )
}

'use client'

import { Button, Stack } from '@chakra-ui/react'
import { zodResolver } from '@hookform/resolvers/zod'
import { Field, SegmentedControl } from '@saas-ui/react'
import { Controller, useForm } from 'react-hook-form'
import { z } from 'zod'

const formSchema = z.object({
  fontSize: z.string({ message: 'Font size is required' }),
})

type FormValues = z.infer<typeof formSchema>

export const SegmentedControlWithHookForm = () => {
  const {
    handleSubmit,
    formState: { errors },
    control,
  } = useForm<FormValues>({
    defaultValues: { fontSize: 'md' },
    resolver: zodResolver(formSchema),
  })

  const onSubmit = handleSubmit((data) => console.log(data))

  return (
    <form onSubmit={onSubmit}>
      <Stack gap="4" align="flex-start">
        <Controller
          control={control}
          name="fontSize"
          render={({ field }) => (
            <Field.Root invalid={!!errors.fontSize}>
              <Field.Label>Font size</Field.Label>
              <SegmentedControl
                onBlur={field.onBlur}
                name={field.name}
                value={field.value}
                items={['sm', 'md', 'lg']}
                onValueChange={({ value }) => field.onChange(value)}
              />
              <Field.ErrorText>{errors.fontSize?.message}</Field.ErrorText>
            </Field.Root>
          )}
        />

        <Button size="sm" type="submit">
          Submit
        </Button>
      </Stack>
    </form>
  )
}

'use client'

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

export const SegmentedControlWithDisabled = () => {
  return (
    <SegmentedControl
      disabled
      defaultValue="React"
      items={['React', 'Vue', 'Solid']}
    />
  )
}

'use client'

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

export const SegmentedControlWithDisabledItem = () => {
  return (
    <SegmentedControl
      defaultValue="React"
      items={[
        { label: 'React', value: 'React' },
        { label: 'Vue', value: 'Vue', disabled: true },
        { label: 'Solid', value: 'Solid' },
      ]}
    />
  )
}

'use client'

import { HStack } from '@chakra-ui/react'
import { SegmentedControl } from '@saas-ui/react'
import { LuGrid2X2, LuList, LuTable } from 'react-icons/lu'

export const SegmentedControlWithIcon = () => {
  return (
    <SegmentedControl
      defaultValue="table"
      items={[
        {
          value: 'table',
          label: (
            <HStack>
              <LuTable />
              Table
            </HStack>
          ),
        },
        {
          value: 'board',
          label: (
            <HStack>
              <LuGrid2X2 />
              Board
            </HStack>
          ),
        },
        {
          value: 'list',
          label: (
            <HStack>
              <LuList />
              List
            </HStack>
          ),
        },
      ]}
    />
  )
}

'use client'

import { Button, Card, Heading } from '@chakra-ui/react'
import { Field, SegmentedControl } from '@saas-ui/react'
import { LuSearch } from 'react-icons/lu'

export const SegmentedControlInCard = () => {
  return (
    <Card.Root width="320px">
      <Card.Header>
        <Heading size="lg">Find your dream home</Heading>
      </Card.Header>
      <Card.Body gap="6">
        <Field.Root>
          <Field.Label>Bedrooms</Field.Label>
          <SegmentedControl
            defaultValue="Any"
            items={['Any', '1', '2', '3', '3+']}
          />
        </Field.Root>
        <Field.Root>
          <Field.Label>Beds</Field.Label>
          <SegmentedControl defaultValue="1" items={['Any', '1', '2', '2+']} />
        </Field.Root>
        <Field.Root>
          <Field.Label>Bathrooms</Field.Label>
          <SegmentedControl defaultValue="3" items={['Any', '1', '2', '3']} />
        </Field.Root>
      </Card.Body>
      <Card.Footer justifyContent="space-between" mt="3">
        <Button variant="surface">Reset</Button>
        <Button>
          <LuSearch /> 20 results
        </Button>
      </Card.Footer>
    </Card.Root>
  )
}