From e839a5f61f0faa21ca8b4bd5767f7575d5e576ee Mon Sep 17 00:00:00 2001
From: polwex <polwex@sortug.com>
Date: Wed, 21 May 2025 14:00:28 +0700
Subject: the card flip animation is legit

---
 src/pages/lang/[slug].tsx | 74 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/pages/lang/[slug].tsx

(limited to 'src/pages/lang')

diff --git a/src/pages/lang/[slug].tsx b/src/pages/lang/[slug].tsx
new file mode 100644
index 0000000..11962a5
--- /dev/null
+++ b/src/pages/lang/[slug].tsx
@@ -0,0 +1,74 @@
+import { Button } from "@/components/ui/button";
+import { Link } from "waku";
+
+import { getContextData } from "waku/middleware/context";
+import type { PageProps } from "waku/router";
+import db from "@/lib/db";
+import { Progress } from "@/components/ui/progress";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+const flags: Record<string, string> = {
+  th: "🇹🇭",
+  en: "🇬🇧",
+  zh: "🇨🇳",
+  ja: "🇯🇵",
+  es: "🇪🇸",
+  fr: "🇫🇷",
+};
+
+export default async function HomePage(props: PageProps<"/lang/[slug]">) {
+  const lessons = await getData(props.slug);
+  const { user } = getContextData();
+  function commit() {}
+
+  return (
+    <>
+      <section>
+        <h2 className="text-lg">Thai!</h2>
+        {lessons.map((l) => (
+          <Link key={l.id} to={`/lesson/${l.id}`}>
+            <Card>
+              <CardHeader>
+                <CardTitle>
+                  <h3>{l.name}</h3>
+                </CardTitle>
+                <CardDescription>
+                  <p>{l.description}</p>
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Progress value={(l.position / l.count) * 100} />
+              </CardContent>
+            </Card>
+          </Link>
+        ))}
+      </section>
+    </>
+  );
+}
+
+const getData = async (lang: string) => {
+  const lessons = db.fetchLanguage(lang);
+
+  return lessons;
+};
+
+export const getConfig = async () => {
+  return {
+    render: "dynamic",
+  } as const;
+};
+
+async function LanguageItem({ lang }: { lang: string }) {
+  return (
+    <div className="flex">
+      <div className="text-lg">{flags[lang] || ""}</div>
+    </div>
+  );
+}
-- 
cgit v1.2.3