For

import { For } from "@chakra-ui/react"

export const ForBasic = () => {
  return (
    <For each={["One", "Two", "Three"]}>
      {(item, index) => <div key={index}>{item}</div>}
    </For>
  )
}

import { Box, For, Stack, Text } from "@chakra-ui/react"

export const ForWithObject = () => {
  return (
    <Stack>
      <For
        each={[
          { name: "Naruto", powers: ["Shadow Clone", "Rasengan"] },
          { name: "Sasuke", powers: ["Chidori", "Sharingan"] },
          { name: "Sakura", powers: ["Healing", "Super Strength"] },
        ]}
      >
        {(item, index) => (
          <Box borderWidth="1px" key={index} p="4">
            <Text fontWeight="bold">{item.name}</Text>
            <Text color="fg.muted">Powers: {item.powers.join(", ")}</Text>
          </Box>
        )}
      </For>
    </Stack>
  )
}

import { For, Stack, VStack } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
import { LuBox } from "react-icons/lu"

export const ForWithFallback = () => {
  return (
    <Stack gap="4">
      <For
        each={[]}
        fallback={
          <VStack textAlign="center" fontWeight="medium">
            <LuBox />
            No items to show
          </VStack>
        }
      >
        {(item, index) => (
          <DecorativeBox h="10" key={index}>
            {item}
          </DecorativeBox>
        )}
      </For>
    </Stack>
  )
}