From 665509e7108b26f681a44bef368d9c349f685c8f Mon Sep 17 00:00:00 2001
From: Aarnav Tale <aarnavtale@icloud.com>
Date: Thu, 23 Jan 2025 11:28:42 -0500
Subject: [PATCH] chore: extract tags to shared chip component

---
 app/components/Chip.tsx                    | 21 +++++++++++++++++++++
 app/routes/machines/components/machine.tsx | 12 ++----------
 app/routes/machines/machine.tsx            | 12 ++----------
 3 files changed, 25 insertions(+), 20 deletions(-)
 create mode 100644 app/components/Chip.tsx

diff --git a/app/components/Chip.tsx b/app/components/Chip.tsx
new file mode 100644
index 0000000..e9af785
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/app/routes/machines/components/machine.tsx b/app/routes/machines/components/machine.tsx
index 9cea72a..c9bf209 100644
--- a/app/routes/machines/components/machine.tsx
+++ b/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
-								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>
+							<Chip key={tag} text={tag} />
 						))}
 					</div>
 				</Link>
diff --git a/app/routes/machines/machine.tsx b/app/routes/machines/machine.tsx
index 6f52186..96d6c06 100644
--- a/app/routes/machines/machine.tsx
+++ b/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
-								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>
+							<Chip key={tag} text={tag} />
 						))}
 					</div>
 				</div>