trailbase/docs/src/components/SplitCard.astro
2025-03-02 21:12:23 +01:00

32 lines
616 B
Text

---
import { Card } from "@astrojs/starlight/components";
import { type StarlightIcon } from "@astrojs/starlight/types";
export interface Props {
title: string;
icon?: StarlightIcon;
reverse?: boolean;
}
const { title, icon, reverse } = Astro.props as Props;
---
<Card title={title} icon={icon}>
<div
class:list={[
"flex",
"flex-col",
reverse ? "md:flex-row-reverse" : "md:flex-row",
"gap-2",
"md:gap-8",
]}
>
<div class="md:w-[46%]">
<slot name="first" />
</div>
<div class="md:w-[54%]">
<slot name="second" />
</div>
</div>
</Card>