src/components/Sidebar.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import React from "react";
import { useStore } from "../store/store.ts";

export const Sidebar: React.FC = () => {
  const availableModels = useStore((state) => state.availableModels);
  const addModel = useStore((state) => state.addModel);

  const handleAdd = (modelId: string) => {
    addModel(modelId, { x: 0, y: 0, z: 0 });
  };

  return (
    <section className="sidebar">
      <h2 className="sidebar-title">Models</h2>
      <nav className="model-list">
        {availableModels.map((model) => (
          <article key={model.id} className="model-item">
            <span className="model-name">{model.name}</span>
            <button
              className="add-model-btn"
              onClick={() => handleAdd(model.id)}
            >
              Add
            </button>
          </article>
        ))}
      </nav>
    </section>
  );
};