152 lines
3.7 KiB
TypeScript
152 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import MoreMenu from '@/components/more/MoreMenu';
|
|
import {
|
|
PATH_ADMIN_INSIGHTS,
|
|
PATH_ADMIN_PHOTOS,
|
|
PATH_ADMIN_TAGS,
|
|
PATH_ADMIN_UPLOADS,
|
|
PATH_GRID_INFERRED,
|
|
} from '@/app/paths';
|
|
import { useAppState } from '@/state/AppState';
|
|
import { ImCheckboxUnchecked } from 'react-icons/im';
|
|
import { IoCloseSharp } from 'react-icons/io5';
|
|
import { clsx } from 'clsx/lite';
|
|
import { TbPhoto } from 'react-icons/tb';
|
|
import { FiTag } from 'react-icons/fi';
|
|
import { BiLockAlt } from 'react-icons/bi';
|
|
import AdminAppInfoIcon from './AdminAppInfoIcon';
|
|
import { PiSignOutBold } from 'react-icons/pi';
|
|
import { signOutAction } from '@/auth/actions';
|
|
import { ComponentProps } from 'react';
|
|
import { FaRegFolderOpen } from 'react-icons/fa';
|
|
import { FiUploadCloud } from 'react-icons/fi';
|
|
|
|
export default function AdminAppMenu({
|
|
active,
|
|
className,
|
|
}: {
|
|
active?: boolean
|
|
className?: string
|
|
}) {
|
|
const {
|
|
photosCount,
|
|
uploadsCount,
|
|
tagsCount,
|
|
selectedPhotoIds,
|
|
startUpload,
|
|
setSelectedPhotoIds,
|
|
refreshAdminData,
|
|
clearAuthStateAndRedirect,
|
|
} = useAppState();
|
|
|
|
const isSelecting = selectedPhotoIds !== undefined;
|
|
|
|
const items: ComponentProps<typeof MoreMenu>['items'] = [{
|
|
label: 'Upload Photos',
|
|
icon: <FiUploadCloud
|
|
size={15}
|
|
className="translate-x-[0.5px] translate-y-[0.5px]"
|
|
/>,
|
|
action: startUpload,
|
|
}, {
|
|
label: 'Manage Photos',
|
|
...photosCount !== undefined && {
|
|
annotation: `${photosCount}`,
|
|
},
|
|
icon: <TbPhoto
|
|
size={15}
|
|
className="translate-x-[-0.5px] translate-y-[0.5px]"
|
|
/>,
|
|
href: PATH_ADMIN_PHOTOS,
|
|
}];
|
|
|
|
if (uploadsCount) {
|
|
items.push({
|
|
label: 'Uploads',
|
|
annotation: `${uploadsCount}`,
|
|
icon: <FaRegFolderOpen
|
|
size={16}
|
|
className="translate-y-[0.5px]"
|
|
/>,
|
|
href: PATH_ADMIN_UPLOADS,
|
|
});
|
|
}
|
|
|
|
if (tagsCount) {
|
|
items.push({
|
|
label: 'Manage Tags',
|
|
annotation: `${tagsCount}`,
|
|
icon: <FiTag
|
|
size={15}
|
|
className="translate-y-[0.5px]"
|
|
/>,
|
|
href: PATH_ADMIN_TAGS,
|
|
});
|
|
}
|
|
|
|
items.push({
|
|
label: 'App Info',
|
|
icon: <AdminAppInfoIcon
|
|
size="small"
|
|
className="translate-x-[-0.5px] translate-y-[-0.5px]"
|
|
/>,
|
|
href: PATH_ADMIN_INSIGHTS,
|
|
}, {
|
|
label: isSelecting
|
|
? 'Exit Select'
|
|
: 'Edit Multiple',
|
|
icon: isSelecting
|
|
? <IoCloseSharp
|
|
className="text-[18px] translate-x-[-1px] translate-y-[1px]"
|
|
/>
|
|
: <ImCheckboxUnchecked
|
|
className="translate-x-[-0.5px] text-[0.75rem]"
|
|
/>,
|
|
href: PATH_GRID_INFERRED,
|
|
action: () => {
|
|
if (isSelecting) {
|
|
setSelectedPhotoIds?.(undefined);
|
|
} else {
|
|
setSelectedPhotoIds?.([]);
|
|
}
|
|
if (document.activeElement instanceof HTMLElement) {
|
|
document.activeElement.blur();
|
|
}
|
|
},
|
|
shouldPreventDefault: false,
|
|
}, {
|
|
label: 'Sign Out',
|
|
icon: <PiSignOutBold size={15} />,
|
|
action: () => signOutAction().then(clearAuthStateAndRedirect),
|
|
});
|
|
|
|
return (
|
|
<MoreMenu
|
|
header="Admin menu"
|
|
icon={<BiLockAlt size={16} className="translate-y-[-0.5px]" />}
|
|
align="start"
|
|
sideOffset={12}
|
|
alignOffset={-85}
|
|
onOpen={refreshAdminData}
|
|
className={clsx(
|
|
'border-medium',
|
|
className,
|
|
)}
|
|
buttonClassName={clsx(
|
|
'w-full h-full',
|
|
'flex items-center justify-center',
|
|
'hover:bg-transparent dark:hover:bg-transparent',
|
|
'active:bg-transparent dark:active:bg-transparent',
|
|
'rounded-none focus:outline-none',
|
|
active
|
|
? 'text-black dark:text-white'
|
|
: 'text-gray-400 dark:text-gray-600',
|
|
)}
|
|
buttonClassNameOpen="bg-dim"
|
|
items={items}
|
|
ariaLabel="Admin Menu"
|
|
/>
|
|
);
|
|
}
|