85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import clsx from "clsx";
|
|
|
|
import { Badge, Button, Icon, IconName, Typography } from "@/components/ui";
|
|
import { useChats } from "@/providers/chats-provider";
|
|
import { ROUTES } from "@/shared/constants/client-routes";
|
|
|
|
import { useDrawer } from "..";
|
|
import Logo from "../Logo/Logo";
|
|
|
|
import styles from "./Header.module.scss";
|
|
|
|
interface HeaderProps {
|
|
className?: string;
|
|
isVisibleMenuButton?: boolean;
|
|
isVisibleNotificationIcon?: boolean;
|
|
isVisibleSearchIcon?: boolean;
|
|
isVisibleBackButton?: boolean;
|
|
}
|
|
|
|
export default function Header({
|
|
className,
|
|
isVisibleMenuButton = true,
|
|
isVisibleNotificationIcon = true,
|
|
isVisibleSearchIcon = true,
|
|
isVisibleBackButton = false,
|
|
}: HeaderProps) {
|
|
const { open } = useDrawer();
|
|
const { totalUnreadCount } = useChats();
|
|
const router = useRouter();
|
|
|
|
const handleBack = () => {
|
|
router.back();
|
|
};
|
|
|
|
return (
|
|
<header className={clsx(styles.header, className)}>
|
|
<div>
|
|
{isVisibleBackButton && (
|
|
<Button className={styles.backButton} onClick={handleBack}>
|
|
<Icon
|
|
name={IconName.ChevronLeft}
|
|
size={{ height: 22, width: 22 }}
|
|
color="#374151"
|
|
/>
|
|
</Button>
|
|
)}
|
|
{isVisibleMenuButton && (
|
|
<Button className={styles.menuButton} onClick={open}>
|
|
<Icon name={IconName.Menu} />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<Link href={ROUTES.home()}>
|
|
<Logo />
|
|
</Link>
|
|
<div>
|
|
<Link href={ROUTES.chat()}>
|
|
{isVisibleNotificationIcon && (
|
|
<Icon
|
|
name={IconName.Notification}
|
|
className={styles.notificationIcon}
|
|
>
|
|
<Badge className={styles.badge}>
|
|
<Typography
|
|
weight="semiBold"
|
|
size="xs"
|
|
color="white"
|
|
className={styles.badgeContent}
|
|
>
|
|
{totalUnreadCount > 99 ? "99+" : totalUnreadCount}
|
|
</Typography>
|
|
</Badge>
|
|
</Icon>
|
|
)}
|
|
</Link>
|
|
{isVisibleSearchIcon && <Icon name={IconName.Search} />}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|