Refactor: Pill

.env.example

@@ -1,4 +1,5 @@
 NODE_ENV=development
 PORT=5000
 MONGO_URI=YOUR_MONGO_URI
-JWT_SECRET=YOUR_JWT_SECRET
+JWT_SECRET=YOUR_JWT_SECRET
+NEXT_PUBLIC_IMGBB_API_KEY=YOUR_IMGBB_API_KEY

apps/frontend/src/app/post-job/page.tsx

@@ -3,7 +3,7 @@
 import { Button } from '@/components/Button'
 import { Job } from '@/types'
 import { useState } from 'react'
-import { languages, tools } from '../../constants'
+import { languages, tools } from '@/constants'
 
 export default function PostJob() {
   const [logoUrl, setLogoUrl] = useState<string | null>(null)
@@ -13,7 +13,7 @@ export default function PostJob() {
       const formData = new FormData()
       formData.append('image', file)
       fetch(
-        'https://api.imgbb.com/1/upload?key=6f8623c19cbd73ef6785b7ba44f0bda4',
+        `https://api.imgbb.com/1/upload?key=${process.env.NEXT_PUBLIC_IMGBB_API_KEY}`,
         {
           method: 'POST',
           body: formData,

apps/frontend/src/components/Pill.tsx

@@ -1,3 +1,5 @@
+import { CrossIcon } from './icons'
+
 export function Pill({
   children,
   tag,
@@ -14,13 +16,7 @@ export function Pill({
       </div>
       {tag && (
         <button className="bg-primary hover:bg-secondary rounded-e px-2 transition-colors">
-          <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>
+          <CrossIcon />
         </button>
       )}
     </div>

apps/frontend/src/components/icons/CrossIcon.tsx

@@ -0,0 +1,11 @@
+export function CrossIcon({ fillColor = '#FFF' }: { fillColor?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+      <path
+        fill={fillColor}
+        fillRule="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>
+  )
+}

apps/frontend/src/components/icons/index.ts

@@ -0,0 +1 @@
+export { CrossIcon } from './CrossIcon'