46 lines
1 KiB
Text
46 lines
1 KiB
Text
---
|
|
import Paragraph from "@/components/Paragraph.astro";
|
|
import Link from "@/components/Link.astro";
|
|
import { Image } from "astro:assets";
|
|
|
|
type Props = {
|
|
name: string;
|
|
links: { text: string; url: string }[];
|
|
image: { src: ImageMetadata; alt: string };
|
|
reverse?: boolean;
|
|
};
|
|
|
|
const props: Props = Astro.props;
|
|
---
|
|
|
|
<div
|
|
class={"flex justify-around items-center" +
|
|
(props.reverse
|
|
? " md:flex-row-reverse flex-col-reverse"
|
|
: " md:flex-row flex-col")}
|
|
>
|
|
<div class="basis-1/3 my-7">
|
|
<Image
|
|
src={props.image.src}
|
|
alt={props.image.alt}
|
|
class="rounded-lg max-h-96 md:max-h-none"
|
|
/>
|
|
</div>
|
|
<div class="basis-1/2 my-7">
|
|
<div>
|
|
<h2 class="font-display text-xl md:text-2xl font-bold tracking-tighter">
|
|
{props.name}
|
|
</h2>
|
|
<Paragraph>
|
|
<slot />
|
|
</Paragraph>
|
|
{
|
|
props.links.map(({ text, url }) => (
|
|
<Link href={url} target="about:blank">
|
|
{text}
|
|
</Link>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|