asciitorium/dist/examples/SwitchBasics.js

an ASCII CLUI framework

import { jsx as _jsx, jsxs as _jsxs } from "asciitorium/jsx-runtime";
import { Line, Column, Row, Text, State, Switch, Case, Default, Button, Banner, } from '../index.js';
import { BaseStyle } from './constants.js';
// Simple demo components
const AdminPanel = () => (_jsxs(Column, { width: "fill", height: "fill", border: true, label: "Admin Panel", align: "top", children: [_jsx(Banner, { font: "pencil", text: "Admin Mode" }), _jsx(Text, { children: "Welcome, Administrator!" }), _jsx(Text, { children: "You have full access to the system." })] }));
const UserPanel = () => (_jsxs(Column, { width: "fill", height: "fill", border: true, label: "User Panel", align: "top", children: [_jsx(Banner, { font: "pencil", text: "User Mode" }), _jsx(Text, { children: "Welcome, User!" }), _jsx(Text, { children: "You have limited access." })] }));
const GuestPanel = () => (_jsxs(Column, { width: "fill", height: "fill", border: true, label: "Guest Panel", align: "top", children: [_jsx(Banner, { font: "pencil", text: "Guest Mode" }), _jsx(Text, { children: "Welcome, Guest!" }), _jsx(Text, { children: "Please log in to access more features." })] }));
/**
 * Switch Basics
 *
 * Guide to using Switch component for conditional rendering.
 */
export const SwitchBasics = () => {
    // State to control which panel is shown
    const userRole = new State('');
    return (_jsxs(Column, { style: BaseStyle, label: "Switch Basics", children: [_jsx(Text, { width: "90%", gap: { top: 1 }, children: "Switch Component for Conditional Rendering" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { bottom: 1 }, children: "The Switch component replaces a component based state." }), _jsx(Text, { width: "90%", gap: { left: 6 }, children: "\u2022 condition \u2014 State<string> to match against \u00B6 \u2022 Case - when [state] then create [component] \u00B6 \u2022 Default - if no case statements match, create [component] \u00B6" }), _jsx(Column, { width: "90%", height: 12, gap: { left: 4 }, children: _jsxs(Switch, { width: "100%", height: "100%", condition: userRole, children: [_jsx(Case, { when: "admin", create: AdminPanel }), _jsx(Case, { when: "user", create: UserPanel }), _jsx(Case, { when: "guest", create: GuestPanel }), _jsx(Default, { create: GuestPanel })] }) }), _jsxs(Row, { width: "100%", align: "center", gap: { left: 4, bottom: 1 }, children: [_jsx(Button, { hotkey: "g", onClick: () => (userRole.value = 'guest'), children: "Guest" }), _jsx(Button, { hotkey: "u", onClick: () => (userRole.value = 'user'), children: "User" }), _jsx(Button, { hotkey: "a", onClick: () => (userRole.value = 'admin'), children: "Admin" })] })] }));
};