CellLayout

import { CellLayout, Badge } from "@/rl-ui";

<CellLayout gap="2" justify="between">
<span>Acme</span>
<Badge color="green">Active</Badge>
</CellLayout>

import { CellLayout, Badge, Text } from "@/rl-ui";

<>
<CellLayout justify="start" gap="2" className="w-full">
  <Text variant="body-short-01">Start</Text>
  <Badge color="blue">A</Badge>
</CellLayout>
<CellLayout justify="center" gap="2" className="w-full">
  <Text variant="body-short-01">Center</Text>
  <Badge color="green">B</Badge>
</CellLayout>
<CellLayout justify="end" gap="2" className="w-full">
  <Text variant="body-short-01">End</Text>
  <Badge color="orange">C</Badge>
</CellLayout>
<CellLayout justify="between" gap="2" className="w-full">
  <Text variant="body-short-01">Between</Text>
  <Badge color="purple">D</Badge>
</CellLayout>
</>

import { CellLayout, Avatar, Text, Badge } from "@/rl-ui";

<CellLayout gap="3" justify="between" className="w-full">
<CellLayout gap="2">
  <Avatar name="Ada Lovelace" size={24} />
  <Text variant="body-short-01">Ada Lovelace</Text>
</CellLayout>
<Badge color="teal">Owner</Badge>
</CellLayout>

import { CellLayout, Text } from "@/rl-ui";

<CellLayout padding="px-4 py-2" gap="2" className="w-full bg-[var(--gray-10)]">
<Text variant="body-short-01">Padded cell</Text>
</CellLayout>