Add open application listing to jobs that opens mail client

src/jobs/index.tsx

@@ -11,6 +11,7 @@ import { and } from 'src/utils/css';
 import JobListingItem from './list-item';
 import { OfficeSelector } from 'src/office-selector';
 import PageTitle from '@components/page-title';
+import OpenApplicationListingItem from './open-application-listing-item';
 
 const JobsIndex: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
   listings,
@@ -112,6 +113,7 @@ const JobsIndex: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
               key={`${item.name}_${item.title}_${item.location}`}
             />
           ))}
+          <OpenApplicationListingItem/>
         </section>
         <section className={style.omVariant}>
           <h2>Variantdag - November 2019</h2>

src/jobs/open-application-listing-item.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ButtonNextLink } from 'src/components/button';
+import { and } from 'src/utils/css';
+import style from './index.module.css';
+
+const emailSubject = "Åpen søknad - Oslo/Trondheim/Bergen";
+const emailBody = 
+`
+Så hyggelig at du ønsker å jobbe hos oss!
+
+Tips: Husk å oppdatere emnefeltet med hvilken by du ønsker å skrive til, så vet vi hvem som skal svare deg.
+`;
+const mailtoLink = `mailto:[email protected]?subject=${encodeURIComponent(emailSubject)}&body=${encodeURIComponent(emailBody)}`;
+
+export default function OpenApplicationListingItem() {  
+  return (
+    <section className={style.job__listing__container}>
+      <div>
+        <h3 className={and(style.job__title, 'fancy')}>Åpen Søknad</h3>
+        <span>Finner du ikke en stilling som passer deg?</span>
+      </div>
+      <ButtonNextLink href={mailtoLink} aria-label="Send en åpen søknad">
+        Send en åpen søknad
+      </ButtonNextLink>
+    </section>
+  );
+}