feat: add Divider component

src/components/Divider.tsx

@@ -0,0 +1,16 @@
+import cx from 'classnames';
+
+import type { FunctionalComponent } from 'preact';
+
+interface Props {
+	class?: string;
+}
+
+export const Divider: FunctionalComponent<Props> = ({ class: className, ...props }) => {
+	const classes = cx(
+		'border-solid border-black/[0.1] mbe-14 mbs-14 border-bs-0 border-be-1 border-is-0 border-ie-0 dark:border-white/[0.1]',
+		className
+	);
+
+	return <hr class={classes} {...props} />;
+};

src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './Divider';
 export * from './Headline';
 export * from './LegalDate';
 export * from './Link';

src/mdx-components.ts

@@ -1,4 +1,5 @@
 import {
+	Divider,
 	Headline,
 	ListItem,
 	OrderedList,
@@ -18,6 +19,7 @@ export const mapping = {
 	h4: Subsubheadline,
 	h5: Subsubheadline,
 	h6: Subsubheadline,
+	hr: Divider,
 	li: ListItem,
 	ol: OrderedList,
 	p: Text,

src/pages/about.mdx

@@ -14,6 +14,8 @@ As a passionate enthusiast of storytelling, I am convinced that humans understan
 
 In my spare time, I enjoy exploring nature through activities such as [walking and cycling](https://hamburg.stefanimhoff.de/), and doing [Calisthenics](/calisthenics/). I have a keen appreciation for the beauty of everyday life and find joy in the small things. Whether it’s the peacefulness of a forest, the vastness of the sea, or the grandeur of a mountain, I am constantly inspired by nature’s magnificence. I enjoy both the power of thunderstorms and the warmth of sunny days.
 
+---
+
 I see myself as a 🔲 [Minimalist](/minimalism/), 🏛️ Stoic, 🎧 Introvert, and ⛩️ Japanophile.
 
 🔲 Minimalism allows me to simplify my life and focus on what truly matters. By owning only what I need and cherish, I am able to reduce clutter, increase my sense of contentment, and live with intention.