From 6c8c055de48558e75dfb8338b461b156779ddde5 Mon Sep 17 00:00:00 2001
From: Liam Canetti <git@liamcanetti.co.uk>
Date: Sat, 28 Dec 2024 19:45:57 +0000
Subject: [PATCH] chore(tag-list): only the one component actually

---
 src/components/tag-list/TagList.module.css | 55 ++++++++++++++++++++++
 src/components/tag-list/index.tsx          | 47 ++++++++++++++++--
 src/components/tag/Tag.module.css          | 53 ---------------------
 src/components/tag/index.tsx               | 41 ----------------
 4 files changed, 97 insertions(+), 99 deletions(-)
 delete mode 100644 src/components/tag/Tag.module.css
 delete mode 100644 src/components/tag/index.tsx

diff --git a/src/components/tag-list/TagList.module.css b/src/components/tag-list/TagList.module.css
index 0954ff22..49d492eb 100644
--- a/src/components/tag-list/TagList.module.css
+++ b/src/components/tag-list/TagList.module.css
@@ -2,4 +2,59 @@
   list-style: none;
   display: flex;
   gap: 6px;
+
+  .tag {
+    --tag-color: var(--brand-color);
+
+    &.blue {
+      --tag-color: var(--atom-one-blue)
+    }
+
+    &.green {
+      --tag-color: var(--atom-one-green)
+    }
+
+    &.yellow {
+      --tag-color: var(--atom-one-yellow)
+    }
+
+    &.purple {
+      --tag-color: var(--atom-one-purple)
+    }
+
+    &.red {
+      --tag-color: var(--atom-one-red)
+    }
+
+    &.orange {
+      --tag-color: var(--atom-one-orange)
+    }
+
+    &.teal {
+      --tag-color: var(--atom-one-teal)
+    }
+
+    &.gray {
+      --tag-color: var(--atom-one-gray)
+    }
+
+    &.white {
+      --tag-color: var(--atom-one-white)
+    }
+
+    position: relative;
+    padding: 0 8px 2px;
+    border: 1px solid transparent;
+    border-radius: var(--form-border-radius);
+    box-shadow: var(--form-box-shadow);
+    background-color: color-mix(in srgb, var(--tag-color) 50%, transparent);
+    color: var(--tag-color);
+
+
+    & .text {
+      font-size: 12px;
+      color: var(--white)
+    }
+
+  }
 }
diff --git a/src/components/tag-list/index.tsx b/src/components/tag-list/index.tsx
index af8847d5..4c741d21 100644
--- a/src/components/tag-list/index.tsx
+++ b/src/components/tag-list/index.tsx
@@ -1,5 +1,23 @@
-import Tag, { TagProps } from "../tag";
+import classNames from "classnames";
 import s from "./TagList.module.css";
+import { Span } from "../text";
+
+type TagColor =
+  | "brand"
+  | "blue"
+  | "green"
+  | "yellow"
+  | "purple"
+  | "red"
+  | "orange"
+  | "teal"
+  | "gray"
+  | "white";
+
+interface TagProps {
+  name: string;
+  color?: TagColor;
+}
 
 interface TagListProps {
   tags: TagProps[];
@@ -8,11 +26,30 @@ interface TagListProps {
 export default function TagList({ tags }: TagListProps) {
   return (
     <ul className={s.tagList}>
-      {tags.map((tag, index) => (
-        <li>
-          <Tag key={`${tag.name}_${index}`} name={tag.name} color={tag.color} />
-        </li>
+      {tags.map(({ name, color }, index) => (
+        <Tag key={`${name}_${index}`} name={name} color={color} />
       ))}
     </ul>
   );
 }
+
+function Tag({ name, color }: TagProps) {
+  return (
+    <li
+      className={classNames(s.tag, {
+        [s.brand]: color === "brand",
+        [s.blue]: color === "blue",
+        [s.green]: color === "green",
+        [s.yellow]: color === "yellow",
+        [s.purple]: color === "purple",
+        [s.red]: color === "red",
+        [s.orange]: color === "orange",
+        [s.teal]: color === "teal",
+        [s.gray]: color === "gray",
+        [s.white]: color === "white",
+      })}
+    >
+      <Span className={s.text}>{name}</Span>
+    </li>
+  );
+}
diff --git a/src/components/tag/Tag.module.css b/src/components/tag/Tag.module.css
deleted file mode 100644
index ebbd553f..00000000
--- a/src/components/tag/Tag.module.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.tag {
-  --tag-color: var(--brand-color);
-
-  &.blue {
-    --tag-color: var(--atom-one-blue)
-  }
-
-  &.green {
-    --tag-color: var(--atom-one-green)
-  }
-
-  &.yellow {
-    --tag-color: var(--atom-one-yellow)
-  }
-
-  &.purple {
-    --tag-color: var(--atom-one-purple)
-  }
-
-  &.red {
-    --tag-color: var(--atom-one-red)
-  }
-
-  &.orange {
-    --tag-color: var(--atom-one-orange)
-  }
-
-  &.teal {
-    --tag-color: var(--atom-one-teal)
-  }
-
-  &.gray {
-    --tag-color: var(--atom-one-gray)
-  }
-
-  &.white {
-    --tag-color: var(--atom-one-white)
-  }
-
-  position: relative;
-  padding: 2px 8px;
-  border: 1px solid transparent;
-  border-radius: var(--form-border-radius);
-  box-shadow: var(--form-box-shadow);
-  background-color: color-mix(in srgb, var(--tag-color) 50%, transparent);
-  color: var(--tag-color);
-
-
-  & .text {
-    font-size: 12px;
-    color: var(--white)
-  }
-}
diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx
deleted file mode 100644
index c2001749..00000000
--- a/src/components/tag/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import classNames from "classnames";
-import { Span } from "../text";
-import s from "./Tag.module.css";
-
-type TagColor =
-  | "brand"
-  | "blue"
-  | "green"
-  | "yellow"
-  | "purple"
-  | "red"
-  | "orange"
-  | "teal"
-  | "gray"
-  | "white";
-
-export interface TagProps {
-  name: string;
-  color?: TagColor;
-}
-
-export default function Tag({ name, color = "brand" }: TagProps) {
-  return (
-    <div
-      className={classNames(s.tag, {
-        [s.brand]: color === "brand",
-        [s.blue]: color === "blue",
-        [s.green]: color === "green",
-        [s.yellow]: color === "yellow",
-        [s.purple]: color === "purple",
-        [s.red]: color === "red",
-        [s.orange]: color === "orange",
-        [s.teal]: color === "teal",
-        [s.gray]: color === "gray",
-        [s.white]: color === "white",
-      })}
-    >
-      <Span className={s.text}>{name}</Span>
-    </div>
-  );
-}