From 3309a13d478fa197e5bfb3c603499e24ef3cba1c Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Fri, 15 Dec 2023 13:45:25 +0100
Subject: [PATCH] chore: replace EmailLink with preact component

---
 src/components/EmailLink.astro | 27 ---------------------------
 src/components/EmailLink.tsx   | 30 ++++++++++++++++++++++++++++++
 src/components/index.ts        |  1 +
 src/mdx-components.ts          |  2 +-
 src/pages/cv.astro             |  2 +-
 5 files changed, 33 insertions(+), 29 deletions(-)
 delete mode 100644 src/components/EmailLink.astro
 create mode 100644 src/components/EmailLink.tsx

diff --git a/src/components/EmailLink.astro b/src/components/EmailLink.astro
deleted file mode 100644
index b628698..0000000
--- a/src/components/EmailLink.astro
+++ /dev/null
@@ -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>
diff --git a/src/components/EmailLink.tsx b/src/components/EmailLink.tsx
new file mode 100644
index 0000000..2f582c7
--- /dev/null
+++ b/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>
+);
diff --git a/src/components/index.ts b/src/components/index.ts
index a84d833..2e42484 100644
--- a/src/components/index.ts
+++ b/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';
diff --git a/src/mdx-components.ts b/src/mdx-components.ts
index 431972c..765cf7d 100644
--- a/src/mdx-components.ts
+++ b/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,
diff --git a/src/pages/cv.astro b/src/pages/cv.astro
index e2b1f59..b9aefd4 100644
--- a/src/pages/cv.astro
+++ b/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,