94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
import React, { useState } from "react";
|
|
import NavLink from "@/Element/Button/NavLink";
|
|
import useLogin from "@/Hooks/useLogin";
|
|
import Icon from "@/Icons/Icon";
|
|
import { ProfileLink } from "@/Element/User/ProfileLink";
|
|
import { NoteCreatorButton } from "@/Element/Event/Create/NoteCreatorButton";
|
|
import classNames from "classnames";
|
|
import { useUserProfile } from "@snort/system-react";
|
|
import Avatar from "@/Element/User/Avatar";
|
|
import { useIntl } from "react-intl";
|
|
|
|
type MenuItem = {
|
|
label?: string;
|
|
icon?: string;
|
|
link?: string;
|
|
nonLoggedIn?: boolean;
|
|
el?: React.ReactNode;
|
|
hideReadOnly?: boolean;
|
|
};
|
|
|
|
const MENU_ITEMS: MenuItem[] = [
|
|
{ link: "/", icon: "home" },
|
|
{ link: "/messages", icon: "mail", hideReadOnly: true },
|
|
{
|
|
el: (
|
|
<div className="flex flex-grow items-center justify-center">
|
|
<NoteCreatorButton alwaysShow={true} />
|
|
</div>
|
|
),
|
|
hideReadOnly: true,
|
|
},
|
|
{ link: "/search", icon: "search" },
|
|
];
|
|
|
|
const Footer = () => {
|
|
const { publicKey, readonly } = useLogin(s => ({
|
|
publicKey: s.publicKey,
|
|
readonly: s.readonly,
|
|
}));
|
|
const profile = useUserProfile(publicKey);
|
|
const { formatMessage } = useIntl();
|
|
|
|
const readOnlyIcon = readonly && (
|
|
<span style={{ transform: "rotate(135deg)" }} title={formatMessage({ defaultMessage: "Read-only", id: "djNL6D" })}>
|
|
<Icon name="openeye" className="text-nostr-red" size={20} />
|
|
</span>
|
|
);
|
|
|
|
return (
|
|
<footer className="md:hidden fixed bottom-0 z-10 w-full bg-base-200 pb-safe-area bg-bg-color">
|
|
<div className="flex">
|
|
{MENU_ITEMS.map(item => (
|
|
<FooterNavItem item={item} readonly={readonly} />
|
|
))}
|
|
{publicKey && (
|
|
<ProfileLink
|
|
className="flex flex-grow p-2 justify-center items-center cursor-pointer"
|
|
pubkey={publicKey}
|
|
user={profile}>
|
|
<Avatar pubkey={publicKey} user={profile} icons={readOnlyIcon} size={40} />
|
|
</ProfileLink>
|
|
)}
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
const FooterNavItem = ({ item, readonly }: { item: MenuItem; readonly: boolean }) => {
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
|
|
if (readonly && item.hideReadOnly) {
|
|
return null;
|
|
}
|
|
|
|
if (item.el) {
|
|
return item.el;
|
|
}
|
|
|
|
return (
|
|
<NavLink
|
|
to={item.link ?? "/"}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
className={({ isActive }) =>
|
|
classNames({ active: isActive || isHovered }, "flex flex-grow p-4 justify-center items-center cursor-pointer")
|
|
}>
|
|
<Icon name={`${item.icon}-solid`} className="icon-solid" size={24} />
|
|
<Icon name={`${item.icon}-outline`} className="icon-outline" size={24} />
|
|
</NavLink>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|