60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { Focus, Orbit } from "lucide-react";
|
|
|
|
function ToolbarButton({
|
|
label,
|
|
disabled = false,
|
|
children,
|
|
onClick,
|
|
}: {
|
|
label: string;
|
|
disabled?: boolean;
|
|
children: ReactNode;
|
|
onClick?: () => void;
|
|
}) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
aria-label={label}
|
|
title={label}
|
|
disabled={disabled}
|
|
onClick={onClick}
|
|
className={[
|
|
"grid size-7 place-items-center rounded-md border border-transparent text-[var(--ui-text-muted)] transition hover:border-[var(--ui-border-strong)] hover:bg-[var(--ui-control-hover)] hover:text-[var(--ui-text-strong)]",
|
|
disabled ? "cursor-not-allowed opacity-40 hover:border-transparent hover:bg-transparent" : "",
|
|
].join(" ")}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export function EmbeddedCadViewToolbar({
|
|
disabled = false,
|
|
onResetView,
|
|
onScreenshot,
|
|
}: {
|
|
disabled?: boolean;
|
|
onResetView: () => void;
|
|
onScreenshot?: () => void;
|
|
}) {
|
|
return (
|
|
<div
|
|
data-viewer-interaction-overlay="true"
|
|
className="pointer-events-auto absolute right-3 top-3 z-30 inline-flex min-h-10 items-center gap-1 rounded-md border border-[var(--ui-border)] bg-[var(--ui-glass-popover)] p-1.5 text-[var(--ui-text-muted)] shadow-[var(--ui-shadow-soft)] backdrop-blur"
|
|
role="toolbar"
|
|
aria-label="CAD preview tools"
|
|
onPointerDown={(event) => event.stopPropagation()}
|
|
>
|
|
<ToolbarButton label="Reset view" disabled={disabled} onClick={onResetView}>
|
|
<Orbit className="size-3.5" strokeWidth={2} aria-hidden="true" />
|
|
</ToolbarButton>
|
|
<ToolbarButton label="Copy screenshot" disabled={disabled || !onScreenshot} onClick={onScreenshot}>
|
|
<Focus className="size-3.5" strokeWidth={2} aria-hidden="true" />
|
|
</ToolbarButton>
|
|
</div>
|
|
);
|
|
}
|