💄 Add violet background to Tag component

varianter · Dec 2, 2024 · 7025e19 · 7025e19
1 parent f40e6b7
commit 7025e19
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git a/src/components/sections/jobs/JobPostingList.tsx b/src/components/sections/jobs/JobPostingList.tsx
@@ -57,7 +57,8 @@ export default function JobPostingList({
           active={!locationFilter}
           type="button"
           onClick={() => setLocationFilter(null)}
-          text={"Alle"}
+          text="Alle"
+          background="violet"
         />
         {companyLocations.map((location: CompanyLocation) => (
           <Tag
@@ -66,6 +67,7 @@ export default function JobPostingList({
             onClick={() => setLocationFilter(location)}
             text={location.companyLocationName}
             key={location._id}
+            background="violet"
           />
         ))}
       </div>

diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx
@@ -14,9 +14,22 @@ type TagInner =
       href: string;
     } & JSX.IntrinsicElements["link"]);
 
+function getBackgroundClass(backgroundColor: string) {
+  switch (backgroundColor) {
+    case "light":
+      return "";
+    case "dark":
+      return styles["tag--bgDark"];
+    case "violet":
+      return styles["tag--bgViolet"];
+    default:
+      return "";
+  }
+}
+
 type TagProps = {
   active?: boolean;
-  background?: "light" | "dark";
+  background?: "light" | "dark" | "violet";
   text: string;
 } & TagInner;
 
@@ -27,8 +40,8 @@ export const Tag = ({
   ...props
 }: TagProps) => {
   const activeClass = active ? styles["tag--active"] : "";
-  const bgDarkClass = background === "dark" ? styles["tag--bgDark"] : "";
-  const className = `${styles.tag} ${activeClass} ${bgDarkClass}`;
+  const bgClass = getBackgroundClass(background);
+  const className = `${styles.tag} ${activeClass} ${bgClass}`;
   if (props.type === "button") {
     return (
       <button className={className} onClick={props.onClick}>

diff --git a/src/components/tag/tag.module.css b/src/components/tag/tag.module.css
@@ -38,6 +38,19 @@
   --_tag-background: transparent;
 }
 
+.tag--bgViolet {
+  --_tag-borderColor: var(--text-primary-light);
+  --_tag-color: var(--text-primary-light);
+}
+.tag--bgViolet:active {
+  --_tag-background: var(--text-primary-light);
+  --_tag-color: var(--text-primary);
+}
+.tag--bgViolet:hover {
+  --_tag-color: var(--text-primary-light);
+  --_tag-background: transparent;
+}
+
 .tag--active {
   --_tag-background: var(--background-bg-dark);
   --_tag-color: var(--text-primary-light);
@@ -49,3 +62,7 @@
   --_tag-background: var(--background-bg-light-primary);
   --_tag-color: var(--text-primary);
 }
+.tag--active.tag--bgViolet {
+  --_tag-background: var(--text-primary-light);
+  --_tag-color: var(--text-primary);
+}