3 files changed, 74 insertions, 51 deletions

diff --git a/src/pages/api/nlp.ts b/src/pages/api/nlp.ts
index 27c330d..0e5eacb 100644
--- a/src/pages/api/nlp.ts
+++ b/src/pages/api/nlp.ts
@@ -30,41 +30,3 @@ export const POST = async (request: Request): Promise<Response> => {
     return Response.json({ message: "Failure" }, { status: 500 });
   }
 };
-
-type AnalyzeRes = {
-  word: string;
-  syllables: string[];
-  ipa: string;
-  pos: string;
-};
-
-export async function thaiData(word: string): Promise<AnalyzeRes[]> {
-  const [head, tail] = await Promise.all([
-    analyzeTHWord(word),
-    segmentateThai(word),
-  ]);
-  return [head, ...tail];
-}
-
-export async function analyzeTHWord(word: string): Promise<AnalyzeRes> {
-  const opts = {
-    method: "POST",
-    headers: { "Content-type": "application/json" },
-    body: JSON.stringify({ word }),
-  };
-  const r1 = await fetch("http://localhost:8001" + "/analyze", opts);
-  // const r2 = await fetch(`http://192.168.1.110:8000/analyze`, opts);
-  const jj = await r1.json();
-  return jj;
-}
-export async function segmentateThai(sentence: string): Promise<AnalyzeRes[]> {
-  const opts = {
-    method: "POST",
-    headers: { "Content-type": "application/json" },
-    body: JSON.stringify({ word: sentence }),
-  };
-  // const r1 = await fetch(`http://localhost:8000/segmentate`, opts);
-  const r2 = await fetch("http://localhost:8001" + `/segmentate`, opts);
-  const jj = await r2.json();
-  return jj;
-}
diff --git a/src/pages/lesson/[slug].tsx b/src/pages/lesson/[slug].tsx
index 9078958..991859b 100644
--- a/src/pages/lesson/[slug].tsx
+++ b/src/pages/lesson/[slug].tsx
@@ -21,24 +21,23 @@ const flags: Record<string, string> = {
 };
 
 export default async function HomePage(props: PageProps<"/lesson/[slug]">) {
-  const hctx: any = getHonoContext();
-  console.log({ hctx });
-  const ctx = getContext();
-  console.log(ctx.req.headers, "heders");
-  hctx.set("lol", "lmao");
-  const cokis = useCookies();
-  const coki = cokis.getCookie("sorlang");
-  console.log({ coki });
-  console.log({ props });
-  // const { user } = getContextData() as any;
-  // console.log({ user });
+  // const hctx: any = getHonoContext();
+  // console.log({ hctx });
+  // const ctx = getContext();
+  // console.log(ctx.req.headers, "heders");
+  // hctx.set("lol", "lmao");
+  // const cokis = useCookies();
+  // const coki = cokis.getCookie("sorlang");
+  // console.log({ coki });
+  // console.log({ props });
+  // // const { user } = getContextData() as any;
+  // // console.log({ user });
   const user = { id: 2 };
   const data = await getData(Number(props.slug), user.id);
   if ("error" in data) return <p>Error</p>;
-  // console.log({ data });
   const cardComponents = data.ok.cards.map((card) => ({
     id: card.id,
-    front: <CardFront data={card} />,
+    front: <CardFront data={card} needFetch={false} />,
     back: <CardBack data={card} />,
   }));
 
diff --git a/src/pages/tones.tsx b/src/pages/tones.tsx
new file mode 100644
index 0000000..1a1e908
--- /dev/null
+++ b/src/pages/tones.tsx
@@ -0,0 +1,62 @@
+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
+  };
+};
+
+// 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]);
+  return <ToneSelectorClient initialWord={initialWord} />;
+}
+
+// Loading fallback component
+function TonePageSkeleton() {
+  return (
+    <div className="container mx-auto p-4 max-w-2xl">
+      <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" />
+            <Skeleton className="h-10 w-full md:w-1/2" />
+          </div>
+          <div>
+            <Skeleton className="h-6 w-1/4 mb-2" />
+            <Skeleton className="h-10 w-full md:w-1/2" />
+          </div>
+        </div>
+        <Skeleton className="h-10 w-full md:w-1/4 mt-6" />
+      </div>
+      <div className="p-6 border rounded-lg shadow">
+        <Skeleton className="h-8 w-1/3 mx-auto mb-4" />
+        <Skeleton className="h-24 w-3/4 mx-auto mb-4" />
+        <Skeleton className="h-6 w-1/2 mx-auto" />
+      </div>
+    </div>
+  );
+}
+
+
+export default function TonesPage() {
+  return (
+    <div className="py-8">
+      <Suspense fallback={<TonePageSkeleton />}>
+        <InitialWordLoader />
+      </Suspense>
+    </div>
+  );
+}
+
+export const metadata = {
+  title: 'Thai Tone Explorer',
+  description: 'Explore Thai words by syllable count and tones.',
+};