-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat:Added dashboard template with logout feature
- Loading branch information
1 parent
99dc19d
commit 56e3358
Showing
2 changed files
with
150 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| import { useUser } from "@/contexts/UserContext"; | ||
| import Link from "next/link"; | ||
| import { | ||
| DropdownMenu, | ||
| DropdownMenuContent, | ||
| DropdownMenuItem, | ||
| DropdownMenuSeparator, | ||
| DropdownMenuTrigger, | ||
| } from "@/components/dropdown-menu"; | ||
|
|
||
| import appwriteClient from "@/config/appwrite"; | ||
| import { Account } from "appwrite"; | ||
| import { useRouter } from "next/router"; | ||
|
|
||
| export default function Dashboard() { | ||
| const { user, session } = useUser(); | ||
| const router = useRouter(); | ||
| const logout = () => { | ||
| const account = new Account(appwriteClient); | ||
| account.deleteSession(session?.$id as string); | ||
| router.push("/auth"); | ||
| }; | ||
| return ( | ||
| <div className="antialiased bg-gray-50 dark:bg-gray-900"> | ||
| <nav className="bg-white border-b border-gray-200 px-4 py-2.5 dark:bg-gray-800 dark:border-gray-700 fixed left-0 right-0 top-0 z-50"> | ||
| <div className="flex flex-wrap justify-between items-center"> | ||
| <div className="flex justify-start items-center"> | ||
| <button | ||
| data-drawer-target="drawer-navigation" | ||
| data-drawer-toggle="drawer-navigation" | ||
| aria-controls="drawer-navigation" | ||
| className="p-2 mr-2 text-gray-600 rounded-lg cursor-pointer md:hidden hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" | ||
| > | ||
| <svg | ||
| aria-hidden="true" | ||
| className="w-6 h-6" | ||
| fill="currentColor" | ||
| viewBox="0 0 20 20" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" | ||
| clipRule="evenodd" | ||
| /> | ||
| </svg> | ||
| <svg | ||
| aria-hidden="true" | ||
| className="hidden w-6 h-6" | ||
| fill="currentColor" | ||
| viewBox="0 0 20 20" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" | ||
| clipRule="evenodd" | ||
| /> | ||
| </svg> | ||
| <span className="sr-only">Toggle sidebar</span> | ||
| </button> | ||
| <Link href="/" className="flex items-center justify-between mr-4"> | ||
| {/* <img className="mr-3 h-8" alt="Boards Logo" /> */} | ||
| <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white"> | ||
| Boards | ||
| </span> | ||
| </Link> | ||
| </div> | ||
| <div className="flex items-center lg:order-2"> | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger> | ||
| <img | ||
| className="w-8 h-8 rounded-full" | ||
| src={user?.avatar ?? ""} | ||
| alt="User photo" | ||
| /> | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent className="mr-2"> | ||
| <div className="py-3 px-4"> | ||
| <span className="block text-sm font-semibold text-gray-900 dark:text-white"> | ||
| {user?.name} | ||
| </span> | ||
| <span className="block text-sm text-gray-900 truncate dark:text-white"> | ||
| {user?.email} | ||
| </span> | ||
| </div> | ||
| <DropdownMenuSeparator /> | ||
| <ul | ||
| className="py-1 text-gray-700 dark:text-gray-300" | ||
| aria-labelledby="dropdown" | ||
| > | ||
| <li> | ||
| <Link | ||
| href="/profile" | ||
| className="block py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white" | ||
| > | ||
| My profile | ||
| </Link> | ||
| </li> | ||
| <li> | ||
| <Link | ||
| href="/account-settings" | ||
| className="block py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white" | ||
| > | ||
| Account settings | ||
| </Link> | ||
| </li> | ||
| </ul> | ||
| <DropdownMenuSeparator /> | ||
|
|
||
| <DropdownMenuItem className="py-1 text-gray-700 dark:text-gray-300"> | ||
| <button | ||
| onClick={logout} | ||
| className="w-full py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" | ||
| > | ||
| Sign out | ||
| </button> | ||
| </DropdownMenuItem> | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| <main className="p-4 h-auto pt-20"> | ||
| <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4"> | ||
| <div className="border-2 border-dashed border-gray-300 rounded-lg dark:border-gray-600 h-32 md:h-64" /> | ||
| <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64" /> | ||
| <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64" /> | ||
| <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64" /> | ||
| </div> | ||
| <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4" /> | ||
| <div className="grid grid-cols-2 gap-4 mb-4"> | ||
| <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72" /> | ||
| <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72" /> | ||
| <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72" /> | ||
| <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72" /> | ||
| </div> | ||
| <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4" /> | ||
| <div className="grid grid-cols-2 gap-4"> | ||
| <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72" /> | ||
| <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72" /> | ||
| <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72" /> | ||
| <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72" /> | ||
| </div> | ||
| </main> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,8 @@ | ||
| import Dashboard from "@/components/app/dashboard"; | ||
| import LandingPage from "@/components/pages/landing"; | ||
| import { useUser } from "@/contexts/UserContext"; | ||
|
|
||
| export default function Home() { | ||
| const { user } = useUser(); | ||
| return user ? <div>Welcome {user?.userId}</div> : <LandingPage />; | ||
| return user ? <Dashboard /> : <LandingPage />; | ||
| } |