chore: replace DownloadLink with preact component

This commit is contained in:
Stefan Imhoff
2023-12-14 14:37:40 +01:00
parent 6fe4b69e39
commit d358656f12
5 changed files with 24 additions and 25 deletions

View File

@@ -1,23 +0,0 @@
---
import { Sprite } from 'astro-icon';
import { TextLink } from '../components';
export interface Props {
href: string;
text: string;
}
const { href, text, ...props } = Astro.props;
---
<TextLink class="group" href={href} {...props}>
{text}
<span class="more-icon relative inline-flex mis-[0.2em] block-start-[0.2em]">
<Sprite
name="ri:download-line"
aria-hidden="true"
class="h-icon w-icon transition-transform duration-500 ease-in-out group-hover:translate-y-1 group-focus:translate-y-1"
/>
</span>
</TextLink>

View File

@@ -0,0 +1,21 @@
import type { FunctionalComponent, JSX } from 'preact';
import { TextLink } from '.';
import { Download } from './icons';
interface Props extends JSX.HTMLAttributes<HTMLAnchorElement> {
href: string;
text: string;
}
export const DownloadLink: FunctionalComponent<Props> = ({ href, text, ...props }) => (
<TextLink class="group" href={href} {...props}>
{text}
<span class="more-icon relative inline-flex mis-[0.2em] block-start-[0.2em]">
<Download
aria-hidden="true"
class="icon h-icon w-icon transition-transform duration-500 ease-in-out group-hover:translate-y-1 group-focus:translate-y-1"
/>
</span>
</TextLink>
);

View File

@@ -10,6 +10,7 @@ export * from './ColorSwatch';
export * from './DisplayBox';
export * from './Divider';
export * from './DoughnutChart';
export * from './DownloadLink';
export * from './Figure';
export * from './Flag';
export * from './Headline';

View File

@@ -1,6 +1,5 @@
import { YouTube } from '@astro-community/astro-embed-youtube';
import DownloadLink from './components/DownloadLink.astro';
import EmailLink from './components/EmailLink.astro';
import Image from './components/Image.astro';
import MarkdownImage from './components/MarkdownImage.astro';
@@ -19,6 +18,7 @@ import {
ColorSwatch,
DisplayBox,
Divider,
DownloadLink,
Figure,
Flag,
Headline,

View File

@@ -3,10 +3,10 @@ import { animation, animationDelay } from '../data/site';
import GridLayout from '../layouts/GridLayout.astro';
import PageTitle from '../components/PageTitle.astro';
import DownloadLink from '../components/DownloadLink.astro';
import EmailLink from '../components/EmailLink.astro';
import {
Divider,
DownloadLink,
Headline,
ListItem,
Subheadline,