Initial implementation

1 files changed, 30 insertions, 0 deletions

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..97d923b
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,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>
+  );
+};