* Extract out ShareHover components * Refactor hover/category state * Rename photo query options types * Restore category count slice of app state * Streamline entity hover headers * Standardize swr keys * Suppress hover counts to years * Refine entity hover design * Make image hovers opt out
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus';
|
|
import { useAppState } from '@/app/AppState';
|
|
import { clsx } from 'clsx/lite';
|
|
import { ComponentProps, useCallback } from 'react';
|
|
import { BiTrash } from 'react-icons/bi';
|
|
|
|
export default function DeleteFormButton (
|
|
props: ComponentProps<typeof SubmitButtonWithStatus> & {
|
|
clearLocalState?: boolean
|
|
},
|
|
) {
|
|
const {
|
|
onFormSubmit: onFormSubmitProps,
|
|
clearLocalState,
|
|
className,
|
|
...rest
|
|
} = props;
|
|
|
|
const { invalidateSwr, registerAdminUpdate } = useAppState();
|
|
|
|
const onFormSubmit = useCallback(() => {
|
|
onFormSubmitProps?.();
|
|
if (clearLocalState) {
|
|
invalidateSwr?.();
|
|
registerAdminUpdate?.();
|
|
}
|
|
}, [onFormSubmitProps, clearLocalState, invalidateSwr, registerAdminUpdate]);
|
|
|
|
return <SubmitButtonWithStatus
|
|
{...rest}
|
|
title="Delete"
|
|
icon={<BiTrash size={16} />}
|
|
spinnerColor="text"
|
|
className={clsx(
|
|
className,
|
|
'text-red-500! dark:text-red-600!',
|
|
'active:bg-red-100/50! dark:active:bg-red-950/50!',
|
|
'disabled:bg-red-100/50! dark:disabled:bg-red-950/50!',
|
|
'border-red-200! hover:border-red-300!',
|
|
'dark:border-red-900/75! dark:hover:border-red-900!',
|
|
)}
|
|
onFormSubmit={onFormSubmit}
|
|
/>;
|
|
}
|