119 lines
3.7 KiB
TypeScript
119 lines
3.7 KiB
TypeScript
import { Fragment, useRef, useState } from 'react';
|
|
import {
|
|
Menu,
|
|
MenuIcon,
|
|
MenuItem,
|
|
MenuLabel,
|
|
MenuSub,
|
|
MenuTitle,
|
|
MenuToggle
|
|
} from '@/components/menu';
|
|
import { KeenIcon } from '@/components/keenicons';
|
|
import { useLanguage } from '@/i18n';
|
|
import { ModalShareProfile } from '../modals/share-profile';
|
|
import { ModalGiveAward } from '../modals/give-award';
|
|
import { ModalReportUser } from '../modals/report-user';
|
|
import { Dialog, DialogTrigger } from '@/components/ui/dialog';
|
|
|
|
const NavbarDropdown = () => {
|
|
const itemRef = useRef<any>(null);
|
|
const { isRTL } = useLanguage();
|
|
|
|
const [ShareProfileModalOpen, setShareProfileModalOpen] = useState(false);
|
|
const handleSettingsModalOpen = () => {
|
|
setShareProfileModalOpen(true);
|
|
itemRef.current?.hide();
|
|
};
|
|
const handleShareProfileModalClose = () => {
|
|
setShareProfileModalOpen(false);
|
|
};
|
|
|
|
const [giveAwardModalOpen, setGiveAwardModalOpen] = useState(false);
|
|
const handleGiveAwardModalOpen = () => {
|
|
setGiveAwardModalOpen(true);
|
|
itemRef.current?.hide();
|
|
};
|
|
const handleGiveAwardModalClose = () => {
|
|
setGiveAwardModalOpen(false);
|
|
};
|
|
|
|
const [reportUserModalOpen, setReportUserModalOpen] = useState(false);
|
|
const handleReportUserModalOpen = () => {
|
|
setReportUserModalOpen(true);
|
|
itemRef.current?.hide();
|
|
};
|
|
const handleReportUserModalClose = () => {
|
|
setReportUserModalOpen(false);
|
|
};
|
|
|
|
return (
|
|
<Fragment>
|
|
<Menu className="items-stretch">
|
|
<MenuItem
|
|
ref={itemRef}
|
|
toggle="dropdown"
|
|
trigger="click"
|
|
dropdownProps={{
|
|
placement: isRTL() ? 'bottom-start' : 'bottom-end',
|
|
modifiers: [
|
|
{
|
|
name: 'offset',
|
|
options: {
|
|
offset: isRTL() ? [0, -10] : [0, 10] // [skid, distance]
|
|
}
|
|
}
|
|
]
|
|
}}
|
|
>
|
|
<MenuToggle className="btn btn-sm btn-icon btn-light">
|
|
<KeenIcon icon="dots-vertical" />
|
|
</MenuToggle>
|
|
<MenuSub className="menu-default" rootClassName="w-full max-w-[220px]">
|
|
<MenuItem onClick={handleSettingsModalOpen}>
|
|
<MenuLabel>
|
|
<MenuIcon>
|
|
<KeenIcon icon="coffee" />
|
|
</MenuIcon>
|
|
<MenuTitle>Share Profile</MenuTitle>
|
|
</MenuLabel>
|
|
</MenuItem>
|
|
<MenuItem onClick={handleGiveAwardModalOpen}>
|
|
<MenuLabel>
|
|
<MenuIcon>
|
|
<KeenIcon icon="award" />
|
|
</MenuIcon>
|
|
<MenuTitle>Give Award</MenuTitle>
|
|
</MenuLabel>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<MenuLabel>
|
|
<MenuIcon>
|
|
<KeenIcon icon="chart-line" />
|
|
</MenuIcon>
|
|
<MenuTitle>Stay Updated</MenuTitle>
|
|
<label className="switch switch-sm">
|
|
<input type="checkbox" value="1" name="check" />
|
|
</label>
|
|
</MenuLabel>
|
|
</MenuItem>
|
|
<MenuItem onClick={handleReportUserModalOpen}>
|
|
<MenuLabel>
|
|
<MenuIcon>
|
|
<KeenIcon icon="information-2" />
|
|
</MenuIcon>
|
|
<MenuTitle>Report User</MenuTitle>
|
|
</MenuLabel>
|
|
</MenuItem>
|
|
</MenuSub>
|
|
</MenuItem>
|
|
</Menu>
|
|
|
|
<ModalShareProfile open={ShareProfileModalOpen} onOpenChange={handleShareProfileModalClose} />
|
|
<ModalGiveAward open={giveAwardModalOpen} onOpenChange={handleGiveAwardModalClose} />
|
|
<ModalReportUser open={reportUserModalOpen} onOpenChange={handleReportUserModalClose} />
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
export { NavbarDropdown };
|