wehub-resource-sync
52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { BringToFront, SendToBack } from 'lucide-react';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { useI18n } from '@/lib/hooks/use-i18n';
|
|
import { reorderSlideElement } from './use-slide-surface';
|
|
|
|
const BTN =
|
|
'flex h-8 w-8 items-center justify-center rounded-md text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100';
|
|
|
|
/**
|
|
* To-front / to-back z-order buttons for the anchored bars. Two-way only —
|
|
* intermediate forward/backward steps stay AI's domain. The icons are
|
|
* disambiguated by a hover tooltip. `onMouseDown` preventDefault keeps the
|
|
* canvas selection alive until the click fires.
|
|
*/
|
|
export function ZOrderButtons({ elementId }: { readonly elementId: string }) {
|
|
const { t } = useI18n();
|
|
return (
|
|
<>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
aria-label={t('edit.zorder.toFront')}
|
|
onMouseDown={(e) => e.preventDefault()}
|
|
onClick={() => reorderSlideElement(elementId, 'front')}
|
|
className={BTN}
|
|
>
|
|
<BringToFront className="h-4 w-4" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>{t('edit.zorder.toFront')}</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
aria-label={t('edit.zorder.toBack')}
|
|
onMouseDown={(e) => e.preventDefault()}
|
|
onClick={() => reorderSlideElement(elementId, 'back')}
|
|
className={BTN}
|
|
>
|
|
<SendToBack className="h-4 w-4" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>{t('edit.zorder.toBack')}</TooltipContent>
|
|
</Tooltip>
|
|
</>
|
|
);
|
|
}
|