feat: lwd 52 new card design

components/Card/Card.tsx

@@ -1,24 +1,62 @@
 import Link from 'next/link';
 
-import styles from './Card.module.css';
 import type { CardProps } from './types';
+import { AdvancedIcon } from '@/Icon/AdvancedIcon';
+import { BeginnerIcon } from '@/Icon/BeginnerIcon';
+import { IntermediateIcon } from '@/Icon/IntermediateIcon';
 
-export function Card({ title, description, url }: CardProps): JSX.Element {
+const DIFFICULTY: Record<number, string> = {
+  0: 'Beginner',
+  1: 'Intermediate',
+  2: 'Advanced',
+};
+
+function DifficultyIcon({ difficulty }: { difficulty: number }) {
+  switch (difficulty) {
+    case 2: {
+      return <AdvancedIcon />;
+    }
+    case 1: {
+      return <IntermediateIcon />;
+    }
+
+    default: {
+      return <BeginnerIcon />;
+    }
+  }
+}
+
+export function Card({
+  title,
+  path,
+  difficulty,
+  pages,
+}: CardProps): JSX.Element {
   return (
-    <div className={`${styles.cardBelow} rounded-md h-36 p-[1px] group`}>
-      <Link
-        href={url}
-        className={`${styles.card} bg-white w-full h-full flex flex-col gap-2 py-2 px-3 rounded-md`}
-      >
-        <span className="text-base font-bold flex-1 group-hover:underline underline-offset-4">
-          {title}
-        </span>
-        <p
-          className={`${styles.description} text-sm h-fit overflow-hidden text-ellipsis flex-1`}
-        >
-          {description}
-        </p>
-      </Link>
+    <div className="rounded-md text-black-900 overflow-hidden">
+      <div className="p-5 bg-black-800 text-black-100 w-full">
+        <div className="w-full flex justify-between font-mono text-sm">
+          <span>Path {path}</span>
+          <span className="flex items-center gap-2">
+            {DIFFICULTY[difficulty]} <DifficultyIcon difficulty={difficulty} />
+          </span>
+        </div>
+        <h3 className="text-lg font-bold">{title}</h3>
+      </div>
+      <ul className="list-disc p-6 rounded-b-md marker:text-pink-500 gap-2 flex flex-col bg-black-100">
+        {pages.map((item) => {
+          return (
+            <li key={item.title} className="ml-4">
+              <Link
+                href={item.url}
+                className="hover:underline underline-offset-4 "
+              >
+                {item.title}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
     </div>
   );
 }

components/Card/types.ts

@@ -1,5 +1,8 @@
+import type { Page } from '~/sources';
+
 export type CardProps = {
   title: string;
-  description: string;
-  url: string;
-}
+  pages: Page[];
+  path: number;
+  difficulty: number;
+};

components/Icon/AdvancedIcon.tsx

@@ -0,0 +1,13 @@
+export function AdvancedIcon(): JSX.Element {
+  return (
+    <svg
+      width="8"
+      height="9"
+      viewBox="0 0 8 9"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect y="0.5" width="8" height="8" rx="1" fill="currentColor" />
+    </svg>
+  );
+}

components/Icon/BeginnerIcon.tsx

@@ -0,0 +1,13 @@
+export function BeginnerIcon(): JSX.Element {
+  return (
+    <svg
+      width="8"
+      height="8"
+      viewBox="0 0 8 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="4" cy="4" r="4" fill="currentColor" />
+    </svg>
+  );
+}

components/Icon/IntermediateIcon.tsx

@@ -0,0 +1,16 @@
+export function IntermediateIcon(): JSX.Element {
+  return (
+    <svg
+      width="10"
+      height="8"
+      viewBox="0 0 10 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.95791 0.71845C4.35014 0.0957013 5.25799 0.0957015 5.65022 0.71845L9.03471 6.09206C9.45413 6.75798 8.97555 7.625 8.18856 7.625H1.41957C0.632571 7.625 0.153991 6.75798 0.573411 6.09206L3.95791 0.71845Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

components/List/List.tsx

@@ -1,33 +1,26 @@
+import styles from './List.module.css';
 import { Card } from '@/Card';
 import { formatSlug } from '~/format';
-import type { Entry } from '~/sources';
-
-import styles from './List.module.css';
+import type { Path } from '~/sources';
 
-export function List({
-  entries,
-  type,
-  description,
-}: {
-  entries: Entry[];
-  type: string;
-  description?: string;
-}): JSX.Element {
+export function List({ path }: { path: Path }): JSX.Element {
   return (
-    <section id={formatSlug(type)} className="mb-20">
+    <section id={formatSlug(path.title)} className="mb-20">
       <h3
-        className={`${styles.sectionHeading} my-4 text-2xl font-bold text-pink-400 w-fit`}
+        className={`${styles.sectionHeading} my-4 text-3xl font-bold text-pink-400 w-fit`}
       >
-        {type}
+        {path.title}
       </h3>
-      {description && <p className="pb-2 text-lg">{description}</p>}
-      <ul className="grid md:grid-cols-4 md:gap-4 ">
-        {entries?.map((entry) => (
-          <li key={entry.name} className="my-2 text-lg">
+      {path.description && <p className="pb-2 text-lg">{path.description}</p>}
+      <ul className="grid lg:grid-cols-4 md:grid-cols-3 sm:gap-4 ">
+        {path.chapters?.map((chapter) => (
+          <li key={chapter.title} className="my-2 text-lg">
             <Card
-              title={entry.name}
-              url={entry.url}
-              description={entry.description ?? ''}
+              title={chapter.title}
+              key={chapter.title}
+              pages={chapter.pages}
+              difficulty={chapter.difficulty}
+              path={path.number}
             />
           </li>
         ))}

pages/index.tsx

@@ -1,10 +1,13 @@
+import type { NextPage } from 'next';
+import Head from 'next/head';
+import { PATH_GettingStarted } from 'paths/0-getting-started';
+import { PATH_Internet } from 'paths/1-internet';
+import { PATH_HTML } from 'paths/2-html';
+import { PATH_CSS } from 'paths/3-css';
+
 import { Footer } from '@/Footer';
 import { Hero } from '@/Hero';
 import { List } from '@/List';
-import { TableOfContents } from '@/TableOfContents';
-import type { NextPage } from 'next';
-import Head from 'next/head';
-import { sources } from '~/sources';
 
 // eslint-disable-next-line react/function-component-definition
 const Home: NextPage = () => {
@@ -20,9 +23,10 @@ const Home: NextPage = () => {
           techniques, curated by one of the largest web development communities on Discord."
         />
         <main className="container my-auto">
-          {sources.map((source) => {
-            return <List key={source.type} {...source} />;
-          })}
+          <List path={PATH_GettingStarted} />
+          <List path={PATH_Internet} />
+          <List path={PATH_HTML} />
+          <List path={PATH_CSS} />
         </main>
         <Footer />
       </div>

paths/0-getting-started.ts

@@ -0,0 +1,67 @@
+import type { Chapter, Path } from '~/sources';
+
+const CHAPTER_Editor: Chapter = {
+  title: 'Code Editor',
+  difficulty: 0,
+  pages: [
+    {
+      title: 'Visual Studio Code',
+      url: 'https://code.visualstudio.com',
+    },
+    {
+      title: 'WebStorm',
+      url: 'https://www.jetbrains.com/webstorm/',
+    },
+  ],
+};
+
+const CHAPTER_Docs: Chapter = {
+  title: 'Documentation and Resources',
+  difficulty: 0,
+  pages: [
+    {
+      title: 'MDN Web Docs',
+      url: 'https://developer.mozilla.org/en-US/',
+    },
+    {
+      title: 'JavaScript.info',
+      url: 'https://javascript.info/',
+    },
+    {
+      title: 'HTML Reference',
+      url: 'https://htmlreference.io/',
+    },
+    {
+      title: 'CSS Reference',
+      url: 'https://cssreference.io/',
+    },
+  ],
+};
+
+const CHAPTER_Questions: Chapter = {
+  title: 'Knowing how and where to ask Questions',
+  difficulty: 1,
+  pages: [
+    {
+      title: 'How to Ask Technical Questions',
+      url: 'https://www.theodinproject.com/how_to_ask',
+    },
+    {
+      title: 'How to ask a good question',
+      url: 'https://stackoverflow.com/help/how-to-ask',
+    },
+    {
+      title: "Stack Overflow",
+      url: "https://stackoverflow.com/",
+    }
+  ],
+};
+
+export const PATH_GettingStarted: Path = {
+  title: 'Getting Started',
+  number: 0,
+
+  description:
+    'To get started with web development, you will need to have a good text editor or IDE to work with. You will also regularly stumble upon issues to solve, so knowing where to find the answers or how to ask question is crucial for your learning journey.',
+  chapters: [CHAPTER_Editor, CHAPTER_Docs, CHAPTER_Questions],
+};

paths/1-internet.ts

@@ -0,0 +1,73 @@
+import type { Chapter, Path } from '~/sources';
+
+const CHAPTER_WorldWideWeb: Chapter = {
+  title: 'World Wide Web',
+  difficulty: 0,
+  pages: [
+    {
+      title: 'What is the World Wide Web?',
+      url: 'https://www.britannica.com/topic/World-Wide-Web',
+    },
+    {
+      title: 'Web Standards: the what, the why, and the how?',
+      url: 'https://www.smashingmagazine.com/2019/01/web-standards-guide/',
+    },
+  ],
+};
+
+const CHAPTER_Browser: Chapter = {
+  title: 'Browser',
+  difficulty: 1,
+  pages: [
+    {
+      title: 'Internal Operations of Browser Engines',
+      url: 'https://web.dev/howbrowserswork/',
+    },
+    {
+      title: 'How Browsers Work',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work',
+    },
+  ],
+};
+
+const CHAPTER_Protocols: Chapter = {
+  title: 'Different type of Protocols',
+  difficulty: 0,
+  pages: [
+    {
+      title: 'Introduction to the Intenet Protocol (IP)',
+      url: 'https://www.cloudflare.com/en-gb/learning/network-layer/internet-protocol/',
+    },
+    {
+      title: 'Definitions of different type of Protocols',
+      url: 'https://www.geeksforgeeks.org/types-of-internet-protocols/',
+    },
+  ],
+};
+
+const CHAPTER_DNS: Chapter = {
+  title: 'Domain Name System and More',
+  difficulty: 1,
+  pages: [
+    {
+      title: 'Introduction to Domain Name System (DNS)',
+      url: 'https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/',
+    },
+    {
+      title: 'Indepth explanation of the DNS',
+      url: 'https://www.techtarget.com/searchnetworking/definition/domain-name-system',
+    },
+  ],
+};
+
+export const PATH_Internet: Path = {
+  title: 'Internet',
+  number: 1,
+  description: 'Learn the basics of the internet and how it works.',
+  chapters: [
+    CHAPTER_WorldWideWeb,
+    CHAPTER_Protocols,
+    CHAPTER_Browser,
+    CHAPTER_DNS,
+  ],
+};