mirror of
https://github.com/kogakure/website-astro-stefanimhoff.de.git
synced 2026-02-03 20:15:27 +00:00
chore: replace DownloadLink with preact component
This commit is contained in:
@@ -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>
|
|
||||||
21
src/components/DownloadLink.tsx
Normal file
21
src/components/DownloadLink.tsx
Normal 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>
|
||||||
|
);
|
||||||
@@ -10,6 +10,7 @@ export * from './ColorSwatch';
|
|||||||
export * from './DisplayBox';
|
export * from './DisplayBox';
|
||||||
export * from './Divider';
|
export * from './Divider';
|
||||||
export * from './DoughnutChart';
|
export * from './DoughnutChart';
|
||||||
|
export * from './DownloadLink';
|
||||||
export * from './Figure';
|
export * from './Figure';
|
||||||
export * from './Flag';
|
export * from './Flag';
|
||||||
export * from './Headline';
|
export * from './Headline';
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import { YouTube } from '@astro-community/astro-embed-youtube';
|
import { YouTube } from '@astro-community/astro-embed-youtube';
|
||||||
|
|
||||||
import DownloadLink from './components/DownloadLink.astro';
|
|
||||||
import EmailLink from './components/EmailLink.astro';
|
import EmailLink from './components/EmailLink.astro';
|
||||||
import Image from './components/Image.astro';
|
import Image from './components/Image.astro';
|
||||||
import MarkdownImage from './components/MarkdownImage.astro';
|
import MarkdownImage from './components/MarkdownImage.astro';
|
||||||
@@ -19,6 +18,7 @@ import {
|
|||||||
ColorSwatch,
|
ColorSwatch,
|
||||||
DisplayBox,
|
DisplayBox,
|
||||||
Divider,
|
Divider,
|
||||||
|
DownloadLink,
|
||||||
Figure,
|
Figure,
|
||||||
Flag,
|
Flag,
|
||||||
Headline,
|
Headline,
|
||||||
|
|||||||
@@ -3,10 +3,10 @@ import { animation, animationDelay } from '../data/site';
|
|||||||
|
|
||||||
import GridLayout from '../layouts/GridLayout.astro';
|
import GridLayout from '../layouts/GridLayout.astro';
|
||||||
import PageTitle from '../components/PageTitle.astro';
|
import PageTitle from '../components/PageTitle.astro';
|
||||||
import DownloadLink from '../components/DownloadLink.astro';
|
|
||||||
import EmailLink from '../components/EmailLink.astro';
|
import EmailLink from '../components/EmailLink.astro';
|
||||||
import {
|
import {
|
||||||
Divider,
|
Divider,
|
||||||
|
DownloadLink,
|
||||||
Headline,
|
Headline,
|
||||||
ListItem,
|
ListItem,
|
||||||
Subheadline,
|
Subheadline,
|
||||||
|
|||||||
Reference in New Issue
Block a user