Flex

import { Flex, Box, Text, Button } from "astralis-ui";

export function FlexDemo() {
  return (
    <Flex
      justifyContent="between"
      alignItems="center"
      gap="4"
      w="full"
      maxW="lg"
      bg="panel"
      p="4"
      rounded="xl"
      border="normal"
      borderColor="subtle"
    >
      <Flex alignItems="center" gap="3">
        <Box size="10" bg="brand-solid" rounded="full" />
        <Box>
          <Text size="sm" weight="semibold">Nova Starling</Text>
          <Text size="xs" color="muted">Product designer</Text>
        </Box>
      </Flex>
      <Button size="sm" variant="outline" colorScheme="gray">
        Follow
      </Button>
    </Flex>
  );
}

import { Flex, Box, Text, VStack } from "astralis-ui";

const justifyValues = ["start", "center", "end", "between", "around", "evenly"] as const;

export function FlexAlign() {
  return (
    <VStack gap="4" alignItems="stretch" w="full" maxW="md">
      {justifyValues.map((justify) => (
        <VStack key={justify} gap="1" alignItems="stretch">
          <Text as="span" size="xs" color="muted">
            justifyContent=&quot;{justify}&quot;
          </Text>
          <Flex justifyContent={justify} gap="2" bg="subtle" p="2" rounded="lg">
            <Box size="8" bg="brand-solid" rounded="md" />
            <Box size="8" bg="brand-muted" rounded="md" />
            <Box size="8" bg="brand-subtle" rounded="md" />
          </Flex>
        </VStack>
      ))}
    </VStack>
  );
}

"use client";

import { Flex, Center, Text } from "astralis-ui";

export function FlexItem() {
  return (
    <Flex gap="3" w="full" maxW="md">
      <Flex.Item basis="24">
        <Center bg="brand-subtle" p="3" rounded="lg">
          <Text size="xs">basis 24</Text>
        </Center>
      </Flex.Item>
      <Flex.Item grow>
        <Center bg="brand-muted" p="3" rounded="lg">
          <Text size="xs">grow</Text>
        </Center>
      </Flex.Item>
      <Flex.Item order="first">
        <Center bg="brand-solid" p="3" rounded="lg">
          <Text size="xs" color="inverted">order first</Text>
        </Center>
      </Flex.Item>
    </Flex>
  );
}

import { Flex, Box, Text } from "astralis-ui";

export function FlexResponsive() {
  return (
    /* Column on mobile, row from md up. */
    <Flex direction={{ base: "column", md: "row" }} gap="3" w="full" maxW="md">
      <Box bg="teal-subtle" p="4" rounded="lg">
        <Text size="sm">One</Text>
      </Box>
      <Box bg="teal-muted" p="4" rounded="lg">
        <Text size="sm">Two</Text>
      </Box>
      <Box bg="teal-emphasized" p="4" rounded="lg">
        <Text size="sm">Three</Text>
      </Box>
    </Flex>
  );
}