Issue 58 create work timeline item (#64)

Co-authored-by: Bury <agnieszka.bury@capgemini.com>

src/components/organisms/work-timeline-item.astro

@@ -0,0 +1,52 @@
+---
+import IconButton from '@/atoms/icon-button.astro';
+import Tag from '@/atoms/tag.astro';
+import Timestamp from '@/atoms/timestamp.astro';
+import Typography from '@/atoms/typography.astro';
+import type { Job } from '@/types/experience-section';
+import type { I18n } from '@/types/i18n';
+
+export interface Props extends astroHTML.JSX.HTMLAttributes {
+  job: Job;
+  i18n: I18n;
+}
+const { job, i18n, ...props } = Astro.props;
+const WorkTimelineItem = 'div';
+---
+
+<WorkTimelineItem class:list={['flex', 'flex-col', 'gap-2', 'md:gap-0', props.class]}>
+  <Typography variant="item-title">{job.role} <span class="font-medium"> &#8212;&nbsp;{job.company}</span></Typography>
+  <div class:list={['fixed', 'top-3', 'right-3', 'md:flex', 'sm:flex-wrap', 'gap-3', '[&>a]:my-2']}>
+    {job.socials?.map(({ icon, url }) => <IconButton icon={icon} href={url} target="_blank" size="small" />)}
+  </div>
+  <Timestamp
+    startDate={job.startDate}
+    endDate={job.endDate}
+    locale={i18n.locale}
+    translationForNow={i18n.translations.now}
+  />
+  <ul class:list={['my-3']}>
+    {
+      Array.isArray(job.description) ? (
+        job.description.map((d) => (
+          <li>
+            <Typography variant="paragraph">&#x2022; {d}</Typography>
+          </li>
+        ))
+      ) : (
+        <li>
+          <Typography variant="paragraph">&#x2022; {job.description}</Typography>
+        </li>
+      )
+    }
+  </ul>
+  <div class:list={['flex', 'gap-3', 'flex-wrap', 'sm:flex-nowrap', 'mt-3']}>
+    {
+      job.tags.map((t) => (
+        <Tag name={t.icon} color={t.iconColor}>
+          {t.name}
+        </Tag>
+      ))
+    }
+  </div>
+</WorkTimelineItem>

src/pages/playground/work-timeline.astro

@@ -0,0 +1,67 @@
+---
+import WorkTimelineItem from '@/organisms/work-timeline-item.astro';
+import type { Job } from '@/types/experience-section';
+import type { I18n } from '@/types/i18n';
+
+const job: Job = {
+  role: 'Senior front-end developer',
+  company: 'Google',
+  startDate: new Date('2020-02'),
+  endDate: null,
+  description: [
+    'In tristique vulputate augue vel egestas.',
+    'Quisque ac imperdiet tortor, at lacinia ex.',
+    'Duis vel ex hendrerit, commodo odio sed, aliquam enim.',
+    'Ut arcu nulla, tincidunt eget arcu eget, molestie vulputate nisi.',
+    'Nunc malesuada leo et est iaculis facilisis.',
+    'Fusce eu urna ut magna malesuada fringilla.',
+  ],
+  tags: [
+    {
+      icon: 'simple-icons:react',
+      iconColor: '#61DAFB',
+      name: 'React.js',
+      url: 'https://reactjs.org/',
+    },
+    {
+      icon: 'simple-icons:nextdotjs',
+      iconColor: '#000000',
+      name: 'Next.js',
+      url: 'https://nextjs.org/',
+    },
+    {
+      icon: 'simple-icons:typescript',
+      iconColor: '#3178C6',
+      name: 'TypeScript',
+      url: 'https://www.typescriptlang.org/',
+    },
+    {
+      icon: 'simple-icons:nx',
+      iconColor: '#143055',
+      name: 'Nx',
+      url: 'https://nx.dev/',
+    },
+    {
+      icon: 'simple-icons:firebase',
+      iconColor: '#FFCA28',
+      name: 'Firebase',
+      url: 'https://firebase.google.com/',
+    },
+  ],
+  socials: [
+    { name: 'Facebook', icon: 'fa6-brands:facebook-f', url: '#' },
+    { name: 'LinkedIn', icon: 'fa6-brands:linkedin-in', url: '#' },
+  ],
+};
+
+const i18nData: I18n = {
+  locale: 'en-US',
+  translations: {
+    now: 'now',
+  },
+};
+---
+
+<div class="p-5">
+  <WorkTimelineItem job={job} i18n={i18nData} />
+</div>

src/types/experience-section.ts

@@ -1,6 +1,6 @@
 import type { SectionConfig, Social, Tag } from './common';
 
-interface Job {
+export interface Job {
   role: string;
   company: string;
   startDate: Date;