YSWS

components/flag.js

@@ -28,7 +28,7 @@ const scrolled = props =>
     height: 56px;
     &:hover,
     &:focus {
-      animation: ${waveFlagScaled} 0.5s linear infinite alternate;
+      animation: ${waveFlagScaled} 0.3s ease-in-out infinite alternate;
     }
   `
 
@@ -49,7 +49,7 @@ const Base = styled('a')`
   }
   &:hover,
   &:focus {
-    animation: ${waveFlag} 0.5s linear infinite alternate;
+    animation: ${waveFlag} 0.2s ease-in-out infinite alternate;
   }
   @media (prefers-reduced-motion: reduce) {
     animation: none !important;

components/nav.js

@@ -49,6 +49,7 @@ const Root = styled(Box, {
   width: 100vw;
   z-index: 1000;
   ${fixed};
+  transition: background 0.15s;
   @media print {
     display: none;
   }
@@ -144,8 +145,8 @@ const Navigation = props => (
     </NextLink>
     <Link href="/slack">Community</Link>
     <Link href="https://scrapbook.hackclub.com/">Scrapbook</Link>
-    <NextLink href="/onboard" passHref>
-      <Link>OnBoard</Link>
+    <NextLink href="/ysws" passHref>
+      <Link>You Ship, We Ship</Link>
     </NextLink>
   </NavBar>
 )

components/ysws/countdown.js

@@ -0,0 +1,98 @@
+import styled from '@emotion/styled'
+import { useEffect, useState } from 'react'
+import { Box, Flex, Text } from 'theme-ui'
+
+const CountdownWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+
+  @media (max-width: 640px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+`
+
+const Value = styled.span(props => ({
+  textAlign: 'right',
+  marginLeft: '10px',
+  fontSize: props.big ? '3rem' : 'inherit',
+  textShadow: '0 0 0.4em #ff000090',
+  color: 'red'
+}))
+
+const Label = styled.span(props => ({
+  textAlign: 'left',
+  marginLeft: '10px',
+  fontSize: props.big ? '3rem' : 'inherit'
+}))
+
+export default function Countdown({ targetDate }) {
+  const [timeLeft, setTimeLeft] = useState({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+    milliseconds: 0
+  })
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const now = new Date().getTime()
+      const distance = targetDate.getTime() - now
+
+      if (distance < 0) {
+        clearInterval(interval)
+        setTimeLeft({
+          days: 0,
+          hours: 0,
+          minutes: 0,
+          seconds: 0,
+          milliseconds: 0
+        })
+      } else {
+        setTimeLeft({
+          days: Math.floor(distance / (1000 * 60 * 60 * 24)),
+          hours: Math.floor(
+            (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+          ),
+          minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
+          seconds: Math.floor((distance % (1000 * 60)) / 1000),
+          milliseconds: distance % 1000
+        })
+      }
+    }, 10)
+
+    return () => clearInterval(interval)
+  }, [targetDate])
+
+  return (
+    <Box
+      sx={{
+        fontFamily: "'7Seg', monospace",
+        fontSize: '1.5rem',
+        fontWeight: 'bold'
+      }}
+    >
+      <Box sx={{ marginY: 3 }}>
+        <Label>Ends in</Label>
+
+        <Box sx={{ lineHeight: 1 }}>
+          <Value big={true}>{String(timeLeft.days)}</Value>
+          <Label big={true}>DAY{timeLeft.days === 1 ? '' : 's'}</Label>
+        </Box>
+      </Box>
+      <CountdownWrapper>
+        <Value>{String(timeLeft.hours)}</Value>
+        <Label>HOUR{timeLeft.hours === 1 ? '' : 's'}</Label>
+
+        <Value>{String(timeLeft.minutes)}</Value>
+        <Label>MINUTE{timeLeft.minutes === 1 ? '' : 's'}</Label>
+
+        <Value>{String(timeLeft.seconds)}</Value>
+        <Label>SECOND{timeLeft.seconds === 1 ? '' : 's'}</Label>
+
+        <Value>{String(timeLeft.milliseconds)}</Value>
+        <Label>MILLISECONDS</Label>
+      </CountdownWrapper>
+    </Box>
+  )
+}