feat: pill and tag

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>

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