diff --git a/client/src/components/ui/button_go_user_settings.tsx b/client/src/components/ui/button_go_user_settings.tsx new file mode 100644 index 0000000..76be3db --- /dev/null +++ b/client/src/components/ui/button_go_user_settings.tsx @@ -0,0 +1,21 @@ +import Link from "next/link"; + +export default function ButtonGoUserSettings() { + return ( + + + + ); +} diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx index 9b01b3e..d0d7c65 100644 --- a/client/src/pages/index.tsx +++ b/client/src/pages/index.tsx @@ -4,6 +4,7 @@ import ButtonGoOrganizationDashboard from "../components/ui/button_go_organization_dashboard"; import ButtonGoUserDashboard from "../components/ui/button_go_user_dashboard"; import ButtonGoUserProfilePage from "../components/ui/button_go_user_profile_page"; +import ButtonGoUserSettings from "../components/ui/button_go_user_settings"; // this is a react functional component // it returns a html element that will render the jsx inside it @@ -30,6 +31,7 @@ const LandingPage = () => { + ); }; diff --git a/client/src/pages/user_settings.tsx b/client/src/pages/user_settings.tsx new file mode 100644 index 0000000..0ac702c --- /dev/null +++ b/client/src/pages/user_settings.tsx @@ -0,0 +1,300 @@ +import Head from "next/head"; +import { useState } from "react"; + +import Navbar from "../components/ui/user_navbar"; + +export default function UserSettings() { + const [activeTab, setActiveTab] = useState< + "profile" | "security" | "notifications" + >("profile"); + return ( + <> + + User Settings + + + + +
+ {/* Main container */} +
+ {/* Sidebar */} +
+
setActiveTab("profile")} + style={{ + cursor: "pointer", + fontWeight: activeTab === "profile" ? "bold" : "normal", + }} + > + Profile +
+ +
setActiveTab("notifications")} + style={{ + cursor: "pointer", + fontWeight: activeTab === "notifications" ? "bold" : "normal", + }} + > + Notifications +
+ +
setActiveTab("security")} + style={{ + cursor: "pointer", + fontWeight: activeTab === "security" ? "bold" : "normal", + }} + > + Security +
+
+ + {/* Content */} +
+ {activeTab === "profile" && } + {activeTab === "security" && } + {activeTab === "notifications" && } +
+
+
+ + ); +} + +function FormRow({ children }: { children: React.ReactNode }) { + return ( +
+ {children} +
+ ); +} + +function Input({ + placeholder, + full = false, +}: { + placeholder: string; + full?: boolean; +}) { + return ( + + ); +} + +function ProfileTab() { + return ( + <> + {/* Avatar */} +
+
+ U +
+ +
+

New User

+

+ Member since December 2025 +

+
+
+ + {/* Form */} +
+ + + + + + + + + + +
+ +
+ +
+ +
+ + +
+ + ); +} + +function SecurityTab() { + return ( +
+

Password

+ +
+ +
+ +
+ +
+ +
+ +
+ +

+ At least 8 characters +

+ + +
+ ); +} + +function NotificationsTab() { + return ( +
+

Notifications

+ +
+ + +
+ Email +
+ +
+ Mobile +
+
+ + {["Inbox messages", "Order messages", "Promotions", "Updates"].map( + (label) => ( +
+ {label} + + +
+ ), + )} +
+ ); +} + +const inputStyle: React.CSSProperties = { + width: "100%", + padding: "14px 16px", + borderRadius: "12px", + border: "none", + backgroundColor: "#f2f2f2", + fontSize: "16px", +}; + +const primaryButtonStyle: React.CSSProperties = { + width: "100%", + padding: "16px", + borderRadius: "12px", + border: "none", + backgroundColor: "#e6e6e6", + cursor: "pointer", + fontSize: "16px", +}; + +const notificationHeaderStyle: React.CSSProperties = { + display: "grid", + gridTemplateColumns: "1fr 80px 80px", + paddingBottom: "8px", + borderBottom: "1px solid #ccc", + marginBottom: "12px", +}; + +const notificationRowStyle: React.CSSProperties = { + display: "grid", + gridTemplateColumns: "1fr 80px 80px", + alignItems: "center", + padding: "12px 0", + borderBottom: "1px solid #eee", +};