Container

"use client";

import {Container, ContainerDirection} from "@brynlabs/fusion-ui";
import React from "react";

const directions: ContainerDirection[] = ["inline", "block", "both"];

// The light area is the padding of the container, the strong area its content
export const ContainerExample = () => (
  <div style={{display: "flex", flexDirection: "column", gap: "1.5rem"}}>
    {directions.map(direction => (
      <div key={direction} style={{display: "flex", flexDirection: "column", gap: "0.5rem"}}>
        <code>direction=&quot;{direction}&quot;</code>
        <div style={{background: "var(--color--primary-100)", borderRadius: "0.5rem"}}>
          <Container direction={direction}>
            <div
              style={{
                background: "var(--color--primary-500)",
                color: "var(--color--primary-500-contrast)",
                height: 80,
                borderRadius: "0.25rem",
                display: "grid",
                placeItems: "center",
              }}>
              Content
            </div>
          </Container>
        </div>
      </div>
    ))}
  </div>
);