diff --git a/app/account/dashboard/page.tsx b/app/account/dashboard/page.tsx new file mode 100644 index 0000000..a119cd1 --- /dev/null +++ b/app/account/dashboard/page.tsx @@ -0,0 +1,106 @@ +"use client" + +import { useState } from "react" +import { Flex, Text, Card, Progress, Grid, Box } from "@radix-ui/themes" +import { Mail, GitBranch, Music, Key, CheckCircle, XCircle } from "lucide-react" +import Sidebar from "../../components/account/Sidebar" + +export default function Dashboard() { + const [diskUsage, setDiskUsage] = useState(75) + + return ( + + + + + Dashboard + + + + + Disk Usage + + + + {diskUsage}% of 100GB used + + + + + + Account Security + + + + + Spam Protection + + + + Two-Factor Authentication + + + + + + + Services + + + + + Mail + + + + Git + + + + Music + + + + Password Manager + + + + + + + Linked Accounts + + + + + p0ntus mail + + + + LibreCloud Git + + + + + + + LibreCloud Git + + + + + + + + username + + 12 repositories + + + + + + + ) +} + diff --git a/app/account/layout.tsx b/app/account/layout.tsx new file mode 100644 index 0000000..0269fb3 --- /dev/null +++ b/app/account/layout.tsx @@ -0,0 +1,15 @@ +import { Theme } from "@radix-ui/themes" +import "@radix-ui/themes/styles.css" + +export default function AccountLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + +
{children}
+ + ) +} + diff --git a/app/account/login/page.tsx b/app/account/login/page.tsx new file mode 100644 index 0000000..53baee9 --- /dev/null +++ b/app/account/login/page.tsx @@ -0,0 +1,60 @@ +"use client" + +import Link from "next/link" +import { useState } from "react" +import { TextField, Button, Flex, Text, Card } from "@radix-ui/themes" +import { Mail, Lock } from "lucide-react" + +export default function Login() { + const [email, setEmail] = useState("") + const [password, setPassword] = useState("") + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault() + } + + return ( + + +
+ + Log in to your account + + + ) => setEmail(e.target.value)} + required + > + + + + + ) => setPassword(e.target.value)} + className="mb-3" + required + > + + + + + + + I don't have an account + + +
+ + + ) +} + diff --git a/app/account/logout/page.tsx b/app/account/logout/page.tsx new file mode 100644 index 0000000..af4976a --- /dev/null +++ b/app/account/logout/page.tsx @@ -0,0 +1,25 @@ +"use client" + +import { useEffect } from "react" +import { Flex, Text, Spinner } from "@radix-ui/themes" +import { useRouter } from "next/navigation" + +export default function Logout() { + const router = useRouter() + + useEffect(() => { + const timer = setTimeout(() => { + router.push("/account/login") + }, 5000) + + return () => clearTimeout(timer) + }, [router]) + + return ( + + + Logging out... + + ) +} + diff --git a/app/account/settings/page.tsx b/app/account/settings/page.tsx new file mode 100644 index 0000000..2f368df --- /dev/null +++ b/app/account/settings/page.tsx @@ -0,0 +1,38 @@ +"use client" + +import { useState } from "react" +import { Flex, Text, Switch, Button } from "@radix-ui/themes" +import Sidebar from "../../components/account/Sidebar" + +export default function Settings() { + const [darkMode, setDarkMode] = useState(true) + const [notifications, setNotifications] = useState(true) + + return ( + + + + + Settings + + + + Dark Mode + + + + Enable Notifications + + + + + + + + + + ) +} + diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx index 6176ccc..cd7ec4e 100644 --- a/app/components/Navbar.tsx +++ b/app/components/Navbar.tsx @@ -2,7 +2,7 @@ import { useState } from "react" import Link from "next/link" -import { Menu, X, Server, Home } from "lucide-react" +import { Menu, X, Server, Home, User } from "lucide-react" const Navbar = () => { const [isOpen, setIsOpen] = useState(false) @@ -19,17 +19,23 @@ const Navbar = () => {
Home Services + + My Account +
@@ -64,6 +70,12 @@ const Navbar = () => { > Services + + My Account +
)} diff --git a/app/components/account/Sidebar.tsx b/app/components/account/Sidebar.tsx new file mode 100644 index 0000000..a9015a6 --- /dev/null +++ b/app/components/account/Sidebar.tsx @@ -0,0 +1,38 @@ +import Link from "next/link" +import { Cog, LogOut, Gauge } from "lucide-react" +import { Flex, Card } from "@radix-ui/themes" +import { usePathname } from "next/navigation" + +const Sidebar = () => { + const pathname = usePathname() + + const navItems = [ + { href: "/account/dashboard", icon: Gauge, label: "Dashboard" }, + { href: "/account/settings", icon: Cog, label: "Settings" }, + { href: "/account/logout", icon: LogOut, label: "Logout" }, + ] + + return ( + + + {navItems.map((item) => ( + + + {item.label} + + ))} + + + ) +} + +export default Sidebar + diff --git a/app/globals.css b/app/globals.css index f102207..23284cf 100644 --- a/app/globals.css +++ b/app/globals.css @@ -69,4 +69,4 @@ body { body { @apply bg-background text-foreground; } -} +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index f95a4c9..dd0321a 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -3,6 +3,7 @@ import type { Metadata } from "next" import Head from "next/head" import { Inter } from "next/font/google" import Navbar from "../app/components/Navbar" +import "@radix-ui/themes/styles.css"; const inter = Inter({ subsets: ["latin"] }) diff --git a/bun.lockb b/bun.lockb index 9e92245..cd18a27 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 31bd513..7cf42eb 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@radix-ui/react-slot": "^1.1.1", + "@radix-ui/themes": "^3.2.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.474.0",