feat: added basic pages

src/app/courses/course-selection.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { type FormEvent, useState } from "react";
+
+export default function CourseSelection() {
+  const [selectedLanguage, setSelectedLanguage] = useState("");
+
+  const handleLanguageChange = (
+    event: React.ChangeEvent<HTMLSelectElement>,
+  ) => {
+    setSelectedLanguage(event.target.value);
+  };
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    // Handle form submission logic here, e.g., send selectedLanguage to the server
+    console.log("Selected language:", selectedLanguage);
+  };
+
+  return (
+    <form className="flex flex-col gap-y-2" onSubmit={handleSubmit}>
+      <label htmlFor="course-select">Select a language:</label>
+      <select
+        id="course-select"
+        name="course"
+        value={selectedLanguage}
+        onChange={handleLanguageChange}
+        className="border"
+      >
+        <option value="">Select...</option>
+        <option value="Japanese">Japanese 🇯🇵</option>
+        <option value="French">French 🇫🇷</option>
+      </select>
+      <button type="submit" className="border">
+        Submit
+      </button>
+    </form>
+  );
+}

src/app/courses/page.tsx

@@ -0,0 +1,11 @@
+import CourseSelection from "~/app/courses/course-selection";
+
+export default async function Course() {
+  return (
+    <main className="">
+      <h1 className="text-2xl font-bold">Course</h1>
+      <h2 className="text-lg font-medium">Available languages</h2>
+      <CourseSelection />
+    </main>
+  );
+}

src/app/home/page.tsx

@@ -0,0 +1,7 @@
+export default async function Home() {
+  return (
+    <main className="">
+      <h1 className="text-2xl font-bold">Home</h1>
+    </main>
+  );
+}

src/app/lesson/page.tsx

@@ -0,0 +1,7 @@
+export default async function Lesson() {
+  return (
+    <main className="">
+      <h1 className="text-2xl font-bold">Lesson</h1>
+    </main>
+  );
+}

src/app/page.tsx

@@ -1,7 +1,7 @@
 export default async function Landing() {
   return (
     <main className="">
-      <h1>Landing</h1>
+      <h1 className="text-2xl font-bold">Landing</h1>
     </main>
   );
 }

src/app/practice/page.tsx

@@ -0,0 +1,7 @@
+export default async function Practice() {
+  return (
+    <main className="">
+      <h1 className="text-2xl font-bold">Practice</h1>
+    </main>
+  );
+}

src/app/profile/[username]/page.tsx

@@ -0,0 +1,12 @@
+import { currentUser } from "@clerk/nextjs";
+
+export default async function Profile() {
+  const user = await currentUser();
+
+  return (
+    <main className="">
+      <h1 className="text-2xl font-bold">Profile</h1>
+      <pre>{JSON.stringify(user, undefined, 2)}</pre>
+    </main>
+  );
+}

src/app/profile/page.tsx

@@ -0,0 +1,12 @@
+import { currentUser } from "@clerk/nextjs";
+
+export default async function Profile() {
+  const user = await currentUser();
+
+  return (
+    <main className="">
+      <h1 className="text-2xl font-bold">Profile</h1>
+      <pre>{JSON.stringify(user, undefined, 2)}</pre>
+    </main>
+  );
+}

src/app/settings/page.tsx

@@ -0,0 +1,7 @@
+export default async function Settings() {
+  return (
+    <main className="">
+      <h1 className="text-2xl font-bold">Settings</h1>
+    </main>
+  );
+}