42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { useCutsceneStore } from '../../store/cutsceneStore';
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
import CutsceneProperties from './CutsceneProperties';
|
|
import LayerProperties from './LayerProperties';
|
|
import SubtitleLines from './SubtitleLines';
|
|
import styles from './RightPanel.module.css';
|
|
|
|
export default function RightPanel() {
|
|
const { selectedLayerIndex, selectLayer } = useCutsceneStore(useShallow(s => ({
|
|
selectedLayerIndex: s.selectedLayerIndex,
|
|
selectLayer: s.selectLayer,
|
|
})));
|
|
|
|
return (
|
|
<div className={styles.panel}>
|
|
{/* Tab strip */}
|
|
<div className={styles.tabs}>
|
|
<button
|
|
className={`${styles.tab} ${selectedLayerIndex === null ? styles.tabActive : ''}`}
|
|
onClick={() => selectLayer(null)}
|
|
>
|
|
Cutscene
|
|
</button>
|
|
{selectedLayerIndex !== null && (
|
|
<button className={`${styles.tab} ${styles.tabActive}`}>
|
|
Layer {selectedLayerIndex + 1}
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className={styles.scroll}>
|
|
{selectedLayerIndex !== null ? (
|
|
<LayerProperties />
|
|
) : (
|
|
<CutsceneProperties />
|
|
)}
|
|
<SubtitleLines />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|