Update layout

src/App.tsx

@@ -1,14 +1,12 @@
-import { Card } from './components/Card'
 import * as rawChallenges from './challenges'
+import { List } from './components/List'
 
 export function App() {
   const challenges = Object.values(rawChallenges)
 
   return (
-    <div className="App">
-      {challenges.map((challenge) => (
-        <Card key={challenge.title} {...challenge} />
-      ))}
-    </div>
+    <main className="App">
+      <List challenges={challenges} />
+    </main>
   )
 }

src/challenges/types.ts

@@ -0,0 +1,5 @@
+export type Challenge = {
+  title: string
+  url: string
+  solution: string
+}

src/components/Card/index.tsx

@@ -1,25 +1,16 @@
 import { HTMLAttributes } from 'react'
 import parse from 'html-react-parser'
 
+import { Challenge } from '../../challenges/types'
 import { IFrame } from '../IFrame'
 // import styles from './index.module.css'
 
-export type CardProps = HTMLAttributes<HTMLDivElement> & {
-  title: string
-  url: string
-  solution: string
-}
+export type CardProps = HTMLAttributes<HTMLDivElement> & Challenge
 
-export function Card({ title, url, solution }: CardProps) {
+export function Card({ solution }: CardProps) {
   return (
-    <a href={url} target="_blank" rel="noreferrer">
-      <article className="Card">
-        <h1>{title}</h1>
-
-        <IFrame width={400} height={300}>
-          {parse(solution)}
-        </IFrame>
-      </article>
-    </a>
+    <IFrame width={400} height={300}>
+      {parse(solution)}
+    </IFrame>
   )
 }

src/components/IFrame/index.module.css

@@ -1,4 +1,5 @@
 .container {
+  display: block;
   border: none;
   pointer-events: none;
 }

src/components/List/index.module.css

@@ -0,0 +1,4 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}

src/components/List/index.tsx

@@ -0,0 +1,51 @@
+import { HTMLAttributes, useEffect, useRef, useState } from 'react'
+
+import { Challenge } from '../../challenges/types'
+import { Card } from '../Card'
+import styles from './index.module.css'
+
+export type ListProps = HTMLAttributes<HTMLUListElement> & {
+  challenges: Challenge[]
+}
+
+export function List({ challenges }: ListProps) {
+  const debounceRef = useRef<number>()
+  const [availableWidth, setAvailableWidth] = useState(window.innerWidth)
+
+  function handleResize() {
+    clearTimeout(debounceRef.current)
+
+    debounceRef.current = setTimeout(() => {
+      setAvailableWidth(window.innerWidth)
+    }, 100)
+  }
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  const columns = Math.floor(availableWidth / 400)
+  const contentWidth = columns * 400
+  const scale = availableWidth / contentWidth
+
+  return (
+    <ul
+      className={styles.container}
+      style={{
+        transform: `scale(${scale})`,
+        transformOrigin: 'top left',
+        maxWidth: contentWidth,
+      }}
+    >
+      {challenges.map((challenge) => (
+        <li key={challenge.title}>
+          <Card {...challenge} />
+        </li>
+      ))}
+    </ul>
+  )
+}