From e839a5f61f0faa21ca8b4bd5767f7575d5e576ee Mon Sep 17 00:00:00 2001 From: polwex Date: Wed, 21 May 2025 14:00:28 +0700 Subject: the card flip animation is legit --- src/pages/index.tsx | 106 +++++++++++++++++++++++++++++++++++-- src/pages/lang/[slug].tsx | 74 ++++++++++++++++++++++++++ src/pages/lesson/[slug].tsx | 66 +++++++++++++++++++++++ src/pages/login.tsx | 29 +++------- src/pages/logintest/Form.tsx | 53 +++++++++++++++++++ src/pages/logintest/ServerForm.tsx | 67 +++++++++++++++++++++++ src/pages/logintest/funcs.ts | 24 +++++++++ src/pages/logintest/index.tsx | 24 +++++++++ src/pages/parse.tsx | 26 +++++++++ 9 files changed, 445 insertions(+), 24 deletions(-) create mode 100644 src/pages/lang/[slug].tsx create mode 100644 src/pages/lesson/[slug].tsx create mode 100644 src/pages/logintest/Form.tsx create mode 100644 src/pages/logintest/ServerForm.tsx create mode 100644 src/pages/logintest/funcs.ts create mode 100644 src/pages/logintest/index.tsx create mode 100644 src/pages/parse.tsx (limited to 'src/pages') diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 82ffd99..48fa46e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,13 +1,62 @@ import { Link } from "waku"; -import { Counter } from "../components/counter"; +import { Progress } from "@/components/ui/progress"; import { getContextData } from "waku/middleware/context"; -import Main from "../components/Main"; + +type LanguageChoice = "th" | "en" | "zh" | "ja" | "es" | "fr"; +type LangMeta = { flag: string; name: string }; +const langs: Record = { + 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
; + return ( +
+
+
+
+
+

Prosody

+
+ + {/* Desktop Navigation */} + +
+
+ + {/* Mobile Navigation */} +
+
+

Your Languages

+ + + + +
+
+ ); } const getData = async () => { @@ -25,3 +74,54 @@ export const getConfig = async () => { render: "dynamic", } as const; }; + +async function LanguageItem({ lang }: { lang: LanguageChoice }) { + return ( + +
+
+
+
{langs[lang].flag}
+
{langs[lang].name}
+
+ +
+
+ + ); +} +{ + /* Language Cards */ +} +//
+// {languages.slice(0, 3).map((lang) => ( +//
+//
+//
+//
+// {lang.flag} +//

{lang.name}

+//
+// +// Beginner +// +//
+//
+//
+//
+//
+//
40% Complete
+//
+// +//
+//
+// ))} +//
; 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 = { + 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 ( + <> +
+

Thai!

+ {lessons.map((l) => ( + + + + +

{l.name}

+ + +

{l.description}

+ + + + + + + + ))} +
+ + ); +} + +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 ( +
+
{flags[lang] || ""}
+
+ ); +} diff --git a/src/pages/lesson/[slug].tsx b/src/pages/lesson/[slug].tsx new file mode 100644 index 0000000..6632838 --- /dev/null +++ b/src/pages/lesson/[slug].tsx @@ -0,0 +1,66 @@ +import { getHonoContext } from "waku/unstable_hono"; +import { Button } from "@/components/ui/button"; +import { Link } from "waku"; + +import { getContext, getContextData } from "waku/middleware/context"; +import * as WServer from "waku/server"; +import type { PageProps } from "waku/router"; +import db from "@/lib/db"; +import { useCookies } from "@/lib/server/cookiebridge"; +import Deck from "@/components/Flashcard/Deck"; + +const flags: Record = { + th: "🇹🇭", + en: "🇬🇧", + zh: "🇨🇳", + ja: "🇯🇵", + es: "🇪🇸", + fr: "🇫🇷", +}; + +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 user = { id: 2 }; + const data = await getData(Number(props.slug), user.id); + if ("error" in data) return

Error

; + // console.log({ data }); + + return ( + <> +
+

Thai!

+ +
+ + ); +} + +const getData = async (lesson: number, userId: number) => { + const lessons = db.fetchLesson(userId, lesson); + + return lessons; +}; + +export const getConfig = async () => { + return { + render: "dynamic", + } as const; +}; + +async function LanguageItem({ lang }: { lang: string }) { + return ( +
+
{flags[lang] || ""}
+
+ ); +} diff --git a/src/pages/login.tsx b/src/pages/login.tsx index 13d3bd4..d70d365 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -1,31 +1,18 @@ import AuthScreen from "@/components/Login2"; import ProfileScreen from "@/components/Profile"; -import { Link } from "waku"; -import db from "@/lib/db"; import { getContextData } from "waku/middleware/context"; export default async function AuthPage() { const ctx = getContextData(); - console.log({ ctx }); - const data = await getData(); - if (ctx.user) return ; - else - return ( -
- -
- ); + // console.log({ ctx }); + // if (ctx.user) return ; + // else + return ( +
+ +
+ ); } - -const getData = async () => { - // const data = { - // title: "Waku", - // headline: "Waku", - // body: "Hello world!", - // }; - // return data; -}; - export const getConfig = async () => { return { render: "static", diff --git a/src/pages/logintest/Form.tsx b/src/pages/logintest/Form.tsx new file mode 100644 index 0000000..a593acb --- /dev/null +++ b/src/pages/logintest/Form.tsx @@ -0,0 +1,53 @@ +"use client"; + +import { useFormStatus } from "react-dom"; + +const SubmitButton = () => { + const { pending } = useFormStatus(); + return ( + <> + + + ); +}; + +export const Form = ({ + message, + greet, +}: { + message: Promise; + greet: (formData: FormData) => Promise; +}) => ( +
+

{message}

+
+
+
+ Name:{" "} + +
+
+ Email:{" "} + +
+ +
+
+

This is a client component.

+
+); diff --git a/src/pages/logintest/ServerForm.tsx b/src/pages/logintest/ServerForm.tsx new file mode 100644 index 0000000..8e629b8 --- /dev/null +++ b/src/pages/logintest/ServerForm.tsx @@ -0,0 +1,67 @@ +async function submitUserProfile(formData: FormData) { + "use server"; + const name = formData.get("name"); + const age = formData.get("age"); + const favoriteColor = formData.get("favoriteColor"); + const hobby = formData.get("hobby"); + const isSubscribed = formData.get("newsletter") === "on"; + + console.log({ + name, + age, + favoriteColor, + hobby, + isSubscribed, + }); +} + +export const ServerForm = () => { + return ( +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + +
+ ); +}; diff --git a/src/pages/logintest/funcs.ts b/src/pages/logintest/funcs.ts new file mode 100644 index 0000000..4ffd5ef --- /dev/null +++ b/src/pages/logintest/funcs.ts @@ -0,0 +1,24 @@ +import { readFile, writeFile } from "node:fs/promises"; +import { unstable_rerenderRoute } from "waku/router/server"; + +export const getMessage = async () => { + const data = await readFile("./message.txt", "utf8"); + return data; +}; + +export const greet = async (formData: FormData) => { + "use server"; + // simulate a slow server response + await new Promise((resolve) => setTimeout(resolve, 1000)); + const currentData = await getMessage(); + await writeFile( + "./message.txt", + currentData + "\n" + formData.get("name") + " from server!", + ); + unstable_rerenderRoute("/"); +}; + +export const increment = async (count: number) => { + "use server"; + return count + 1; +}; diff --git a/src/pages/logintest/index.tsx b/src/pages/logintest/index.tsx new file mode 100644 index 0000000..df8bc08 --- /dev/null +++ b/src/pages/logintest/index.tsx @@ -0,0 +1,24 @@ +import { Form } from "./Form"; +import { getMessage, greet } from "./funcs"; +import { ServerForm } from "./ServerForm"; + +export default function HomePage() { + return ( +
+
+

Server Form

+ +
+
+

Client Form

+
+
+
+ ); +} + +export const getConfig = async () => { + return { + render: "dynamic", + } as const; +}; diff --git a/src/pages/parse.tsx b/src/pages/parse.tsx new file mode 100644 index 0000000..8c0f793 --- /dev/null +++ b/src/pages/parse.tsx @@ -0,0 +1,26 @@ +import { Link } from "waku"; + +import { getContextData } from "waku/middleware/context"; +import ParseForm from "@/components/ParseForm"; + +export default async function HomePage() { + const { user } = getContextData(); + + return ; +} + +const getData = async () => { + const data = { + title: "Waku", + headline: "Waku", + body: "Hello world!", + }; + + return data; +}; + +export const getConfig = async () => { + return { + render: "dynamic", + } as const; +}; -- cgit v1.2.3