feat: add Flag components

src/components/Flag.tsx

@@ -0,0 +1,48 @@
+import cx from 'classnames';
+
+import type { ComponentChild, FunctionalComponent } from 'preact';
+
+import { Link } from '.';
+
+interface Props {
+	class?: string;
+	href?: string;
+	label: string;
+}
+
+interface InnerFlagProps {
+	children: ComponentChild;
+}
+
+const InnerFlag: FunctionalComponent<InnerFlagProps> = ({ children }) => (
+	<>
+		<span class="hidden" aria-hidden="true">
+			[
+		</span>
+		{children}
+		<span class="hidden" aria-hidden="true">
+			]
+		</span>
+	</>
+);
+
+export const Flag: FunctionalComponent<Props> = ({ label, class: className, href, ...props }) => {
+	const classes = cx(
+		'rounded-1 border-1 border-solid border-[darkgrey] bg-[lightgrey] font-mono text-[0.7em] text-black decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] dark:bg-[lightgrey]/80',
+		className
+	);
+
+	return (
+		<>
+			{href ? (
+				<Link class={classes} href={href} title={label} {...props}>
+					<InnerFlag>{label}</InnerFlag>
+				</Link>
+			) : (
+				<span class={classes} title={label} {...props}>
+					<InnerFlag>{label}</InnerFlag>
+				</span>
+			)}
+		</>
+	);
+};

src/components/NetflixFlag.tsx

@@ -0,0 +1,34 @@
+import cx from 'classnames';
+
+import type { FunctionalComponent } from 'preact';
+
+import { Link } from '.';
+
+interface Props {
+	class?: string;
+	id: string;
+}
+
+export const NetflixFlag: FunctionalComponent<Props> = ({ class: className, id, ...props }) => {
+	const classes = cx(
+		'rounded-1 border-1 border-solid border-red-600 bg-red-600 font-mono text-[0.7em] text-white decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em]',
+		className
+	);
+
+	return (
+		<Link
+			class={classes}
+			href={`https://www.netflix.com/title/${id}`}
+			title="Netflix"
+			{...props}
+		>
+			<span class="hidden" aria-hidden="true">
+				[
+			</span>
+			N
+			<span class="hidden" aria-hidden="true">
+				etflix]
+			</span>
+		</Link>
+	);
+};

src/components/PrimeVideoFlag.tsx

@@ -0,0 +1,34 @@
+import cx from 'classnames';
+
+import type { FunctionalComponent } from 'preact';
+
+import { Link } from '.';
+
+interface Props {
+	class?: string;
+	id: string;
+}
+
+export const PrimeVideoFlag: FunctionalComponent<Props> = ({ class: className, id, ...props }) => {
+	const classes = cx(
+		'rounded-1 border-1 border-solid border-sky-500 bg-sky-500 font-mono text-[0.7em] text-white decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em]',
+		className
+	);
+
+	return (
+		<Link
+			class={classes}
+			href={`https://www.amazon.de/gp/video/detail/${id}`}
+			title="Netflix"
+			{...props}
+		>
+			<span class="hidden" aria-hidden="true">
+				[
+			</span>
+			P
+			<span class="hidden" aria-hidden="true">
+				rime Video]
+			</span>
+		</Link>
+	);
+};

src/components/index.ts

@@ -4,12 +4,15 @@ export * from './Banner';
 export * from './Book';
 export * from './ColorSwatch';
 export * from './Divider';
+export * from './Flag';
 export * from './Headline';
 export * from './Image';
 export * from './LegalDate';
 export * from './Link';
 export * from './ListItem';
+export * from './NetflixFlag';
 export * from './OrderedList';
+export * from './PrimeVideoFlag';
 export * from './Subheadline';
 export * from './Subsubheadline';
 export * from './Text';

src/mdx-components.ts

@@ -4,10 +4,13 @@ import {
 	Book,
 	ColorSwatch,
 	Divider,
+	Flag,
 	Headline,
 	Image,
 	ListItem,
+	NetflixFlag,
 	OrderedList,
+	PrimeVideoFlag,
 	Subheadline,
 	Subsubheadline,
 	Text,
@@ -25,6 +28,7 @@ export const mapping = {
 	Banner,
 	ColorSwatch,
 	h1: Title,
+	Flag,
 	h2: Headline,
 	h3: Subheadline,
 	h4: Subsubheadline,
@@ -34,7 +38,9 @@ export const mapping = {
 	img: Image,
 	li: ListItem,
 	ol: OrderedList,
+	NetflixFlag,
 	p: Text,
 	ul: UnorderedList,
+	PrimeVideoFlag,
 	Verse,
 };