Flex

import { Card, Flex } from "@appboxo/ui-kit"

import { Pill } from "./_pill"
import { PreviewLayout } from "./_section"

export function FlexVerticalPreview() {
  return (
    <PreviewLayout>
      <Card>
        <Flex vertical gap={12}>
          <Pill>One</Pill>
          <Pill>Two</Pill>
          <Pill>Three</Pill>
        </Flex>
      </Card>
    </PreviewLayout>
  )
}

import { Card, Flex } from "@appboxo/ui-kit"

import { Pill } from "./_pill"
import { PreviewLayout } from "./_section"

export function FlexHorizontalPreview() {
  return (
    <PreviewLayout>
      <Card>
        {/* kit's Flex defaults to `vertical={true}` — pass vertical={false}
            explicitly for horizontal rows. */}
        <Flex vertical={false} gap={8} wrap="wrap">
          <Pill>One</Pill>
          <Pill>Two</Pill>
          <Pill>Three</Pill>
          <Pill>Four</Pill>
        </Flex>
      </Card>
    </PreviewLayout>
  )
}

import { Body1, Card, Flex } from "@appboxo/ui-kit"

import { Pill } from "./_pill"
import { PreviewLayout } from "./_section"

export function FlexBetweenPreview() {
  return (
    <PreviewLayout>
      <Card>
        <Flex vertical={false} justify="space-between" align="center">
          <Body1 weight="semibold">Notifications</Body1>
          <Pill>On</Pill>
        </Flex>
      </Card>
    </PreviewLayout>
  )
}

import { Card, Flex } from "@appboxo/ui-kit"

import { Pill } from "./_pill"
import { PreviewLayout } from "./_section"

export function FlexCenteredPreview() {
  return (
    <PreviewLayout>
      <Card style={{ minHeight: 120 }}>
        <Flex vertical={false} align="center" justify="center" style={{ height: "100%" }}>
          <Pill>Empty state</Pill>
        </Flex>
      </Card>
    </PreviewLayout>
  )
}