chore: extract tags to shared chip component

app/components/Chip.tsx

@@ -0,0 +1,21 @@
+import { cn } from '~/utils/cn';
+
+export interface ChipProps {
+	text: string;
+	className?: string;
+}
+
+export default function Chip({ text, className }: ChipProps) {
+	return (
+		<span
+			className={cn(
+				'text-xs px-2 py-0.5 rounded-full',
+				'text-headplane-700 dark:text-headplane-100',
+				'bg-headplane-100 dark:bg-headplane-700',
+				className,
+			)}
+		>
+			{text}
+		</span>
+	);
+}

app/routes/machines/components/machine.tsx

@@ -1,6 +1,7 @@
 import { ChevronDownIcon, CopyIcon } from '@primer/octicons-react';
 import { useMemo } from 'react';
 import { Link } from 'react-router';
+import Chip from '~/components/Chip';
 import Menu from '~/components/Menu';
 import StatusCircle from '~/components/StatusCircle';
 import { toast } from '~/components/Toaster';
@@ -99,16 +100,7 @@ export default function MachineRow({
 					</p>
 					<div className="flex gap-1 mt-1">
 						{tags.map((tag) => (
-							<span
+							<Chip key={tag} text={tag} />
-								key={tag}
-								className={cn(
-									'text-xs rounded-md px-1.5 py-0.5',
-									'bg-ui-200 dark:bg-ui-800',
-									'text-ui-600 dark:text-ui-300',
-								)}
-							>
-								{tag}
-							</span>
 						))}
 					</div>
 				</Link>

app/routes/machines/machine.tsx

@@ -12,6 +12,7 @@ import { Link as RemixLink, useLoaderData } from 'react-router';
 import Attribute from '~/components/Attribute';
 import Button from '~/components/Button';
 import Card from '~/components/Card';
+import Chip from '~/components/Chip';
 import Link from '~/components/Link';
 import Menu from '~/components/Menu';
 import StatusCircle from '~/components/StatusCircle';
@@ -186,16 +187,7 @@ export default function Page() {
 					<p className="text-sm text-ui-600 dark:text-ui-300">Status</p>
 					<div className="flex gap-1 mt-1 mb-8">
 						{tags.map((tag) => (
-							<span
+							<Chip key={tag} text={tag} />
-								key={tag}
-								className={cn(
-									'text-xs rounded-md px-1.5 py-0.5',
-									'bg-ui-200 dark:bg-ui-800',
-									'text-ui-600 dark:text-ui-300',
-								)}
-							>
-								{tag}
-							</span>
 						))}
 					</div>
 				</div>