From 11ec6c176e70ae6737bbc0c45847c7f82546ae18 Mon Sep 17 00:00:00 2001
From: Haris Shah <harisshah385@gmail.com>
Date: Sat, 23 Mar 2024 21:55:52 +0500
Subject: [PATCH] feat: pill and tag

---
 .../public/assets/icons/icon-remove.svg       |  1 +
 apps/frontend/src/components/Card.tsx         |  4 +--
 apps/frontend/src/components/Pill.tsx         | 27 ++++++++++++++++---
 3 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 apps/frontend/public/assets/icons/icon-remove.svg

diff --git a/apps/frontend/public/assets/icons/icon-remove.svg b/apps/frontend/public/assets/icons/icon-remove.svg
new file mode 100644
index 0000000..80a7bed
--- /dev/null
+++ b/apps/frontend/public/assets/icons/icon-remove.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="#FFF" fill-rule="evenodd" d="M11.314 0l2.121 2.121-4.596 4.596 4.596 4.597-2.121 2.121-4.597-4.596-4.596 4.596L0 11.314l4.596-4.597L0 2.121 2.121 0l4.596 4.596L11.314 0z"/></svg>
\ No newline at end of file
diff --git a/apps/frontend/src/components/Card.tsx b/apps/frontend/src/components/Card.tsx
index 3c949ec..3fb6d15 100644
--- a/apps/frontend/src/components/Card.tsx
+++ b/apps/frontend/src/components/Card.tsx
@@ -44,8 +44,8 @@ export function Card({ job }: { job: Job }) {
         </div>
       </div>
       <hr className="md:hidden" />
-      <div className="text-primary flex flex-wrap items-center gap-4 text-left capitalize">
-        <Pill>{job.role}</Pill>
+      <div className="flex flex-wrap items-center gap-4 ">
+        <Pill tag>{job.role}</Pill>
         <Pill>{job.level}</Pill>
         {job.languages.map((language) => (
           <Pill key={language}>{language}</Pill>
diff --git a/apps/frontend/src/components/Pill.tsx b/apps/frontend/src/components/Pill.tsx
index 74e5f07..afb4ca0 100644
--- a/apps/frontend/src/components/Pill.tsx
+++ b/apps/frontend/src/components/Pill.tsx
@@ -1,7 +1,28 @@
-export function Pill({ children }: { children: React.ReactNode }) {
+export function Pill({
+  children,
+  tag,
+}: {
+  children: React.ReactNode
+  tag?: boolean
+}) {
   return (
-    <div className="bg-tertiary hover:bg-primary hover:text-tertiary rounded  px-2 py-0.5 transition-colors">
-      {children}
+    <div className="flex transition-colors">
+      <div
+        className={`${tag ? 'rounded-s' : 'hover:bg-primary hover:text-tertiary cursor-pointer rounded'} bg-tertiary text-primary px-2 py-0.5  capitalize`}
+      >
+        {children}
+      </div>
+      {tag && (
+        <button className="bg-primary hover:bg-secondary rounded-e px-2">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+            <path
+              fill="#FFF"
+              fill-rule="evenodd"
+              d="M11.314 0l2.121 2.121-4.596 4.596 4.596 4.597-2.121 2.121-4.597-4.596-4.596 4.596L0 11.314l4.596-4.597L0 2.121 2.121 0l4.596 4.596L11.314 0z"
+            />
+          </svg>
+        </button>
+      )}
     </div>
   )
 }