AmirReza Jamali
2d664795ad
This commit introduces a new "Calls" section to the main sidebar navigation to provide users with access to call logs. - Adds a new collapsible "Calls" menu item to the sidebar configuration. - Includes sub-links for "All Calls", "Incoming", "Outgoing", and "Missed" calls. - Creates new custom icons (GlobeSearch, CallIncome, CallMade, CallMissed, CallReceived) to support the new menu items. - Updates `apexcharts` and `react-apexcharts` dependencies to newer versions.
122 lines
4.0 KiB
TypeScript
122 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronUpIcon } from "@/assets/icons";
|
|
import {
|
|
Dropdown,
|
|
DropdownContent,
|
|
DropdownTrigger,
|
|
} from "@/components/ui/dropdown";
|
|
import { useUser } from "@/contexts";
|
|
import { cn } from "@/lib/utils";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { LogOutIcon, SettingsIcon, UserIcon } from "./icons";
|
|
|
|
export function UserInfo() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const { logout, user } = useUser();
|
|
|
|
return (
|
|
<Dropdown isOpen={isOpen} setIsOpen={setIsOpen}>
|
|
<DropdownTrigger className="rounded align-middle outline-none ring-primary ring-offset-2 focus-visible:ring-1 dark:ring-offset-gray-dark">
|
|
<span className="sr-only">My Account</span>
|
|
|
|
<figure className="flex items-center gap-3">
|
|
<div className="rounded-full bg-gray-3 p-3.5 dark:bg-dark-3">
|
|
<UserIcon />
|
|
</div>
|
|
|
|
<figcaption className="flex items-center gap-1 font-medium text-dark dark:text-dark-6 max-[1024px]:sr-only">
|
|
<span>{user?.full_name}</span>
|
|
|
|
<ChevronUpIcon
|
|
aria-hidden
|
|
className={cn(
|
|
"rotate-180 transition-transform",
|
|
isOpen && "rotate-0",
|
|
)}
|
|
strokeWidth={1.5}
|
|
/>
|
|
</figcaption>
|
|
</figure>
|
|
</DropdownTrigger>
|
|
|
|
<DropdownContent
|
|
className="border border-stroke bg-white shadow-md dark:border-dark-3 dark:bg-gray-dark min-[230px]:min-w-[17.5rem]"
|
|
align="end"
|
|
>
|
|
<h2 className="sr-only">User information</h2>
|
|
|
|
<figure className="flex items-center gap-2.5 px-5 py-3.5">
|
|
{user?.profile_image ? (
|
|
<Image
|
|
src={user.profile_image}
|
|
className="size-12"
|
|
alt={`Avatar for ${user.full_name}`}
|
|
role="presentation"
|
|
width={200}
|
|
height={200}
|
|
/>
|
|
) : (
|
|
<div className="rounded-full bg-gray-3 p-4 dark:bg-gray-7">
|
|
<UserIcon width={30} height={30} />
|
|
</div>
|
|
)}
|
|
|
|
<figcaption className="space-y-1 text-base font-medium">
|
|
<div className="mb-2 leading-none text-dark dark:text-white">
|
|
{user?.full_name}
|
|
</div>
|
|
|
|
<div className="leading-none text-gray-6">{user?.email}</div>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<hr className="border-[#E8E8E8] dark:border-dark-3" />
|
|
|
|
<div className="p-2 text-base text-[#4B5563] dark:text-dark-6 [&>*]:cursor-pointer">
|
|
<Link
|
|
href={"/profile"}
|
|
onClick={() => setIsOpen(false)}
|
|
className="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-[9px] hover:bg-gray-2 hover:text-dark dark:hover:bg-dark-3 dark:hover:text-white"
|
|
>
|
|
<UserIcon />
|
|
|
|
<span className="mr-auto text-base font-medium">View profile</span>
|
|
</Link>
|
|
|
|
<Link
|
|
href={"/pages/settings"}
|
|
onClick={() => setIsOpen(false)}
|
|
className="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-[9px] hover:bg-gray-2 hover:text-dark dark:hover:bg-dark-3 dark:hover:text-white"
|
|
>
|
|
<SettingsIcon />
|
|
|
|
<span className="mr-auto text-base font-medium">
|
|
Account Settings
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<hr className="border-[#E8E8E8] dark:border-dark-3" />
|
|
|
|
<div className="p-2 text-base text-[#4B5563] dark:text-dark-6">
|
|
<button
|
|
className="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-[9px] hover:bg-gray-2 hover:text-dark dark:hover:bg-dark-3 dark:hover:text-white"
|
|
onClick={() => {
|
|
setIsOpen(false);
|
|
logout();
|
|
|
|
}}
|
|
>
|
|
<LogOutIcon />
|
|
|
|
<span className="text-base font-medium">Log out</span>
|
|
</button>
|
|
</div>
|
|
</DropdownContent>
|
|
</Dropdown>
|
|
);
|
|
}
|