feat: add pages

Author: Nagarian

hall-of-fame/src/components/EditionLink.tsx

@@ -0,0 +1,27 @@
+import styled from '@emotion/styled'
+import { Box, Icon, Link } from '@sthack/scoreboard-ui/components'
+import { SizeProps } from 'styled-system'
+
+export type EditionLinkProps = {
+  year: number
+  logo: Icon
+}
+
+export function EditionLink({
+  year,
+  logo: Icon,
+  size = '13',
+}: EditionLinkProps & SizeProps) {
+  return (
+    <SLink to={`/year/${year}`} flexDirection="column">
+      <Icon size={size} />
+      <Box as="span">{`${year}`}</Box>
+    </SLink>
+  )
+}
+
+const SLink = styled(Link)`
+  svg {
+    filter: drop-shadow(-1px 6px 3px hsl(0deg 0% 0% / 80%));
+  }
+`

hall-of-fame/src/components/Footer.tsx

@@ -2,8 +2,12 @@ import {
   Box,
   IconAchievement,
   IconChallenge,
+  IconLogo2023,
+  IconLogo2024,
+  IconLogo2025,
   Link,
 } from '@sthack/scoreboard-ui/components'
+import { EditionLink } from './EditionLink'
 
 export function Footer() {
   return (
@@ -26,15 +30,9 @@ export function Footer() {
         overflowX="auto"
         px="1"
       >
-        <Link to="/rules">
-          <IconChallenge color="currentColor" size="1.5em" />
-          Rules
-        </Link>
-
-        <Link to="/scoreboard">
-          <IconAchievement color="currentColor" size="1.5em" />
-          Scoreboard
-        </Link>
+        <EditionLink size={2} year={2025} logo={IconLogo2025} />
+        <EditionLink size={2} year={2024} logo={IconLogo2024} />
+        <EditionLink size={2} year={2023} logo={IconLogo2023} />
       </Box>
     </Box>
   )

hall-of-fame/src/components/Header.tsx

@@ -1,7 +1,14 @@
 import styled from '@emotion/styled'
-import { Box, Logo } from '@sthack/scoreboard-ui/components'
+import {
+  Box,
+  IconLogo2023,
+  IconLogo2024,
+  IconLogo2025,
+  Logo,
+} from '@sthack/scoreboard-ui/components'
 import { NavLink } from 'react-router-dom'
 import { space, SpaceProps } from 'styled-system'
+import { EditionLink } from './EditionLink'
 
 export function Header() {
   return (
@@ -22,8 +29,9 @@ export function Header() {
 
       <nav>
         <Box display="flex" flexDirection="row" alignItems="center" as="ul">
-          {/* <GameLink to="/scoreboard" label="Scoreboard" />
-          <GameLink to="/rules" label="Rules" /> */}
+          <EditionLink size={2} year={2025} logo={IconLogo2025} />
+          <EditionLink size={2} year={2024} logo={IconLogo2024} />
+          <EditionLink size={2} year={2023} logo={IconLogo2023} />
         </Box>
       </nav>
     </Box>

hall-of-fame/src/pages/Challenges.tsx

@@ -57,6 +57,10 @@ export function Challenges() {
     return computeGameScore(a, rewards, challenges, teams, config)
   }, [achievements, challenges, rewards, users])
 
+  if (yearNumber <= 2023) {
+    return <BoxPanel title="Data not available" />
+  }
+
   return (
     <ConditionalLoader
       showLoader={loading}

hall-of-fame/src/pages/Home.tsx

@@ -1,13 +1,11 @@
-import styled from '@emotion/styled'
 import {
   Box,
   BoxPanel,
-  Icon,
   IconLogo2023,
   IconLogo2024,
   IconLogo2025,
-  Link,
 } from '@sthack/scoreboard-ui/components'
+import { EditionLink } from 'components/EditionLink'
 
 export function Home() {
   return (
@@ -63,23 +61,3 @@ export function Home() {
     </Box>
   )
 }
-
-type EditionLinkProps = {
-  year: number
-  logo: Icon
-}
-
-export function EditionLink({ year, logo: Icon }: EditionLinkProps) {
-  return (
-    <SLink to={`/year/${year}`} flexDirection="column">
-      <Icon size="13" />
-      <Box as="span">{`${year}`}</Box>
-    </SLink>
-  )
-}
-
-const SLink = styled(Link)`
-  svg {
-    filter: drop-shadow(-1px 6px 3px hsl(0deg 0% 0% / 80%));
-  }
-`

hall-of-fame/src/pages/Teams.tsx

@@ -5,6 +5,7 @@ import {
   GameScore,
 } from '@sthack/scoreboard-common'
 import {
+  Box,
   BoxPanel,
   ConditionalLoader,
   IconTeams,
@@ -57,6 +58,10 @@ export function Teams() {
     return computeGameScore(a, rewards, challenges, teams, config)
   }, [achievements, challenges, rewards, users])
 
+  if (yearNumber <= 2023) {
+    return <BoxPanel title="Data not available" />
+  }
+
   return (
     <ConditionalLoader
       showLoader={loading}