Surfaces

const cardImage = "/images/cover.jpg";

<Card style={{ "max-width": "22rem" }}>
    <CardImage>
        <img src={cardImage} alt="Project cover" width="640" height="280" />
    </CardImage>
    <CardContent>
        <strong>marketing-site</strong>
        <Text muted>Deployed 4 minutes ago from main.</Text>
    </CardContent>
    <CardFooter>
        <CardFooterItem onClick={() => {}}>Visit</CardFooterItem>
        <CardFooterItem onClick={() => {}}>Logs</CardFooterItem>
    </CardFooter>
</Card>

<Card>
    <CardHeader>
        <CardHeaderTitle>Billing</CardHeaderTitle>
    </CardHeader>
    <CardContent>Pro plan · renews Oct 1</CardContent>
</Card>

<Card>
    <CardHeader>
        <CardHeaderTitle>Billing</CardHeaderTitle>
    </CardHeader>
</Card>

const cardImage = "/images/cover.jpg";

<Card style={{ "max-width": "22rem" }}>
    <CardImage>
        <img src={cardImage} alt="Project cover" width="640" height="280" />
    </CardImage>
</Card>

<Card>
    <CardContent>Card content is padded and flows like body text.</CardContent>
</Card>

<Card>
    <CardContent>Delete this project?</CardContent>
    <CardFooter>
        <CardFooterItem onClick={() => {}}>Cancel</CardFooterItem>
        <CardFooterItem onClick={() => {}}>Delete</CardFooterItem>
    </CardFooter>
</Card>

<Card>
    <CardFooter>
        <CardFooterItem onClick={() => {}}>
            Save
        </CardFooterItem>
        <CardFooterItem onClick={() => {}}>Cancel</CardFooterItem>
    </CardFooter>
</Card>

<Box>Boxes group related content on a raised surface.</Box>

function Example() {
    const repos = [
        { name: "arachne", visibility: "public" },
        { name: "marketing-site", visibility: "private" },
        { name: "design-tokens", visibility: "public" },
    ];
    const tab = signal("all");
    const active = signal("arachne");
    const shown = () => repos.filter((r) => tab() === "all" || r.visibility === tab());
    return (
        <Panel label="Repositories" style={{ "max-width": "22rem" }}>
            <PanelHeading>Repositories</PanelHeading>
            <PanelTabs>
                <For each={["all", "public", "private"]}>
                    {(id) => (
                        <PanelTab active={tab() === id} onClick={() => tab.set(id)}>
                            {id[0]?.toUpperCase() + id.slice(1)}
                        </PanelTab>
                    )}
                </For>
            </PanelTabs>
            <For each={shown()}>
                {(repo) => (
                    <PanelBlock active={active() === repo.name} onClick={() => active.set(repo.name)}>
                        {repo.name}
                    </PanelBlock>
                )}
            </For>
        </Panel>
    );
}

<Panel label="Projects">
    <PanelHeading>Repositories</PanelHeading>
    <PanelBlock>arachne</PanelBlock>
</Panel>

function Example() {
    const tab = signal("all");
    return (
        <Panel label="Filter tabs">
            <PanelTabs>
                <PanelTab active={tab() === "all"} onClick={() => tab.set("all")}>
                    All
                </PanelTab>
                <PanelTab active={tab() === "forks"} onClick={() => tab.set("forks")}>
                    Forks
                </PanelTab>
            </PanelTabs>
        </Panel>
    );
}

function Example() {
    const tab = signal("all");
    return (
        <Panel label="Sources">
            <PanelTabs>
                <PanelTab active={tab() === "all"} onClick={() => tab.set("all")}>
                    All
                </PanelTab>
                <PanelTab active={tab() === "forks"} onClick={() => tab.set("forks")}>
                    Forks
                </PanelTab>
            </PanelTabs>
        </Panel>
    );
}

function Example() {
    const active = signal("marketing-site");
    return (
        <Panel label="Recent projects">
            <PanelBlock
                active={active() === "marketing-site"}
                onClick={() => active.set("marketing-site")}
            >
                marketing-site
            </PanelBlock>
            <PanelBlock active={active() === "docs"} onClick={() => active.set("docs")}>
                docs
            </PanelBlock>
        </Panel>
    );
}

<Paper padding="lg" shadow withBorder>
    Paper is the plainest surface: padding, radius, optional border and shadow.
</Paper>

<Tile ancestor>
    <Tile parent size={8}>
        <Tile child>
            <Box>Wide tile</Box>
        </Tile>
    </Tile>
    <Tile parent>
        <Tile child>
            <Box>Narrow</Box>
        </Tile>
    </Tile>
</Tile>

<div>
    <Block>A block adds the standard bottom margin between siblings.</Block>
    <Block>Like this second one.</Block>
</div>

<Inset>
    <Text muted>Recessed area for secondary content, like a settings preview.</Text>
</Inset>