lerobot/robot-learning-tutorial

1---2interface Props {3    /** Layout mode: number of columns or 'auto' for responsive */4    layout?: "2-column" | "3-column" | "4-column" | "auto";5    /** Gap between items - can be a predefined size or custom value (e.g., "2rem", "20px", "1.5em") */6    gap?: "small" | "medium" | "large" | string;7    /** Optional class to apply on the wrapper */8    class?: string;9    /** Optional ID for the stack */10    id?: string;11}12 13const {14    layout = "2-column",15    gap = "medium",16    class: className,17    id,18} = Astro.props as Props;19 20// Generate flex properties based on layout21const getFlexProperties = () => {22    switch (layout) {23        case "2-column":24            return { flexBasis: "50%", maxWidth: "50%" };25        case "3-column":26            return { flexBasis: "33.333%", maxWidth: "33.333%" };27        case "4-column":28            return { flexBasis: "25%", maxWidth: "25%" };29        case "auto":30            return { flexBasis: "auto", maxWidth: "none" };31        default:32            // By default, all children on one line with equal width33            return { flexBasis: "auto", maxWidth: "none" };34    }35};36 37const getGapSize = () => {38    // If it's a predefined size, return the corresponding value39    switch (gap) {40        case "small":41            return "0.5rem";42        case "medium":43            return "1rem";44        case "large":45            return "1.5rem";46        default:47            // If it's a custom value, return it as-is (e.g., "2rem", "20px", "1.5em")48            return gap;49    }50};51 52const flexProps = getFlexProperties();53const gapSize = getGapSize();54---55 56<div57    class={`stack ${className || ""}`}58    data-layout={layout}59    data-gap={gap}60    {id}61    style={`gap: ${gapSize}`}62>63    <slot />64</div>65 66<style>67    .stack {68        display: grid;69        gap: 1rem;70        margin: var(--block-spacing-y) 0;71        width: 100%;72        max-width: 100%;73        box-sizing: border-box;74    }75 76    /* Layout configurations */77    .stack[data-layout="2-column"] {78        grid-template-columns: repeat(2, 1fr);79    }80 81    .stack[data-layout="3-column"] {82        grid-template-columns: repeat(3, 1fr);83    }84 85    .stack[data-layout="4-column"] {86        grid-template-columns: repeat(4, 1fr);87    }88 89    .stack[data-layout="auto"] {90        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));91    }92 93    /* Default layout (2-column) */94    .stack:not([data-layout]) {95        grid-template-columns: repeat(2, 1fr);96    }97 98    /* Ensure child elements don't overflow */99    .stack :global(> *) {100        min-width: 0 !important;101        max-width: 100% !important;102        box-sizing: border-box !important;103        word-wrap: break-word !important;104        overflow-wrap: break-word !important;105        overflow: hidden !important;106    }107 108    /* Handle code blocks inside stack */109    .stack pre {110        overflow-x: auto;111        max-width: 100%;112        width: 100%;113        word-wrap: break-word;114        white-space: pre-wrap;115        box-sizing: border-box;116        min-width: 0 !important;117    }118 119    .stack code {120        word-wrap: break-word;121        white-space: pre-wrap;122        max-width: 100%;123        box-sizing: border-box;124        min-width: 0 !important;125    }126 127    /* Override the min-width: 100% from _code.css */128    .stack pre code {129        min-width: 0 !important;130    }131 132    /* Override section.content-grid pre code min-width rule */133    .stack section.content-grid pre code {134        min-width: 0 !important;135    }136 137    /* Responsive behavior */138    @media (max-width: 768px) {139        .stack[data-layout="3-column"],140        .stack[data-layout="4-column"],141        .stack[data-layout="2-column"],142        .stack[data-layout="auto"],143        .stack:not([data-layout]) {144            grid-template-columns: 1fr !important;145        }146    }147 148    @media (min-width: 769px) and (max-width: 1100px) {149        .stack[data-layout="3-column"],150        .stack[data-layout="4-column"],151        .stack[data-layout="auto"] {152            grid-template-columns: repeat(2, 1fr) !important;153        }154    }155 156    @media (min-width: 1101px) and (max-width: 1400px) {157        .stack[data-layout="4-column"] {158            grid-template-columns: repeat(2, 1fr) !important;159        }160    }161</style>162