Create Learn Page

src/app/learn/LearnContent.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
+
+import { learnLevels, LearnLevelType, LearnContentType } from './constants'
+
+const LearnItem = ({
+  index,
+  id,
+  content
+}: {
+  index: number
+  id: string
+  content: LearnContentType
+}) => {
+  return (
+    <div className="group w-full items-center justify-between py-1">
+      <Link
+        href={{
+          pathname: `/learn/content/${id}_${content.value}`
+        }}
+        className="flex w-full rounded-xl px-6 py-3 font-display shadow-md transition group-hover:shadow-lg dark:bg-slate-700"
+      >
+        <span className="flex w-full flex-col">
+          <p className="py-1 text-sm font-medium text-gray-500 dark:text-gray-100">
+            {index}. {content.label}
+          </p>
+        </span>
+      </Link>
+    </div>
+  )
+}
+
+const LearnList = ({ level }: { level: LearnLevelType }) => {
+  return (
+    <div className="m-6 flex gap-6">
+      <div className="relative flex-1">
+        <h2 className="my-5 text-3xl text-gray-500">{level.label}</h2>
+        <div className="space-y-6">
+          {level.sections.map(section => {
+            return (
+              <div key={section.value} className="relative pl-6">
+                {/* Section header */}
+                <h3 className="text-2xl text-gray-500">{section.label}</h3>
+
+                {/* Section items */}
+                {true && (
+                  <ul className="mt-2 space-y-1">
+                    {section.content.map((content, idx) => (
+                      <li
+                        key={content.value}
+                        className="flex items-center gap-2 text-sm"
+                      >
+                        <LearnItem
+                          index={idx + 1}
+                          id={`${level.value}_${section.value}`}
+                          content={content}
+                        />
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const LearnContent = () => {
+  const searchParams = useSearchParams()
+  const level = searchParams.get('level')
+
+  return (
+    <div className="h-full w-full">
+      <div className="w-full px-6 font-display">
+        {learnLevels.map(learnLevel => {
+          return !level || level == learnLevel.value ? (
+            <LearnList key={learnLevel.value} level={learnLevel} />
+          ) : (
+            <></>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

src/app/learn/LearnSidebar.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
+
+import clsx from 'clsx'
+
+import { learnSidebarSelects } from './constants'
+
+export const LearnSidebar = () => {
+  const searchParams = useSearchParams()
+
+  const level = searchParams.get('level')
+
+  return (
+    <div>
+      <div className="mx-4 hidden w-52 shrink flex-col gap-4 divide-y font-display md:flex">
+        <div className="flex shrink flex-col font-display">
+          {learnSidebarSelects.map(learnLevelSelect => {
+            return (
+              <Link
+                key={learnLevelSelect.value}
+                href={{
+                  pathname: '/learn',
+                  query:
+                    learnLevelSelect.value === 'overview'
+                      ? null
+                      : learnLevelSelect.value && {
+                          level: learnLevelSelect.value
+                        }
+                }}
+                type="button"
+                className={clsx(
+                  'flex h-9 w-full items-center justify-center rounded-md transition-colors',
+                  (!level && learnLevelSelect.value === null) ||
+                    learnLevelSelect.value === String(level) ||
+                    (learnLevelSelect.value === 'overview' && !level)
+                    ? 'bg-gray-100 dark:bg-slate-700'
+                    : 'hover:bg-gray-50 dark:hover:bg-slate-600'
+                )}
+              >
+                <p className="text-sm text-gray-500 dark:text-gray-200">
+                  {learnLevelSelect.label}
+                </p>
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/learn/constants.ts

@@ -0,0 +1,231 @@
+export type LearnContentType = {
+  label: string
+  value: string
+}
+
+export type LearnSectionType = {
+  label: string
+  value: string
+  content: LearnContentType[]
+}
+
+export type LearnLevelType = {
+  label: string
+  value: string
+  sections: LearnSectionType[]
+}
+
+export const learnLevels: LearnLevelType[] = [
+  {
+    label: 'เตรียมตัวก่อนเข้าค่าย',
+    value: 'pre-posn',
+    sections: [
+      {
+        label: 'คณิตศาสตร์',
+        value: 'math',
+        content: [
+          {
+            label: 'บทนำ',
+            value: 'intro'
+          },
+          {
+            label: 'จำนวน ระบบจำนวน การดำเนินการของจำนวน',
+            value: 'number-operation'
+          },
+          {
+            label: 'ความสัมพันธ์ ฟังก์ชัน',
+            value: 'function-relation'
+          },
+          {
+            label: 'สมการ และ อสมการ',
+            value: 'equation-inequality'
+          },
+          {
+            label: 'เซต และ ตรรกศาสตร์',
+            value: 'logic-set'
+          },
+          {
+            label: 'การวัดและเรขาคณิต',
+            value: 'geometry'
+          },
+          {
+            label: 'สถิติและความน่าจะเป็น',
+            value: 'prob-stats'
+          }
+        ]
+      },
+      {
+        label: 'กระบวนการคิด',
+        value: 'problem-solving',
+        content: [
+          {
+            label: 'กระบวนการแก้ปัญหาที่มีการใช้ตรรกะ และฟังก์ชัน',
+            value: 'problem-solving'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'ค่ายสอวน. 1',
+    value: 'posn',
+    sections: [
+      {
+        label: 'คณิตศาสตร์',
+        value: 'math',
+        content: [
+          {
+            label: 'ทฤษฎีตัวเลข เมทริกซ์',
+            value: 'matrix'
+          },
+          {
+            label: 'ลำดับและอนุกรม',
+            value: 'sequence-series'
+          },
+          {
+            label: 'เลขฐาน',
+            value: 'radix'
+          }
+        ]
+      },
+      {
+        label: 'การเขียนโปรแกรม',
+        value: 'programming',
+        content: [
+          {
+            label: 'ทำไมถึงใช้ C++',
+            value: 'why-cpp'
+          },
+          {
+            label: 'การติดตั้งโปรแกรม',
+            value: 'installation'
+          },
+          {
+            label: 'พื้นฐานภาษา C และ C++',
+            value: 'cpp-basic'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'ค่ายสอวน. 2 และระดับชาติ',
+    value: 'toi',
+    sections: [
+      {
+        label: 'คณิตศาสตร์',
+        value: 'math',
+        content: [
+          {
+            label: 'เวกเตอร์และระบบพิกัดคาร์ทีเซียน',
+            value: 'vector-cartesian'
+          },
+          {
+            label: 'การนับ',
+            value: 'counting'
+          },
+          {
+            label: 'ทฤษฎีกราฟ',
+            value: 'graph'
+          }
+        ]
+      },
+      {
+        label: 'Data Structure',
+        value: 'datastructure',
+        content: [
+          {
+            label: 'Intro To DS',
+            value: 'intro'
+          },
+          {
+            label: 'Primitive',
+            value: 'primitive'
+          },
+          {
+            label: 'Array and Vector',
+            value: 'array-vector'
+          },
+          {
+            label: 'string',
+            value: 'string'
+          },
+          {
+            label: 'pair',
+            value: 'pair'
+          },
+          {
+            label: 'stack and queue',
+            value: 'stack-queue'
+          },
+          {
+            label: 'priority queue',
+            value: 'priority-queue'
+          },
+          {
+            label: 'set and map',
+            value: 'set-map'
+          },
+          {
+            label: 'choosing datastructure',
+            value: 'choosing-ds'
+          }
+        ]
+      },
+      {
+        label: 'Algorithm',
+        value: 'algorithm',
+        content: [
+          {
+            label: 'intro',
+            value: 'intro'
+          },
+          {
+            label: 'bruteforce',
+            value: 'bruteforce'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'สสวท.',
+    value: 'ipst',
+    sections: [
+      {
+        label: 'คณิตศาสตร์',
+        value: 'math',
+        content: [
+          {
+            label: 'คณิตศาสตร์ระดับสูง',
+            value: 'advanced-math'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'IOI',
+    value: 'ioi',
+    sections: [
+      {
+        label: 'คณิตศาสตร์',
+        value: 'math',
+        content: [
+          {
+            label: 'คณิตศาสตร์ระดับสูง',
+            value: 'advanced-math'
+          }
+        ]
+      }
+    ]
+  }
+]
+
+export const learnSidebarSelects = [
+  {
+    label: 'Overview',
+    value: 'overview'
+  },
+  ...learnLevels.map(({ label, value }) => ({ label, value }))
+]