working on cutscenes

cutsceneEditor/src/components/RightPanel/RightPanel.tsx

@@ -0,0 +1,41 @@
+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>
+  );
+}