Base Grid Usage
import { h } from "preact"
import { Grid, GridCol } from "@/comps/echo/grid"
import { Skeleton } from "@/comps/echo/core"
function makeChild(cls: string) {
return ({ text }: { text: string }) => (
<Skeleton class={`w-full bold ${cls}`} height={50} radius={6} animate={false} >{text}</Skeleton>
)
}
const Child1 = makeChild("bg-blue-200 text-blue-500")
const Child2 = makeChild("bg-green-200 text-green-500")
const Child3 = makeChild("bg-red-200 text-red-500")
const Child4 = makeChild("bg-orange-200 text-orange-500")
export function GridDemo() {
return <Grid class="w-[360px]">
<GridCol span={{ base: 12, xs: 4 }}><Child1 text="1" /></GridCol>
<GridCol span={{ base: 12, xs: 4 }}><Child1 text="2" /></GridCol>
<GridCol span={{ base: 12, xs: 4 }}><Child1 text="3" /></GridCol>
<GridCol span={4}><Child2 text="A" /></GridCol>
<GridCol span={4}><Child2 text="B" /></GridCol>
<GridCol span={4}><Child2 text="C" /></GridCol>
<GridCol span={6}><Child3 text="Left" /></GridCol>
<GridCol span={6}><Child3 text="Right" /></GridCol>
<GridCol span={3}><Child4 text="1" /></GridCol>
<GridCol span={3}><Child4 text="2" /></GridCol>
<GridCol span={3} offset={3}><Child4 text="3" /></GridCol>
</Grid>
}
SimpleGrid Usage
import { h } from "preact"
import { SimpleGrid } from "@/comps/echo/grid"
export function SimpleGridDemo() {
return <div class="w-[360px] flex flex-col p-4">
<SimpleGrid cols={4} spacing={4} class="w-full mb-4">
<div class="bg-red-500 text-white p-4">Item 1</div>
<div class="bg-red-500 text-white p-4">Item 2</div>
<div class="bg-red-500 text-white p-4">Item 3</div>
<div class="bg-red-500 text-white p-4">Item 4</div>
<div class="bg-red-500 text-white p-4">Item 5</div>
<div class="bg-red-500 text-white p-4">Item 6</div>
</SimpleGrid>
<SimpleGrid cols={3} spacing={8} class="w-full">
<div class="bg-purple-500 text-white p-4">Item A</div>
<div class="bg-purple-500 text-white p-4">Item B</div>
<div class="bg-purple-500 text-white p-4">Item C</div>
<div class="bg-purple-500 text-white p-4">Item D</div>
</SimpleGrid>
</div>
}
Stack Usage
import { h } from "preact"
import { Stack } from "@/comps/echo/grid"
export function StackDemo() {
return <div class="w-[360px] flex flex-col gap-4 p-8 bg-gray-200">
<Stack class="mb-4">
<div class="bg-blue-500 text-white p-2">Item 1</div>
<div class="bg-blue-500 text-white p-2">Item 2</div>
<div class="bg-blue-500 text-white p-2">Item 3</div>
</Stack>
<Stack vertical={false} spacing={16}>
<div class="bg-green-500 text-white p-2">Item A</div>
<div class="bg-green-500 text-white p-2">Item B</div>
<div class="bg-green-500 text-white p-2">Item C</div>
</Stack>
</div>
}