1 files changed, 62 insertions, 0 deletions
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.',
+};