chore: replace EmailLink with preact component

src/components/EmailLink.astro

@@ -1,27 +0,0 @@
----
-import { Sprite } from 'astro-icon';
-
-import { TextLink } from '../components';
-
-export interface Props {
-	icon?: boolean;
-	text?: string;
-}
-
-const { text = 'Email', icon = true, ...props } = Astro.props;
----
-
-<TextLink class="group" href="#protected-email" data-email-link {...props}>
-	{text}
-	{
-		icon && (
-			<span class="more-icon relative inline-flex mis-[0.2em] block-start-[0.3em] inline-start-[0.2em]">
-				<Sprite
-					name="ri:mail-send-line"
-					aria-hidden="true"
-					class="h-icon w-icon transition-transform duration-500 ease-in-out group-hover:translate-x-1 group-focus:translate-x-1"
-				/>
-			</span>
-		)
-	}
-</TextLink>

src/components/EmailLink.tsx

@@ -0,0 +1,30 @@
+import type { FunctionalComponent, JSX } from 'preact';
+
+import { TextLink } from '.';
+import { MailSend } from './icons';
+
+interface Props extends Omit<JSX.HTMLAttributes<HTMLAnchorElement>, 'icon'> {
+	text?: string;
+}
+
+interface EmailLinkProps extends Props {
+	icon?: boolean;
+}
+
+export const EmailLink: FunctionalComponent<EmailLinkProps> = ({
+	icon = true,
+	text = 'Email',
+	...props
+}) => (
+	<TextLink class="group" href="#protected-email" data-email-link {...props}>
+		{text}
+		{icon && (
+			<span class="more-icon relative inline-flex mis-[0.2em] block-start-[0.3em] inline-start-[0.2em]">
+				<MailSend
+					aria-hidden="true"
+					class="icon h-icon w-icon transition-transform duration-500 ease-in-out group-hover:translate-x-1 group-focus:translate-x-1"
+				/>
+			</span>
+		)}
+	</TextLink>
+);

src/components/index.ts

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

src/mdx-components.ts

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

src/pages/cv.astro

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