chore: replace Backlink with preact component

src/components/Backlink.astro

@@ -1,29 +0,0 @@
----
-import { Sprite } from 'astro-icon';
-
-import { Link } from '../components';
-
-export interface Props {
-	backLink?: string;
-}
-
-const { backLink } = Astro.props;
----
-
-{
-	backLink && (
-		<Link
-			class="col-span-2 col-start-1 h-clickarea w-clickarea items-center justify-center self-center justify-self-center transition-transform duration-500 ease-in-out hover:-translate-x-1 focus:-translate-x-1 print:hidden md:col-span-1"
-			href={backLink}
-		>
-			<button
-				aria-label="Back to overview"
-				class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center border-none text-[0]"
-				type="button"
-				tabindex={-1}
-			>
-				<Sprite name="ri:arrow-left-line" class="h-icon w-icon" />
-			</button>
-		</Link>
-	)
-}

src/components/Backlink.tsx

@@ -0,0 +1,35 @@
+import cx from 'classnames';
+
+import type { FunctionalComponent, JSX } from 'preact';
+
+import { Link } from '.';
+import { ArrowLeft } from './icons';
+
+interface Props extends JSX.HTMLAttributes<HTMLAnchorElement> {
+	class?: string;
+	backLink?: string;
+}
+
+export const Backlink: FunctionalComponent<Props> = ({ backLink, class: className, ...props }) => {
+	const classes = cx(
+		'col-span-2 col-start-1 h-clickarea w-clickarea items-center justify-center self-center justify-self-center transition-transform duration-500 ease-in-out hover:-translate-x-1 focus:-translate-x-1 print:hidden md:col-span-1',
+		className
+	);
+
+	return (
+		<>
+			{backLink && (
+				<Link class={classes} href={backLink} {...props}>
+					<button
+						aria-label="Back to overview"
+						class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center border-none text-[0]"
+						type="button"
+						tabIndex={-1}
+					>
+						<ArrowLeft class="icon h-icon w-icon" />
+					</button>
+				</Link>
+			)}
+		</>
+	);
+};

src/components/PageHeader.astro

@@ -1,7 +1,7 @@
 ---
 import cx from 'classnames';
 
-import Backlink from '../components/Backlink.astro';
+import { Backlink } from '../components';
 import MainNavigation from '../components/MainNavigation.astro';
 import ThemeToggle from '../components/ThemeToggle.astro';
 

src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './AffiliateLink';
 export * from './AmazonBook';
+export * from './Backlink';
 export * from './Banner';
 export * from './Blockquote';
 export * from './Book';

src/styles/global.css

@@ -168,6 +168,10 @@
 		@apply border-0 bg-transparent shadow-none;
 	}
 
+	.icon {
+		@apply fill-shibui-950 dark:fill-shibui-200/[0.87];
+	}
+
 	/** Swup */
 	main[tabindex='-1'] {
 		outline: none;