adds : bottom bar

src/components/3D/LegoRoom.jsx

@@ -10,6 +10,7 @@ import { DialogBox } from "../UI";
 import { Perf } from "r3f-perf";
 import { ModeToggleBar } from "../UI/ModeToggleBar";
 import { Panel } from "../UI/Panel";
+import { BottomBar } from "../UI/BottomBar";
 
 export const LegoRoom = () => {
   return (
@@ -17,6 +18,7 @@ export const LegoRoom = () => {
       <DialogBox />
       <ModeToggleBar />
       <Panel />
+      <BottomBar />
       <Canvas
         gl={{
           alpha: false,

src/components/UI/BottomBar/index.jsx

@@ -0,0 +1,56 @@
+/* eslint-disable no-unused-vars */
+import React from "react";
+import { TrashIcon, ResetIcon } from "@radix-ui/react-icons";
+import "./styles.css";
+import { useStore } from "../../../store";
+// import { EDIT_MODE } from "../../../utils";
+
+export const BottomBar = () => {
+  const mode = useStore((state) => state.mode);
+
+  // const isEditMode = mode === EDIT_MODE;
+
+  const selectedBricks = useStore((state) => state.selectedBricks).map(
+    (sel) => sel.userData.uID
+  );
+  const setBricks = useStore((state) => state.setBricks);
+  const setSelection = useStore((state) => state.setSelectedBricks);
+
+  const deleteSelectedBricks = () => {
+    setBricks((bricks) => {
+      const newBricks = bricks.filter((brick) => {
+        const selectedClone = [...selectedBricks];
+        const uID = brick.uID;
+        let should = true;
+        for (let i = 0; i < selectedClone.length; i++) {
+          const selectedUID = selectedClone[i];
+          if (uID === selectedUID) {
+            should = false;
+            selectedClone.splice(i, 1);
+          }
+        }
+        return should;
+      });
+      return newBricks;
+    });
+    setSelection({});
+  };
+
+  return (
+    <div className="BottomBar">
+      <button className="Button violet">
+        <ResetIcon className="Icon" color="black" />
+      </button>
+      <button className="Button violet">
+        <ResetIcon
+          style={{ transform: "scaleX(-1)" }}
+          className="Icon"
+          color="black"
+        />
+      </button>
+      <button onClick={deleteSelectedBricks} className="Button violet">
+        <TrashIcon className="Icon" color="black" />
+      </button>
+    </div>
+  );
+};

src/components/UI/BottomBar/styles.css

@@ -0,0 +1,39 @@
+@import "@radix-ui/colors/violet.css";
+
+button {
+  all: unset;
+}
+
+.Button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+}
+
+.BottomBar {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10000;
+  background-color: white;
+  border-radius: 4px;
+  padding: 4px;
+}
+
+.Icon {
+  width: 30px;
+  height: 30px;
+  padding: 4px;
+  border-radius: 4px;
+}
+
+.BottomBar .Button:hover .Icon {
+  background-color: var(--violet-5);
+}