this is golden thanks claude

3 files changed, 64 insertions, 12 deletions

diff --git a/src/pages/lesson/[slug].tsx b/src/pages/lesson/[slug].tsx
index 991859b..e9c7b93 100644
--- a/src/pages/lesson/[slug].tsx
+++ b/src/pages/lesson/[slug].tsx
@@ -36,8 +36,7 @@ export default async function HomePage(props: PageProps<"/lesson/[slug]">) {
   const data = await getData(Number(props.slug), user.id);
   if ("error" in data) return <p>Error</p>;
   const cardComponents = data.ok.cards.map((card) => ({
-    id: card.id,
-    front: <CardFront data={card} needFetch={false} />,
+    front: <CardFront data={card} />,
     back: <CardBack data={card} />,
   }));
 
diff --git a/src/pages/study/thai.tsx b/src/pages/study/thai.tsx
new file mode 100644
index 0000000..272aecb
--- /dev/null
+++ b/src/pages/study/thai.tsx
@@ -0,0 +1,53 @@
+import { getContextData } from "waku/middleware/context";
+import { getState } from "@/lib/db";
+import { startStudySession } from "@/actions/srs";
+import StudySession from "@/components/Flashcard/StudySession";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import LessonSelector from "@/components/srs/LessonSelector";
+import type { PageProps } from "waku/router";
+import pdb from "@/lib/db/prosodydb";
+import Deck from "@/components/Flashcard/Deck3";
+import { CardFront, CardBack } from "@/components/Flashcard/ServerCard2";
+
+// This is a server component that gets the initial data
+export default async function StudyPage(props: PageProps<"/study/[slug]">) {
+  const lessonId = props.slug;
+  const ctx = getContextData() as any;
+  const userId = ctx?.user?.id;
+  const data = await getData();
+  console.log({ data });
+  const cardComponents = data.map((card) => {
+    const syls = JSON.parse(card.syllables);
+    const syllables = syls.map((s: any) => {
+      const long = s.long === 1 ? true : s.long === 0 ? false : null;
+      return { ...s, long };
+    });
+    const data = { ...card, syllables };
+    return {
+      id: card.id,
+      front: <CardFront data={data} />,
+      back: <CardBack data={data} />,
+    };
+  });
+
+  return (
+    <div className="container mx-auto py-8">
+      <Deck
+        data={{ lesson: { name: "hey", description: "hoy" } }}
+        cards={cardComponents}
+      />
+    </div>
+  );
+}
+
+const getData = async () => {
+  const res = pdb.fetchFrequent("th");
+  return res;
+};
+
+export const getConfig = async () => {
+  return {
+    render: "dynamic",
+  } as const;
+};
diff --git a/src/pages/tones.tsx b/src/pages/tones.tsx
index 1a1e908..96ed56c 100644
--- a/src/pages/tones.tsx
+++ b/src/pages/tones.tsx
@@ -1,18 +1,19 @@
-import { Suspense } from 'react';
-import { fetchWordsByToneAndSyllables } from '@/actions/tones';
-import ToneSelectorClient from '@/components/tones/ToneSelectorClient';
-import { Skeleton } from '@/components/ui/skeleton'; // For Suspense fallback
+import { Suspense } from "react";
+import { fetchWordsByToneAndSyllables } from "@/actions/tones";
+import ToneSelectorClient from "@/components/tones/ToneSelectorClient";
+import { Skeleton } from "@/components/ui/skeleton"; // For Suspense fallback
 
 export const getConfig = async () => {
   return {
-    render: 'static', // Or 'dynamic' if you prefer SSR for every request
+    render: "static", // Or 'dynamic' if you prefer SSR for every request
   };
 };
 
 // Function to fetch the initial word on the server
 async function InitialWordLoader() {
   // Fetch a random 1-syllable Thai word with any tone initially
-  const initialWord = await fetchWordsByToneAndSyllables(1, [null]);
+  const initialWord = await fetchWordsByToneAndSyllables(["rising", "mid"]);
+  console.log({ initialWord });
   return <ToneSelectorClient initialWord={initialWord} />;
 }
 
@@ -23,7 +24,7 @@ function TonePageSkeleton() {
       <div className="mb-6 p-6 border rounded-lg shadow">
         <Skeleton className="h-8 w-1/2 mb-4" />
         <Skeleton className="h-6 w-3/4 mb-6" />
-        
+
         <div className="space-y-6">
           <div>
             <Skeleton className="h-6 w-1/4 mb-2" />
@@ -45,7 +46,6 @@ function TonePageSkeleton() {
   );
 }
 
-
 export default function TonesPage() {
   return (
     <div className="py-8">
@@ -57,6 +57,6 @@ export default function TonesPage() {
 }
 
 export const metadata = {
-  title: 'Thai Tone Explorer',
-  description: 'Explore Thai words by syllable count and tones.',
+  title: "Thai Tone Explorer",
+  description: "Explore Thai words by syllable count and tones.",
 };