37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import type { JSX } from "solid-js";
|
|
import { Bell } from "../../../lib/icons";
|
|
import { unreadNotificationCount } from "../data/shell.data";
|
|
import styles from "./NotificationsButton.module.scss";
|
|
|
|
type NotificationsButtonProps = {
|
|
isOpen: boolean;
|
|
menuId: string;
|
|
onToggle: () => void;
|
|
};
|
|
|
|
export const NotificationsButton = (props: NotificationsButtonProps): JSX.Element => {
|
|
const hasUnread = unreadNotificationCount > 0;
|
|
const unreadLabel = hasUnread ? `, ${unreadNotificationCount} unread` : "";
|
|
|
|
return (
|
|
<button
|
|
classList={{
|
|
[styles.button]: true,
|
|
[styles.buttonOpen]: props.isOpen,
|
|
}}
|
|
type="button"
|
|
aria-label={`${props.isOpen ? "Close" : "Open"} notifications${unreadLabel}`}
|
|
title={`${props.isOpen ? "Close" : "Open"} notifications`}
|
|
aria-haspopup="menu"
|
|
aria-controls={props.menuId}
|
|
aria-expanded={props.isOpen}
|
|
onClick={props.onToggle}
|
|
>
|
|
<span class={styles.iconWrap} aria-hidden="true">
|
|
<Bell size={18} strokeWidth={2} />
|
|
{hasUnread ? <span class={styles.badge}>{unreadNotificationCount}</span> : null}
|
|
</span>
|
|
</button>
|
|
);
|
|
};
|