-
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.
Merge pull request #9 from jaideepghosh/feat/profile
Added profile page
- Loading branch information
Showing
3 changed files
with
177 additions
and
107 deletions.
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
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,123 @@ | ||
| import { | ||
| DropdownMenu, | ||
| DropdownMenuTrigger, | ||
| DropdownMenuContent, | ||
| DropdownMenuSeparator, | ||
| DropdownMenuItem, | ||
| } from "@/components/dropdown-menu"; | ||
| import { useUser } from "@/contexts/UserContext"; | ||
| import Link from "next/link"; | ||
| import appwriteClient from "@/config/appwrite"; | ||
| import { Account } from "appwrite"; | ||
| import { useRouter } from "next/router"; | ||
|
|
||
| export default function Header() { | ||
| const { user, session } = useUser(); | ||
| const router = useRouter(); | ||
| const logout = () => { | ||
| const account = new Account(appwriteClient); | ||
| account.deleteSession(session?.$id as string); | ||
| router.push("/auth"); | ||
| }; | ||
| return ( | ||
| <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> | ||
| ); | ||
| } |
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,52 @@ | ||
| import Header from "@/components/app/header"; | ||
| import { useUser } from "@/contexts/UserContext"; | ||
|
|
||
| export default function ProfilePage() { | ||
| const { user, session } = useUser(); | ||
|
|
||
| return ( | ||
| <div className="antialiased bg-light dark:bg-gray-900"> | ||
| <Header /> | ||
| <main className="p-4 h-auto pt-20"> | ||
| <div className="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 mx-auto"> | ||
| <div className="flex flex-col items-center pb-10 pt-4"> | ||
| <img | ||
| className="w-24 h-24 mb-3 rounded-full shadow-lg" | ||
| src={user?.avatar ?? ""} | ||
| alt={user?.name} | ||
| /> | ||
| <h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white"> | ||
| {user?.name} | ||
| </h5> | ||
| <span className="text-sm text-gray-500 dark:text-gray-400"> | ||
| {user?.email} | ||
| </span> | ||
| <span className="text-sm text-gray-500 dark:text-gray-400"> | ||
| {session?.countryName} | ||
| </span> | ||
| <span className="text-sm text-primary dark:text-gray-400"> | ||
| Member Since{" "} | ||
| <span className="font-bold"> | ||
| {new Date(session?.$createdAt ?? "").toDateString()} | ||
| </span> | ||
| </span> | ||
| {/* <div className="flex mt-4 md:mt-6"> | ||
| <a | ||
| href="#" | ||
| className="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" | ||
| > | ||
| Add friend | ||
| </a> | ||
| <a | ||
| href="#" | ||
| className="py-2 px-4 ms-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700" | ||
| > | ||
| Message | ||
| </a> | ||
| </div> */} | ||
| </div> | ||
| </div> | ||
| </main> | ||
| </div> | ||
| ); | ||
| } |