import { Playground, Props } from "@slytrunk/docs";
import { View } from "../View";
import Stack from "./Stack";

# Stack

Layout component used to create stacks of evenly spaced components both vertically and horizontally.

<Props of={Stack} />

## Basic usage

<Playground>
  <Stack gap={8}>
    <View style={{ background: "blue", padding: 8 }} />
    <View style={{ background: "blue", padding: 8 }} />
    <View style={{ background: "blue", padding: 8 }} />
    <View style={{ background: "blue", padding: 8 }} />
    <View style={{ background: "blue", padding: 8 }} />
  </Stack>
</Playground>

## Horizontal Stack

<Playground>
  <Stack inline gap={8}>
    <View style={{ background: "blue", padding: 8 }} />
    <View style={{ background: "blue", padding: 8 }} />
    <View style={{ background: "blue", padding: 8 }} />
    <View style={{ background: "blue", padding: 8 }} />
    <View style={{ background: "blue", padding: 8 }} />
  </Stack>
</Playground>

# Align Stack

<Playground>
  <Stack align="center" gap={8}>
    <View style={{ background: "blue", padding: 8 }} />
    <View style={{ background: "blue", padding: 8 }} />
    <View style={{ background: "blue", padding: 8 }} />
  </Stack>
</Playground>

# Justify Stack

<Playground>
  <Stack inline justify="center" gap={8}>
    <View style={{ background: "blue", padding: 8 }} />
    <View style={{ background: "blue", padding: 8 }} />
    <View style={{ background: "blue", padding: 8 }} />
  </Stack>
  <Stack inline justify="flex-end" gap={8}>
    <View style={{ background: "blue", padding: 8 }} />
    <View style={{ background: "blue", padding: 8 }} />
    <View style={{ background: "blue", padding: 8 }} />
  </Stack>
</Playground>

# Flex Stack

<Playground>
  <Stack inline flex gap={8}>
    <View style={{ background: "blue", padding: 8, flex: 1 }} />
    <View style={{ background: "blue", padding: 8, flex: 0 }} />
    <View style={{ background: "blue", padding: 8, flex: 1 }} />
  </Stack>
</Playground>

## Reverse direction

<Playground>
  <Stack reverse gap={8}>
    <View style={{ background: "green", padding: 8 }} />
    <View style={{ background: "blue", padding: 8 }} />
    <View style={{ background: "red", padding: 8 }} />
  </Stack>
</Playground>

## Filters out empty children

<Playground>
  <Stack gap={8}>
    <View style={{ background: "blue", padding: 8 }} />
    {false && <View style={{ background: "blue", padding: 8 }} />}
    <View style={{ background: "blue", padding: 8 }} />
  </Stack>
</Playground>