feat: implement JobList draft

hooks/useFetchJobs.ts

@@ -32,6 +32,7 @@ function useFetchJobs() {
 
   const fetchJobs = async (selectedBoards: string[], titleFilter?: string) => {
     setIsLoading(true)
+
     try {
       const resultsPerBoard: { [key: string]: Job[] } = {}
 

public/icons/arrow-up-right.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 11L11 3M11 3H3M11 3V11" stroke="black"/>
+</svg>

src/components/Box/Box.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled'
+
+interface Props {
+  children: React.ReactNode
+}
+
+export const Box = ({ children, ...props }: Props) => {
+  return <Container {...props}>{children}</Container>
+}
+
+const Container = styled.section`
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px;
+  height: 100%;
+`
+
+export default Box

src/components/Box/index.ts

@@ -0,0 +1 @@
+export { default as Box } from './Box'

src/components/Icons/ArrowUpRight.tsx

@@ -0,0 +1,15 @@
+function ArrowUpRight() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      fill="none"
+      viewBox="0 0 14 14"
+    >
+      <path stroke="#000" d="M3 11l8-8m0 0H3m8 0v8"></path>
+    </svg>
+  )
+}
+
+export default ArrowUpRight

src/components/JobList/JobItem.tsx

@@ -0,0 +1,84 @@
+import styled from '@emotion/styled'
+import ArrowUpRight from '../Icons/ArrowUpRight'
+
+const JobItem = ({ job }: any) => {
+  return (
+    <JobContainer>
+      <JobHeader>
+        <JobTitle
+          href={job.absolute_url}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {job.title}
+        </JobTitle>
+        <JobInfo>{job.location.name}</JobInfo>
+      </JobHeader>
+      <ApplyButton>
+        Apply{' '}
+        <IconContainer>
+          <ArrowUpRight />
+        </IconContainer>
+      </ApplyButton>
+    </JobContainer>
+  )
+}
+
+const JobContainer = styled.div`
+  padding: 24px 0;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
+
+  &:last-child {
+    border-bottom: none;
+  }
+`
+
+const JobHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 32px;
+`
+
+const JobTitle = styled.a`
+  font-size: 36px;
+  color: black;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
+const JobInfo = styled.p`
+  overflow: hidden;
+  color: rgba(0, 0, 0, 0.54);
+  text-overflow: ellipsis;
+  font-size: 18px;
+  font-weight: 400;
+`
+
+const IconContainer = styled.span`
+  position: absolute;
+  top: 7px;
+  right: 8px;
+`
+
+const ApplyButton = styled.button`
+  width: 105px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+
+  background-color: white;
+  position: relative;
+  color: black;
+  padding: 0 18px;
+  border: 1px solid black;
+  cursor: pointer;
+`
+
+export default JobItem

src/components/JobList/JobList.tsx

@@ -0,0 +1,63 @@
+import styled from '@emotion/styled'
+import { useEffect } from 'react'
+import useFetchJobs from '../../../hooks/useFetchJobs'
+import JobItem from './JobItem' // adjust path accordingly
+
+interface Props {
+  unit: string
+}
+
+const JobList = ({ unit }: Props) => {
+  const { data, error, isLoading, fetchJobs } = useFetchJobs()
+
+  useEffect(() => {
+    fetchJobs([unit], '')
+  }, [unit])
+
+  if (isLoading) {
+    return <div>Loading jobs...</div>
+  }
+
+  if (error) {
+    return <div>Error: {error.message}</div>
+  }
+
+  if (!data || data.jobs.length === 0) {
+    return <div>No jobs found</div>
+  }
+
+  return (
+    <Container>
+      <Title>{unit}</Title>
+      <Jobs>
+        {data?.jobs?.map((job: any) => (
+          <JobItem key={job.id} job={job} />
+        ))}
+      </Jobs>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  margin-top: 180px;
+  border-top: 1px solid rgba(0, 0, 0, 0.28);
+`
+
+const Jobs = styled.div`
+  width: 100%;
+`
+
+const Title = styled.h3`
+  padding-top: 24px;
+  width: 100%;
+  color: #000;
+  font-size: 52px;
+  font-weight: 400;
+  line-height: 130%; /* 67.6px */
+  text-transform: capitalize;
+`
+
+export default JobList

src/components/JobList/index.ts

@@ -0,0 +1,2 @@
+export { default as JobItem } from './JobItem'
+export { default as JobList } from './JobList'

src/pages/index.mdx

@@ -2,7 +2,6 @@ import { SEO } from '@/components/SEO'
 import { Tags } from '@/components/Tags'
 import { Home } from '@/containers/Home'
 import { Button } from '@/components/Button'
-import { Hero, Description } from '@/components/Hero'
 import { Portfolio, PortfolioItem } from '@/components/Portfolio'
 import { Section } from '@/components/Section'
 import { Navbar } from '@/components/Navbar'
@@ -15,15 +14,6 @@ import { Footer } from '@/components/Footer'
 <Navbar />
 
 <Home>
-    <Hero>
-        # Institute<br />of Free <br />Technology
-        
-        <Description>
-            ### We enable entrepreneurship. Building and investing in great technology companies globally and providing a unique blend of operational support and capital.
-            <Button color="white" width="265px" height="50px" padding="10px 40px">Explore our Ecosystem</Button>
-        </Description>
-    </Hero>
-
     <Section>
         ## To this day, finleap has built 15 independent companies of which 10 are active portfolio companies collectively worth €3 billion+ including two unicorns
 

src/pages/jobs.mdx

@@ -0,0 +1,21 @@
+import { SEO } from '@/components/SEO'
+import { Navbar } from '@/components/Navbar'
+import { Home } from '@/containers/Home'
+import { Mission } from '@/components/Mission'
+import { Footer } from '@/components/Footer'
+import { JobList } from '@/components/JobList'
+import { Box } from '@/components/Box'
+
+<SEO />
+
+<Navbar />
+
+<Box>
+  <JobList unit={'codex'} />
+  <JobList unit={'status'} />
+  <JobList unit={'waku'} />
+  <JobList unit={'nimbus'} />
+  <JobList unit={'nomos'} />
+</Box>
+
+<Footer />

src/pages/test.tsx

@@ -1,67 +0,0 @@
-import { SEO } from '@/components/SEO'
-import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
-import { serialize } from 'next-mdx-remote/serialize'
-import { useEffect } from 'react'
-import useFetchJobs from '../../hooks/useFetchJobs'
-import { DefaultLayout } from '../layouts/DefaultLayout'
-
-interface Props {
-  mdxSource: MDXRemoteSerializeResult
-}
-
-const Page = ({ mdxSource }: Props) => {
-  const { data, error, isLoading, fetchJobs } = useFetchJobs()
-
-  useEffect(() => {
-    // Fetching jobs from all job boards and with no title filter on component mount
-    fetchJobs(['logos'], '')
-  }, [])
-
-  if (isLoading) {
-    return <div>Loading jobs...</div>
-  }
-
-  if (error) {
-    return <div>Error: {error.message}</div>
-  }
-
-  if (!data || data.jobs.length === 0) {
-    return <div>No jobs found</div>
-  }
-
-  return (
-    <>
-      <SEO />
-      <div>
-        <h1>Job Listings</h1>
-        <ul>
-          {data.jobs.map((job: any) => (
-            <li key={job.id}>
-              <a
-                href={job.absolute_url}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {job.title}
-              </a>
-              <p>{job.location?.name}</p>
-            </li>
-          ))}
-        </ul>
-      </div>
-      <MDXRemote {...mdxSource} />
-    </>
-  )
-}
-
-Page.getLayout = function getLayout(page: React.ReactNode) {
-  return <DefaultLayout>{page}</DefaultLayout>
-}
-
-export async function getStaticProps() {
-  const source = '**mdx** example'
-  const mdxSource = await serialize(source)
-  return { props: { mdxSource } }
-}
-
-export default Page