archive devcon 7 bandaid

Author: lassejaco

devcon-archive/src/components/common/page-hero/PageHero.tsx

@@ -36,6 +36,7 @@ type PathSegment = {
 }
 
 type PageHeroProps = {
+  banner?: React.ReactNode
   title?: string
   titleSubtext?: string
   titleClassName?: string
@@ -170,6 +171,12 @@ export const PageHero = (props: PageHeroProps) => {
 
           {props.children}
 
+          {props.banner && (
+            <div className={css['banner']}>
+              <div className="section">{props.banner}</div>
+            </div>
+          )}
+
           {props.scenes && (
             <div className={css['scenes']}>
               {props.scenes.map((scene: any, i: number) => {

devcon-archive/src/components/common/page-hero/page-hero.module.scss

@@ -21,7 +21,7 @@
     left: 0px;
   }
 
-  // Gradient
+  // Gradient f
   &:before {
     background-repeat: no-repeat;
     background-position: center right;
@@ -164,7 +164,8 @@
 .info {
   @include layout-content;
   height: 100%;
-
+  position: relative;
+  
   .path {
     display: flex;
     padding-top: $gaps-gap-4;
@@ -262,6 +263,7 @@
 }
 
 .scenes {
+  position: relative;
   margin-bottom: $gaps-gap-4;
   width: 100%;
   display: grid;
@@ -398,3 +400,46 @@
     width: 100%;
   }
 }
+
+.banner {
+    
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  // bottom: 0px; 
+  // padding: 5px;
+  
+  a {
+    color: white;
+    text-decoration: underline;
+  }
+
+ 
+  :global(.section) {
+    > * {
+      background-color: #30354b;
+      color: white;
+      font-size: 14px;
+      padding: 4px 10px;
+      margin: 8px;
+      border-radius: 4px;
+      
+      // Add animation
+      opacity: 0;
+      animation: fadeIn 0.5s ease-in forwards;
+    }
+  }
+}
+
+// Add keyframes at the end of the file
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

devcon-archive/src/components/domain/archive/Archive.tsx

@@ -12,6 +12,7 @@ import { Interests } from './interests'
 import OnDemandVideoIcon from 'src/assets/icons/on_demand_video.svg'
 import { Button } from 'src/components/common/button'
 import { ARCHIVE_DESCRIPTION, ARCHIVE_IMAGE_URL, ARCHIVE_TITLE } from 'src/utils/constants'
+import { Link } from 'src/components/common/link'
 // import LibButton from 'lib/components/button'
 
 type ArchiveProps = {}
@@ -72,7 +73,13 @@ export const Archive = (props: ArchiveProps) => {
         title="Archive"
         titleClassName={css['white-title']}
         // titleSubtext="Devcon"
-      />
+        banner={
+          <div>
+            Devcon 7 videos will be added to the archive soon.{' '}
+            <Link to="https://app.devcon.org/schedule">Visit the app in the meantime to watch them now.</Link>
+          </div>
+        }
+      ></PageHero>
 
       <div className={css['content']}>
         <Interests />

devcon-archive/src/context/query-mapper.ts

@@ -24,14 +24,21 @@ export function ToNavigationData(nodes: any, videoTags?: any[], type?: 'default'
 export function ToArchiveNavigation(videoTags?: any[]): Array<Link> {
   const links = new Array<Link>()
   links.push({ title: 'Watch', url: '/archive/watch', type: 'page' })
-  const eventLinks = [6, 5, 4, 3, 2, 1, 0].map(
-    event =>
-      ({
+  const eventLinks = [
+    {
+      title: 'Devcon 7',
+      url: 'https://app.devcon.org/schedule',
+      type: 'page',
+    },
+  ].concat(
+    [6, 5, 4, 3, 2, 1, 0].map(
+      event =>
+        ({
         title: `Devcon ${event}`,
         url: `/archive/watch?event=devcon-${event}`,
         type: 'page',
       } as Link)
-  )
+  ))
   const tagLinks = videoTags?.filter((i: string) => !!i).map(i => {
     return { title: i, url: `/archive/watch?tags=${encodeURIComponent(i)}`, type: 'page' } as Link
   })