Empty State

'use client'

import { EmptyState } from '@saas-ui/react'
import { LuShoppingCart } from 'react-icons/lu'

export const EmptyStateBasic = () => {
  return (
    <EmptyState
      icon={<LuShoppingCart />}
      title="Your cart is empty"
      description="Explore our products and add items to your cart"
    />
  )
}

'use client'

import { Button, ButtonGroup, EmptyState } from '@saas-ui/react'
import { HiColorSwatch } from 'react-icons/hi'

export const EmptyStateWithAction = () => {
  return (
    <EmptyState
      icon={<HiColorSwatch />}
      title="Start adding tokens"
      description="Add a new design token to get started"
    >
      <ButtonGroup>
        <Button variant="outline">Create token</Button>
        <Button variant="solid">Import</Button>
      </ButtonGroup>
    </EmptyState>
  )
}

'use client'

import { List } from '@chakra-ui/react'
import { EmptyState } from '@saas-ui/react'
import { LuSearch } from 'react-icons/lu'

export const EmptyStateWithList = () => {
  return (
    <EmptyState
      icon={<LuSearch />}
      title="No results found"
      description="Try adjusting your search"
    >
      <List.Root variant="marker">
        <List.Item>Try removing filters</List.Item>
        <List.Item>Try different keywords</List.Item>
      </List.Root>
    </EmptyState>
  )
}