Vercel/src/admin/AdminRecipeTable.tsx
Sam Becker 646f32e642
Rich sort controls (#283)
* Generalize app switcher menus

* Organize sort module

* Build configuration for nav sort control

* Refine sort menu styles

* Upgrade next.js

* Reset custom sort when clicking grid/full a second time

* Light up sort button when overridden
2025-07-15 22:43:36 -05:00

46 lines
1.6 KiB
TypeScript

import FormWithConfirm from '@/components/FormWithConfirm';
import { deletePhotoRecipeGloballyAction } from '@/photo/actions';
import AdminTable from '@/admin/AdminTable';
import { Fragment } from 'react';
import DeleteFormButton from '@/admin/DeleteFormButton';
import { photoQuantityText } from '@/photo';
import EditButton from '@/admin/EditButton';
import { pathForAdminRecipeEdit } from '@/app/path';
import { clsx } from 'clsx/lite';
import { formatRecipe, Recipes, sortRecipes } from '@/recipe';
import AdminRecipeBadge from './AdminRecipeBadge';
import { getAppText } from '@/i18n/state/server';
export default async function AdminRecipeTable({
recipes,
}: {
recipes: Recipes
}) {
const appText = await getAppText();
return (
<AdminTable>
{sortRecipes(recipes).map(({ recipe, count }) =>
<Fragment key={recipe}>
<div className="pr-2 col-span-2">
<AdminRecipeBadge {...{ recipe, count }} />
</div>
<div className={clsx(
'flex flex-nowrap',
'gap-2 sm:gap-3 items-center',
)}>
<EditButton path={pathForAdminRecipeEdit(recipe)} />
<FormWithConfirm
action={deletePhotoRecipeGloballyAction}
confirmText={
// eslint-disable-next-line max-len
`Are you sure you want to remove "${formatRecipe(recipe)}" from ${photoQuantityText(count, appText, false, false).toLowerCase()}?`}
>
<input type="hidden" name="recipe" value={recipe} />
<DeleteFormButton clearLocalState />
</FormWithConfirm>
</div>
</Fragment>)}
</AdminTable>
);
}