Vercel/src/admin/AdminPhotoMenuClient.tsx
2024-02-16 15:44:10 -06:00

68 lines
2.0 KiB
TypeScript

'use client';
import { ComponentProps } from 'react';
import { pathForAdminPhotoEdit, pathForPhoto } from '@/site/paths';
import { deletePhotoAction, toggleFavoritePhotoAction } from '@/photo/actions';
import { FaRegEdit, FaRegStar, FaStar } from 'react-icons/fa';
import { Photo, deleteConfirmationTextForPhoto } from '@/photo';
import { isPathFavs, isPhotoFav } from '@/tag';
import { usePathname } from 'next/navigation';
import { BiTrash } from 'react-icons/bi';
import MoreMenu from '@/components/MoreMenu';
export default function AdminPhotoMenuClient({
photo,
...props
}: Omit<ComponentProps<typeof MoreMenu>, 'items'> & {
photo: Photo
}) {
const isFav = isPhotoFav(photo);
const path = usePathname();
const shouldRedirectFav = isPathFavs(path) && isFav;
const shouldRedirectDelete = pathForPhoto(photo.id) === path;
return (
<>
<MoreMenu {...{
items: [
{
label: 'Edit',
icon: <FaRegEdit size={14} />,
href: pathForAdminPhotoEdit(photo.id),
}, {
label: isFav ? 'Unfavorite' : 'Favorite',
icon: isFav
? <FaStar
size={14}
className="text-amber-500 translate-x-[-1.5px]"
/>
: <FaRegStar
size={14}
className="translate-x-[-2px]"
/>,
action: () => toggleFavoritePhotoAction(
photo.id,
shouldRedirectFav,
),
}, {
label: 'Delete',
icon: <BiTrash
size={14}
className="translate-x-[-1.5px] "
/>,
action: () => {
if (confirm(deleteConfirmationTextForPhoto(photo))) {
return deletePhotoAction(
photo.id,
photo.url,
shouldRedirectDelete,
);
}
},
},
],
...props,
}}/>
</>
);
}