feat: adds links on /refill

varianter · Jun 12, 2024 · fd7c2f6 · fd7c2f6
1 parent 2eabbf5
commit fd7c2f6
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 87 deletions.
diff --git a/pages/refill.tsx b/pages/refill.tsx
@@ -1,46 +1,52 @@
-import RefillLayout from 'src/refill/layout';
 import Image from 'next/image';
-import style from 'src/refill/refill.module.css';
-import { TabButton, TabContainer, TabList, TabPanel } from 'src/refill/tabbar';
 import { useState } from 'react';
+import RefillLayout from 'src/refill/layout';
+import style from 'src/refill/refill.module.css';
 
 const dev: ProgramItemProps[] = [
   {
     speaker: { name: 'Jacob Berglund', src: '/refill/people/jacob.jpg' },
     title: 'Det var en gång en request, en response och ett par headers',
+    url: 'https://youtu.be/ck_VOCxTpWE?si=UXyQwjGxpJmgfOX3',
   },
   {
     speaker: {
       name: 'Jakob Endrestad Kielland',
       src: '/refill/people/jakob.jpg',
     },
     title: 'Hvordan bygge latterlig kule nettsider med View Transitions API',
+    url: 'https://youtu.be/6YvDcPecICA?si=-AAPHbV3WeDZ7EJB',
   },
   {
     speaker: {
       name: 'Truls Henrik Jakobsen',
       src: '/refill/people/truls-henrik.jpg',
     },
     title: 'Skjema-endringer med lave skuldre: Bakoverkompatible APIer',
+    url: 'https://youtu.be/gRZKqd8GQuE?si=_TZFW68WCZW4PRij',
   },
   {
     speaker: { name: 'Christian Brevik', src: '/refill/people/christian.jpg' },
     title: 'TestContainers er kulere enn ChatGPT',
+    url: 'https://youtu.be/2DpZ3FyWd3k?si=B02412tfoGL9FFNj',
   },
   {
     speaker: { name: 'Thomas Hansen', src: '/refill/people/thomas.jpg' },
     title: 'Erfaringer med prosessarbeid',
+    url: 'https://youtu.be/slu5oJ7Qqkw?si=4OSwN8SeR83HCGZK',
   },
   {
     speaker: {
       name: 'Anders Njøs Slinde',
       src: '/refill/people/anders-njos.jpg',
     },
     title: 'Plattform sa du? Ja det må vi selvfølgelig ha. Eller?',
+    url: 'https://youtu.be/obJTeBTEg4I?si=LfPcac2s68JY-PQ-',
   },
   {
     speaker: { name: 'Mikael Brevik', src: '/refill/people/mikael.jpg' },
     title: 'RAG-arkitektur avmystifisert',
+    url: 'https://youtu.be/RQypwHKWVI4?si=0aOYMXvflFNIWOp3',
   },
 ];
 const design: ProgramItemProps[] = [
@@ -50,24 +56,28 @@ const design: ProgramItemProps[] = [
       src: '/refill/people/jonas.jpg',
     },
     title: 'UX Metrics - Hva, hvorfor og hvordan?',
+    url: 'https://youtu.be/ZlOv0ggJLNI?si=kMfMScoYN7cka3FM',
   },
   {
     speaker: {
       name: 'Andreas Sætersdal Hartveit',
       src: '/refill/people/andreas.jpg',
     },
     title: 'En skikkelig nerdete preik om typografi',
+    url: 'https://youtu.be/EKUIVpL9V7I?si=ZRbF_ZM0A20-sTdx',
   },
   {
     speaker: { name: 'Simen Strøm Braaten', src: '/refill/people/simen.jpg' },
     title: 'Fra å være en god designer til å bli en dårlig utvikler',
+    url: 'https://youtu.be/UwYRcGc-W4s?si=ZNXltHdFp1ARLyPY',
   },
   {
     speaker: {
       name: 'Andreas Sætersdal Hartveit',
       src: '/refill/people/andreas.jpg',
     },
     title: 'Mitt voksende produkt / MVP arket',
+    url: 'https://youtu.be/kAYDExZ0mzU?si=KSJlpqtaAf3nCKOZ',
   },
 ];
 
@@ -88,86 +98,20 @@ export default function Refill() {
         <div className={style.header__inner}>
           <h1>Refill 2024</h1>
           <p>
-            Variant inviterer til første iterasjon av Refill-konferansen. En
-            tverrfaglig konferanse fylt til randen med læreglede.
+            7. juni inviterte Variant til vår første iterasjon av
+            Refill-konferansen. En tverrfaglig konferanse fylt til randen med
+            læreglede.
           </p>
           <p>
-            Konferansen streames og har denne gang 2 tracks: utvikling og
-            design. Følg med på denne siden fredag 7. juni klokken 14:00, for
-            streams.
+            Konferansen ble streamet med 2 tracks: utvikling og design. Om du
+            gikk glipp av hendelsen har du ingen ting å frykte. Vi er jo åpne,
+            tross alt, og du kan se alle foredrag lenket under her.
           </p>
-
-          <div className={style.calendarContainer}>
-            <a href="/refill/event.ics" download>
-              <CalendarIcon />
-              Marker i kalender
-            </a>
-            <a href="/refill/program.pdf" download>
-              <DownloadIcont />
-              Last ned programmet
-            </a>
-          </div>
         </div>
       </div>
 
       <div className={style.programSection}>
-        <h2>Se stream</h2>
-        <TabContainer>
-          <TabList label="Velg stream">
-            <TabButton
-              onClick={(e) => {
-                e.preventDefault();
-                setPanel('design');
-              }}
-              id={`tab-design`}
-              title={`Velg design`}
-              controlsId={`panel-design`}
-              selected={panel === 'design'}
-            >
-              Design
-            </TabButton>
-            <TabButton
-              onClick={(e) => {
-                e.preventDefault();
-                setPanel('dev');
-              }}
-              id={`tab-dev`}
-              title={`Velg utvikling`}
-              controlsId={`panel-dev`}
-              selected={panel === 'dev'}
-            >
-              Utvikling
-            </TabButton>
-          </TabList>
-
-          <div>
-            <TabPanel
-              labelledBy={`tab-design`}
-              isVisible={panel === 'design'}
-              id={`panel-design`}
-            >
-              <EmbedYouTube
-                src="https://www.youtube-nocookie.com/embed/dSpal6Q2MFU?si=V9c_pRj8ykFYLQN9"
-                title="Refill Stream: Designtrack"
-              />
-            </TabPanel>
-
-            <TabPanel
-              labelledBy={`tab-dev`}
-              isVisible={panel === 'dev'}
-              id={`panel-dev`}
-            >
-              <EmbedYouTube
-                src="https://www.youtube-nocookie.com/embed/RDupUN7zRoM?si=7pK7b1fP5DqW8FXb"
-                title="Refill Stream: Utviklingstrack"
-              />
-            </TabPanel>
-          </div>
-        </TabContainer>
-      </div>
-
-      <div className={style.programSection}>
-        <h2>Track: Utvikling</h2>
+        <h2>Se track: Utvikling</h2>
 
         <ul className={style.programSectionGrid}>
           {dev.map((item, i) => (
@@ -177,7 +121,7 @@ export default function Refill() {
       </div>
 
       <div className={style.programSection}>
-        <h2>Track: Design</h2>
+        <h2>Se track: Design</h2>
 
         <ul className={style.programSectionGrid}>
           {design.map((item, i) => (
@@ -215,13 +159,16 @@ type ProgramItemProps = {
     name: string;
     src?: string;
   };
+  url: string;
   title: string;
 };
-function ProgramItem({ speaker, title }: ProgramItemProps) {
+function ProgramItem({ speaker, title, url }: ProgramItemProps) {
   return (
     <li className={style.programItem}>
-      <h3>{title}</h3>
-      <Speaker {...speaker} />
+      <a href={url}>
+        <h3>{title}</h3>
+        <Speaker {...speaker} />
+      </a>
     </li>
   );
 }

diff --git a/src/index/index.tsx b/src/index/index.tsx
@@ -343,20 +343,18 @@ function RefillLink() {
       <div className={style.infoBlock__content}>
         <h2 className={style.infoBlock__title}>
           <Link href="/refill" className={style.infoBlock__link}>
-            <span className={style.infoBlock__text}>Refill stream</span>
+            <span className={style.infoBlock__text}>Se opptak av Refill</span>
             <Arrow className={style.infoBlock__arrow} color="standard__black" />
           </Link>
         </h2>
 
         <p>
-          Vi inviterer til første iterasjon av Refill-konferansen. En
-          tverrfaglig konferanse fylt til randen med læreglede.
+          7. juni kjørte vi vår første iterasjon av Refill-konferansen. En
+          tverrfaglig konferanse fylt til randen med læreglede som var streamet
+          åpent for alle.
         </p>
 
-        <p>
-          Konferansen streames fredag 7. juni klokken 14:00 i to parallelle
-          tracks: utvikling og design.
-        </p>
+        <p>Nå er alle 11 foredrag er nå tilgjengelig på opptak.</p>
       </div>
     </div>
   );

diff --git a/src/refill/refill.module.css b/src/refill/refill.module.css
@@ -101,6 +101,20 @@
   padding: 2rem;
   gap: 2rem;
 }
+.programItem a {
+  flex: 1;
+  color: #fff;
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+
+  justify-content: space-between;
+  gap: 2rem;
+}
+.programItem a:hover {
+  color: #fff;
+  text-decoration: underline;
+}
 
 .programItem::before {
   position: absolute;