40 lines
1 KiB
Text
40 lines
1 KiB
Text
---
|
|
export interface Props {
|
|
title: string
|
|
subtitle: string
|
|
url: string | null
|
|
}
|
|
|
|
const { title, subtitle, url } = Astro.props
|
|
|
|
const fontSize = 'text-[.9rem]'
|
|
const fontSizeH3 = 'text-[1.4rem]'
|
|
const fontSpacing = 'leading-[1.5rem]'
|
|
|
|
const margin = 'm-[-1rem] p-[1rem]'
|
|
const background = 'bg-[#00000020]'
|
|
---
|
|
|
|
<a
|
|
href={url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class={`block rounded ${
|
|
url &&
|
|
`hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none`
|
|
} ${fontSize} ${margin} ${background}`}
|
|
>
|
|
<div class={`mx-auto max-w-page-w space-y-paragraph`}>
|
|
<span class={`flex flex-col`}>
|
|
<h3 class={`font-bold ${fontSizeH3}`}>{title}</h3>
|
|
{
|
|
subtitle && (
|
|
<span class={`font-thin italic ${fontSpacing}`}>
|
|
{subtitle}
|
|
</span>
|
|
)
|
|
}
|
|
</span>
|
|
<slot />
|
|
</div>
|
|
</a>
|