asciitorium/dist/examples/LayoutBasics.js

an ASCII CLUI framework

import { jsx as _jsx, jsxs as _jsxs } from "asciitorium/jsx-runtime";
import { Line, Column, Row, Text } from "../index.js";
import { BaseStyle } from './constants.js';
/**
 * Layout Basics
 *
 * Guide to layout approaches in asciitorium.
 */
export const LayoutBasics = () => {
    return (_jsxs(Column, { style: BaseStyle, label: "Layout Basics", children: [_jsx(Text, { width: "90%", gap: { top: 1 }, children: "Available Layout Types" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { left: 6 }, children: "\u2022 Row Layout \u2014 arranges children horizontally \u00B6 \u2022 Column Layout \u2014 arranges children vertically \u00B6" }), _jsxs(Column, { width: "90%", align: "center", border: true, label: "Layout Example", height: 15, children: [_jsx(Text, { border: true, width: "fill", children: "Header" }), _jsxs(Row, { height: "fill", children: [_jsxs(Column, { width: 14, height: "fill", border: true, children: [_jsx(Text, { children: "Nav Item 1" }), _jsx(Text, { children: "Nav Item 2" }), _jsx(Text, { children: "Nav Item 3" })] }), _jsx(Column, { width: "fill", height: "fill", border: true, children: _jsx(Text, { children: "Main Content Area" }) })] }), _jsx(Text, { border: true, width: "fill", children: "Footer" })] }), _jsx(Text, { width: "90%", gap: { top: 1 }, children: "* For absolute positioning you can use the position prop:" }), _jsx(Text, { width: "90%", align: "center", wrap: false, children: `
  <Text position={{ x: 10, y: 5 }}>
    Fixed Position
  </Text>
` })] }));
};