75 lines
1.6 KiB
Plaintext
75 lines
1.6 KiB
Plaintext
---
|
|
import { getI18n } from "src/i18n/i18n";
|
|
import type { EndpointSource } from "src/shared/payload/payload-sdk";
|
|
|
|
interface Props {
|
|
source: EndpointSource;
|
|
}
|
|
|
|
const { source } = Astro.props;
|
|
const { formatEndpointSource } = await getI18n(Astro.locals.currentLocale);
|
|
|
|
const {
|
|
href,
|
|
typeLabel,
|
|
label,
|
|
target = undefined,
|
|
rel = undefined,
|
|
lang,
|
|
} = formatEndpointSource(source);
|
|
---
|
|
|
|
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
|
|
|
<a href={href} target={target} rel={rel}>
|
|
<div class="font-xs">{typeLabel}</div><p lang={lang}>{label}</p>
|
|
</a>
|
|
|
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
|
|
|
<style>
|
|
a {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
place-items: center;
|
|
gap: 0.1em 0.3em;
|
|
|
|
& > p {
|
|
text-decoration: underline dotted 0.1em;
|
|
text-decoration-color: transparent;
|
|
|
|
transition-duration: 150ms;
|
|
transition-property: text-decoration-color, color;
|
|
|
|
line-height: 1.2;
|
|
}
|
|
|
|
border-radius: 16px;
|
|
padding: 4px 10px;
|
|
margin: -4px -10px;
|
|
|
|
&:hover > p,
|
|
&:focus-visible > p {
|
|
color: var(--color-base-750);
|
|
text-decoration-color: var(--color-base-650);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline-width: 1.5 px;
|
|
}
|
|
|
|
&:active > p {
|
|
color: var(--color-base-650);
|
|
text-decoration-color: var(--color-base-550);
|
|
}
|
|
|
|
& > div {
|
|
background-color: var(--color-base-300);
|
|
border-radius: 9999px;
|
|
padding: 0.3em 0.6em;
|
|
flex-shrink: 0;
|
|
margin-left: -0.5em;
|
|
}
|
|
}
|
|
</style>
|