Spinner

'use client'

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

export const SpinnerBasic = () => {
  return <Spinner size="sm" />
}

'use client'

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

export const SpinnerWithSizes = () => {
  return (
    <HStack gap="5">
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="xl" />
    </HStack>
  )
}

'use client'

import { Stack } from '@chakra-ui/react'
import { Spinner } from '@saas-ui/react'

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

export const SpinnerWithColors = () => {
  return (
    <Stack gap="2" align="flex-start">
      {colorPalettes.map((colorPalette) => (
        <Stack
          align="center"
          key={colorPalette}
          direction="row"
          gap="10"
          px="4"
        >
          <Spinner
            size="sm"
            color="colorPalette.600"
            colorPalette={colorPalette}
          />
          <Spinner
            size="md"
            color="colorPalette.600"
            colorPalette={colorPalette}
          />
          <Spinner
            size="lg"
            color="colorPalette.600"
            colorPalette={colorPalette}
          />
        </Stack>
      ))}
    </Stack>
  )
}

'use client'

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

export const SpinnerCustomColor = () => {
  return <Spinner color="teal.500" size="lg" />
}

'use client'

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

export const SpinnerWithTrackColor = () => (
  <Spinner
    color="red.500"
    css={{ '--spinner-track-color': 'colors.gray.200' }}
  />
)

'use client'

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

export const SpinnerWithCustomSpeed = () => (
  <Spinner color="blue.500" animationDuration="0.8s" />
)

'use client'

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

export const SpinnerWithCustomThickness = () => (
  <Spinner color="blue.500" borderWidth="4px" />
)

'use client'

import { Text, VStack } from '@chakra-ui/react'
import { Spinner } from '@saas-ui/react'

export const SpinnerWithLabel = () => {
  return (
    <VStack colorPalette="teal">
      <Spinner color="colorPalette.600" />
      <Text color="colorPalette.600">Loading...</Text>
    </VStack>
  )
}