111 lines
3.4 KiB
TypeScript
111 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import { FolderOpen, Type, Stamp, Music, Settings2, Hexagon, HelpCircle, Disc3 } from 'lucide-react';
|
|
|
|
export type PanelType = 'media' | 'text' | 'stickers' | 'shapes' | 'audio' | 'sfx' | null;
|
|
|
|
interface StudioToolbarProps {
|
|
activePanel: PanelType;
|
|
setActivePanel: (panel: PanelType) => void;
|
|
onShowShortcuts?: () => void;
|
|
outputFormat?: 'video' | 'image';
|
|
}
|
|
|
|
/**
|
|
* CapCut-style sidebar toolbar (56px wide).
|
|
* Each button toggles a sliding panel on the right side.
|
|
* Always visible — no buttons change or disappear based on layer type.
|
|
*/
|
|
export const StudioToolbar: React.FC<StudioToolbarProps> = ({
|
|
activePanel,
|
|
setActivePanel,
|
|
onShowShortcuts,
|
|
outputFormat,
|
|
}) => {
|
|
const ToolButton = ({ panel, icon, label }: { panel: PanelType; icon: React.ReactNode; label: string }) => {
|
|
const isActive = activePanel === panel;
|
|
return (
|
|
<button
|
|
onClick={() => setActivePanel(isActive ? null : panel)}
|
|
title={label}
|
|
className={`relative w-full flex flex-col items-center justify-center gap-0.5 py-2.5 transition-all ${
|
|
isActive
|
|
? 'text-white bg-neutral-800/70'
|
|
: 'text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/30'
|
|
}`}
|
|
>
|
|
{/* Active accent line */}
|
|
{isActive && (
|
|
<div className="absolute left-0 top-1.5 bottom-1.5 w-[2px] bg-violet-500 rounded-r" />
|
|
)}
|
|
{icon}
|
|
<span className="text-[8px] font-medium leading-none mt-0.5">{label}</span>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="w-14 bg-neutral-900 border-r border-neutral-800/60 flex flex-col items-center z-20 shrink-0">
|
|
<ToolButton
|
|
panel="media"
|
|
icon={<FolderOpen size={18} />}
|
|
label="Media"
|
|
/>
|
|
<ToolButton
|
|
panel="text"
|
|
icon={<Type size={18} />}
|
|
label="Texto"
|
|
/>
|
|
<ToolButton
|
|
panel="stickers"
|
|
icon={<Stamp size={18} />}
|
|
label="Marca"
|
|
/>
|
|
<ToolButton
|
|
panel="shapes"
|
|
icon={<Hexagon size={18} />}
|
|
label="Formas"
|
|
/>
|
|
{outputFormat !== 'image' && (
|
|
<ToolButton
|
|
panel="audio"
|
|
icon={<Music size={18} />}
|
|
label="Audio"
|
|
/>
|
|
)}
|
|
{outputFormat !== 'image' && (
|
|
<ToolButton
|
|
panel="sfx"
|
|
icon={<Disc3 size={18} />}
|
|
label="SFX"
|
|
/>
|
|
)}
|
|
|
|
<div className="flex-1" />
|
|
|
|
{/* Help */}
|
|
<button
|
|
onClick={onShowShortcuts}
|
|
title="Atajos de Teclado (?)"
|
|
className="relative w-full flex flex-col items-center justify-center gap-0.5 py-2.5 transition-all text-neutral-600 hover:text-neutral-300 hover:bg-neutral-800/30"
|
|
>
|
|
<HelpCircle size={18} />
|
|
<span className="text-[8px] font-medium leading-none mt-0.5">Ayuda</span>
|
|
</button>
|
|
|
|
{/* Settings */}
|
|
<button
|
|
onClick={() => setActivePanel(null)}
|
|
title="Cerrar Paneles"
|
|
className={`relative w-full flex flex-col items-center justify-center gap-0.5 py-2.5 mb-1 transition-all ${
|
|
activePanel === null
|
|
? 'text-white bg-neutral-800/60'
|
|
: 'text-neutral-600 hover:text-neutral-300 hover:bg-neutral-800/30'
|
|
}`}
|
|
>
|
|
<Settings2 size={18} />
|
|
<span className="text-[8px] font-medium leading-none mt-0.5">Ajustes</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|