1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
import { Link } from "waku";
import { Progress } from "@/components/ui/progress";
import { getContextData } from "waku/middleware/context";
type LanguageChoice = "th" | "en" | "zh" | "ja" | "es" | "fr";
type LangMeta = { flag: string; name: string };
const langs: Record<LanguageChoice, LangMeta> = {
th: { flag: "🇹🇭", name: "Thai" },
en: { flag: "🇬🇧", name: "English" },
zh: { flag: "🇨🇳", name: "Chinese" },
ja: { flag: "🇯🇵", name: "Japanese" },
es: { flag: "🇪🇸", name: "Spanish" },
fr: { flag: "🇫🇷", name: "French" },
};
export default async function HomePage() {
const { user } = getContextData();
return (
<div className="min-h-screen bg-gray-50">
<header className="bg-white shadow-sm sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
<div className="flex items-center">
<h1 className="text-2xl font-bold text-indigo-600">Prosody</h1>
</div>
{/* Desktop Navigation */}
<nav className="hidden md:flex space-x-8">
<Link to="/">
<button
className={`py-2 font-medium text-indigo-600 border-b-2 border-indigo-600`}
>
Home
</button>
</Link>
<Link to="/parse">
<button
className={`py-2 font-medium text-gray-600 hover:text-indigo-600`}
>
Analyze Text
</button>
</Link>
</nav>
</div>
</div>
{/* Mobile Navigation */}
</header>
<section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<h2 className="text-lg"> Your Languages</h2>
<LanguageItem lang="en" />
<LanguageItem lang="th" />
<LanguageItem lang="zh" />
<LanguageItem lang="ja" />
</section>
</div>
);
}
const getData = async () => {
const data = {
title: "Waku",
headline: "Waku",
body: "Hello world!",
};
return data;
};
export const getConfig = async () => {
return {
render: "dynamic",
} as const;
};
async function LanguageItem({ lang }: { lang: LanguageChoice }) {
return (
<Link to={`/lang/${lang}`}>
<div className="bg-white rounded-xl h-32 shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300">
<div className="p-6">
<div className="flex">
<div className="text-lg">{langs[lang].flag}</div>
<div className="text-lg">{langs[lang].name}</div>
</div>
<Progress value={50} className="w-[60%]" />
</div>
</div>
</Link>
);
}
{
/* Language Cards */
}
// <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
// {languages.slice(0, 3).map((lang) => (
// <div
// key={lang.id}
// className="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300"
// >
// <div className="p-6">
// <div className="flex items-center justify-between mb-4">
// <div className="flex items-center">
// <span className="text-3xl mr-3">{lang.flag}</span>
// <h3 className="text-xl font-semibold">{lang.name}</h3>
// </div>
// <span className="text-xs font-semibold bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">
// Beginner
// </span>
// </div>
// <div className="mb-4">
// <div className="w-full bg-gray-200 rounded-full h-2.5 mb-1">
// <div
// className="bg-indigo-600 h-2.5 rounded-full"
// style={{ width: "40%" }}
// ></div>
// </div>
// <div className="text-right text-sm text-gray-500">40% Complete</div>
// </div>
// <button className="w-full py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors duration-300">
// Continue Learning
// </button>
// </div>
// </div>
// ))}
// </div>;
|
