add pin icon for pinned joblistings

Author: ch0rizo

lego-webapp/components/JoblistingItem/JoblistingItem.module.css

@@ -49,14 +49,27 @@ img.companyLogo {
   margin-bottom: var(--spacing-sm);
 }
 
-.deadline {
+.infoLeft {
   display: flex;
-  align-items: center;
-  justify-content: flex-end;
+  flex-direction: column;
+  justify-content: space-between;
   min-width: 145px;
   font-size: var(--font-size-sm);
 
   @media (--mobile-device) {
     justify-content: flex-start;
   }
 }
+
+.deadline {
+  display: flex;
+  align-items: center;
+  align-self: flex-end;
+  justify-content: flex-end;
+  gap: var(--spacing-sm);
+}
+
+.pin {
+  align-self: flex-end;
+  transform: rotate(45deg);
+}

lego-webapp/components/JoblistingItem/index.tsx

@@ -1,5 +1,5 @@
 import { Flex, Icon, Image } from '@webkom/lego-bricks';
-import { CalendarClock } from 'lucide-react';
+import { CalendarClock, Pin } from 'lucide-react';
 import moment from 'moment';
 import {
   jobType,
@@ -64,20 +64,21 @@ const JoblistingItem = ({ joblisting }: JobListingItemProps) => (
           )}
         </Flex>
       </Flex>
-      <Flex
-        alignItems="center"
-        gap="var(--spacing-sm)"
-        className={styles.deadline}
-      >
-        <Icon iconNode={<CalendarClock />} size={16} />
-        {joblisting.rollingRecruitment ? (
-          'Snarest'
-        ) : (
-          <Time
-            time={joblisting.deadline}
-            format={`ll ${moment(joblisting.deadline).format('HH:mm') !== '23:59' ? 'HH:mm' : ''}`}
-          />
-        )}
+      <Flex className={styles.infoLeft}>
+        <div className={styles.pin}>
+          {joblisting.isPinned && <Icon iconNode={<Pin />} size={16} />}
+        </div>
+        <div className={styles.deadline}>
+          <Icon iconNode={<CalendarClock />} size={16} />
+          {joblisting.rollingRecruitment ? (
+            'Snarest'
+          ) : (
+            <Time
+              time={joblisting.deadline}
+              format={`ll ${moment(joblisting.deadline).format('HH:mm') !== '23:59' ? 'HH:mm' : ''}`}
+            />
+          )}
+        </div>
       </Flex>
     </div>
   </a>