chore(tag-list): only the one component actually

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)
+    }
+
+  }
 }

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>
+  );
+}