feat: adds Refill streams

pages/refill.tsx

@@ -1,6 +1,8 @@
 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';
 
 const dev: ProgramItemProps[] = [
   {
@@ -70,6 +72,8 @@ const design: ProgramItemProps[] = [
 ];
 
 export default function Refill() {
+  const [panel, setPanel] = useState<'design' | 'dev'>('design');
+
   return (
     <RefillLayout>
       <div className={style.header}>
@@ -106,6 +110,62 @@ export default function Refill() {
         </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>
 
@@ -129,6 +189,27 @@ export default function Refill() {
   );
 }
 
+type YoutubeEmbedProps = {
+  title: string;
+  src: string;
+};
+function EmbedYouTube({ title, src }: YoutubeEmbedProps) {
+  return (
+    <div className={style.ytVideo}>
+      <iframe
+        width="560"
+        height="315"
+        frameBorder={0}
+        src={src}
+        title={title}
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerPolicy="strict-origin-when-cross-origin"
+        allowFullScreen
+      ></iframe>
+    </div>
+  );
+}
+
 type ProgramItemProps = {
   speaker: {
     name: string;

src/components/button/button.module.css

@@ -7,7 +7,9 @@
   color: var(--color, var(--color-secondary1--text));
   border-radius: 0.5rem;
   font-weight: 500;
-  transition: background-color 250ms ease-out, scale 100ms ease-out;
+  transition:
+    background-color 250ms ease-out,
+    scale 100ms ease-out;
   display: inline-block;
 
   border-radius: 4rem;
@@ -25,3 +27,8 @@
   composes: button;
   text-decoration: none;
 }
+
+.button[aria-selected='true'] {
+  background-color: var(--color-secondary1__shade3);
+  color: var(--color-secondary1__shade3--text);
+}

src/components/button/index.tsx

@@ -5,13 +5,13 @@ import { and } from 'src/utils/css';
 
 import style from './button.module.css';
 
-type ButtonProps = React.PropsWithChildren<{
+export type ButtonProps = React.PropsWithChildren<{
   className?: string;
   colorPair?: ColorSet;
   colorVariation?: ColorVariations;
 }>;
 
-type EType = React.DetailedHTMLProps<
+export type EType = React.DetailedHTMLProps<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
   HTMLButtonElement
 >;

src/refill/refill.module.css

@@ -187,3 +187,17 @@
   align-items: center;
   gap: 0.5rem;
 }
+
+.ytVideo {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 56.25%;
+}
+.ytVideo iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

src/refill/tabbar/index.tsx

@@ -0,0 +1,58 @@
+import { PropsWithChildren } from 'react';
+import style from './tabbar.module.css';
+import { Button, EType as ButtonProps } from '@components/button';
+
+type TabProps = { selected?: boolean; controlsId: string } & ButtonProps;
+export function TabButton({
+  selected = false,
+  controlsId,
+  ...props
+}: TabProps) {
+  return (
+    <Button
+      role="tab"
+      aria-controls={controlsId}
+      aria-selected={selected}
+      {...props}
+    />
+  );
+}
+
+type TabListProps = PropsWithChildren<{ label: string }>;
+export function TabList({ label, children }: TabListProps) {
+  return (
+    <div role="tablist" aria-label={label} className={style.tablist}>
+      {children}
+    </div>
+  );
+}
+
+type TabPanelProps = PropsWithChildren<{
+  labelledBy: string;
+  isVisible: boolean;
+  id: string;
+}>;
+export function TabPanel({
+  labelledBy,
+  id,
+  isVisible,
+  children,
+}: TabPanelProps) {
+  return (
+    <div
+      role="tabpanel"
+      tabIndex={0}
+      hidden={!isVisible}
+      aria-labelledby={labelledBy}
+      className={style.tabpanel}
+      id={id}
+    >
+      {children}
+    </div>
+  );
+}
+
+type TabContainerProps = PropsWithChildren<{}>;
+export function TabContainer({ children }: TabContainerProps) {
+  return <div className={style.container}>{children}</div>;
+}

src/refill/tabbar/tabbar.module.css

@@ -0,0 +1,29 @@
+.container {
+  background: #fff;
+  padding: 2rem;
+  box-shadow:
+    0px 73px 80px rgba(0, 0, 0, 0.05),
+    0px 26.6462px 29.2013px rgba(0, 0, 0, 0.0344991),
+    0px 12.9362px 14.1767px rgba(0, 0, 0, 0.0278145),
+    0px 6.34158px 6.94968px rgba(0, 0, 0, 0.0221855),
+    0px 2.50747px 2.74791px rgba(0, 0, 0, 0.0155009);
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.tablist {
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
+}
+.tablist__nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.tabpanel[hidden] {
+  display: none;
+}