diff --git a/app/src/components/icons/marketPlaceIcons.tsx b/app/src/components/icons/marketPlaceIcons.tsx new file mode 100644 index 0000000..3ee8f1e --- /dev/null +++ b/app/src/components/icons/marketPlaceIcons.tsx @@ -0,0 +1,132 @@ +export function StarsIcon() { + return ( + + + + ); +} +export function DownloadIcon() { + return ( + + + + + ); +} + +export function EyeIconBig() { + return ( + + + + + ); +} + +export function CommentsIcon() { + return ( + + + + + + + + + + + ); +} + +export function VerifiedIcon() { + return ( + + + + ); +} + +export function StarsIconSmall() { + return ( + + + + ); +} diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index 737271e..a29d930 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; import Header from "./Header"; -import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore"; +import useModuleStore from "../../../store/useModuleStore"; import { AnalysisIcon, MechanicsIcon, @@ -14,17 +14,15 @@ import GlobalProperties from "./properties/GlobalProperties"; import AsstePropertiies from "./properties/AssetProperties"; import Analysis from "./analysis/Analysis"; import Simulations from "./simulation/Simulations"; -import { useSelectedActionSphere } from "../../../store/store"; const SideBarRight: React.FC = () => { const { activeModule } = useModuleStore(); - const { selectedActionSphere } = useSelectedActionSphere(); - const { subModule, setSubModule } = useSubModuleStore(); + const [activeList, setActiveList] = useState("properties"); const { toggleUI } = useToggleStore(); - // Reset subModule whenever activeModule changes + // Reset activeList whenever activeModule changes useEffect(() => { - setSubModule("properties"); + setActiveList("properties"); }, [activeModule]); return ( @@ -33,34 +31,38 @@ const SideBarRight: React.FC = () => { {toggleUI && (
setSubModule("properties")} + className={`sidebar-action-list ${ + activeList === "properties" ? "active" : "" + }`} + onClick={() => setActiveList("properties")} > - +
{activeModule === "simulation" && ( <>
setSubModule("mechanics")} + className={`sidebar-action-list ${ + activeList === "mechanics" ? "active" : "" + }`} + onClick={() => setActiveList("mechanics")} > - +
setSubModule("simulations")} + className={`sidebar-action-list ${ + activeList === "simulations" ? "active" : "" + }`} + onClick={() => setActiveList("simulations")} > - +
setSubModule("analysis")} + className={`sidebar-action-list ${ + activeList === "analysis" ? "active" : "" + }`} + onClick={() => setActiveList("analysis")} > - +
)} @@ -68,7 +70,7 @@ const SideBarRight: React.FC = () => { )} {/* process builder */} {toggleUI && - subModule === "properties" && + activeList === "properties" && activeModule !== "visualization" && (
@@ -82,28 +84,21 @@ const SideBarRight: React.FC = () => { {toggleUI && activeModule === "simulation" && ( <> - {(subModule === "mechanics" && selectedActionSphere) && ( + {activeList === "mechanics" && (
)} - {(subModule === "mechanics" && !selectedActionSphere) && ( -
-
- {/* */} -
-
- )} - {subModule === "analysis" && ( + {activeList === "analysis" && (
)} - {subModule === "simulations" && ( + {activeList === "simulations" && (
diff --git a/app/src/components/ui/ModuleToggle.tsx b/app/src/components/ui/ModuleToggle.tsx index bea9c43..df23f12 100644 --- a/app/src/components/ui/ModuleToggle.tsx +++ b/app/src/components/ui/ModuleToggle.tsx @@ -6,9 +6,11 @@ import { SimulationIcon, VisualizationIcon, } from "../icons/ExportModuleIcons"; +import { usePlayButtonStore } from "../../store/usePlayButtonStore"; const ModuleToggle: React.FC = () => { const { activeModule, setActiveModule } = useModuleStore(); + const { isPlaying, setIsPlaying } = usePlayButtonStore(); return (
@@ -42,9 +44,7 @@ const ModuleToggle: React.FC = () => {
Visualization
setActiveModule("market")} >
diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index 7f66584..ae473bf 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -17,7 +17,12 @@ import { handleSaveTemplate } from "../../modules/visualization/handleSaveTempla import { usePlayButtonStore } from "../../store/usePlayButtonStore"; import useTemplateStore from "../../store/useTemplateStore"; import { useSelectedZoneStore } from "../../store/useZoneStore"; -import { useAddAction, useDeleteModels, useSelectedWallItem, useToggleView } from "../../store/store"; +import { + useAddAction, + useDeleteModels, + useSelectedWallItem, + useToggleView, +} from "../../store/store"; const Tools: React.FC = () => { const { templates } = useTemplateStore(); @@ -39,7 +44,6 @@ const Tools: React.FC = () => { const { setAddAction } = useAddAction(); const { setSelectedWallItem } = useSelectedWallItem(); - // Reset activeTool whenever activeModule changes useEffect(() => { setActiveTool(activeSubTool); @@ -52,8 +56,7 @@ const Tools: React.FC = () => { setDeleteModels(false); setAddAction(null); setToggleView(true); - } - else { + } else { setToggleView(false); } setToggleThreeD(!toggleThreeD); @@ -77,187 +80,210 @@ const Tools: React.FC = () => { }, []); return ( -
-
-
- {activeSubTool == "cursor" && ( -
{ - setActiveTool("cursor"); - }} - > - -
- )} - {activeSubTool == "free-hand" && ( -
{ - setActiveTool("free-hand"); - }} - > - -
- )} - {activeModule !== "visualization" && ( -
{ - setOpenDrop(!openDrop); - console.log(openDrop); - }} - > - - {openDrop && ( -
+ <> + {!isPlaying ? ( + <> +
+
+
+ {activeSubTool == "cursor" && (
{ - setOpenDrop(false); setActiveTool("cursor"); - setActiveSubTool("cursor"); }} > -
- {activeSubTool === "cursor" && } -
- -
Cursor
+ +
+ )} + {activeSubTool == "free-hand" && ( +
{ + setActiveTool("free-hand"); + }} + > + +
+ )} + {activeModule !== "visualization" && ( +
{ + setOpenDrop(!openDrop); + console.log(openDrop); + }} + > + + {openDrop && ( +
+
{ + setOpenDrop(false); + setActiveTool("cursor"); + setActiveSubTool("cursor"); + }} + > +
+ {activeSubTool === "cursor" && } +
+ +
Cursor
+
+
{ + setOpenDrop(false); + setActiveTool("free-hand"); + setActiveSubTool("free-hand"); + }} + > +
+ {activeSubTool === "free-hand" && } +
+ +
Free Hand
+
+
+ )} +
+ )} +
+
+ {!toggleThreeD && activeModule === "builder" && ( + <> +
+
+
{ + setActiveTool("draw-wall"); + }} + > +
{ - setOpenDrop(false); - setActiveTool("free-hand"); - setActiveSubTool("free-hand"); + setActiveTool("draw-zone"); }} > -
- {activeSubTool === "free-hand" && } -
- -
Free Hand
+ +
+
{ + setActiveTool("draw-aisle"); + }} + > + +
+
{ + setActiveTool("draw-floor"); + }} + > +
- )} -
- )} -
-
- {!toggleThreeD && activeModule === "builder" && ( - <> -
-
-
+ )} + {activeModule === "simulation" && ( + <> +
+
+
{ + setActiveTool("pen"); + }} + > + +
+
+ + )} + {activeModule === "visualization" && ( + <> +
+
+
+ handleSaveTemplate({ + addTemplate, + selectedZone, + templates, + }) + } + > + +
+
+ + )} +
+
+
{ - setActiveTool("draw-wall"); - }} - > - -
-
{ + setActiveTool("comment"); + }} + > + +
+
{ - setActiveTool("draw-zone"); - }} - > - + onClick={() => { + setIsPlaying(!isPlaying); + }} + > + +
+
{ - setActiveTool("draw-aisle"); - }} + className={`toggle-threed-button${ + toggleThreeD ? " toggled" : "" + }`} + onClick={toggleSwitch} > - -
-
{ - setActiveTool("draw-floor"); - }} - > - +
+ 2d +
+
+ 3d +
+ ) : ( +
setIsPlaying(false)}> + X +
)} - {activeModule === "simulation" && ( - <> -
-
-
{ - setActiveTool("pen"); - }} - > - -
-
- - )} - {activeModule === "visualization" && ( - <> -
-
-
- handleSaveTemplate({ - addTemplate, - selectedZone, - templates, - }) - } - > - -
-
- - )} -
-
-
{ - setActiveTool("comment"); - }} - > - -
-
{ - setActiveTool("play"); - setIsPlaying(!isPlaying); - }} - > - -
-
-
-
-
- 2d -
-
- 3d -
-
-
+ ); }; diff --git a/app/src/modules/market/Card.tsx b/app/src/modules/market/Card.tsx new file mode 100644 index 0000000..e96827a --- /dev/null +++ b/app/src/modules/market/Card.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import { + CommentsIcon, + DownloadIcon, + EyeIconBig, + StarsIconSmall, + VerifiedIcon, +} from "../../components/icons/marketPlaceIcons"; + +const Card: React.FC = () => { + return ( +
+
+ +
+
+ +
+
+
+
Asset name
+
Uploaded on-12 Jan 23
+
+
+
+ + 1.5k +
+
+ + 32 +
+
+
+
+ HEXR FACTORY +
+
+ +
+ ₹ 36,500/unit +
+
+
Buy now
+
+ ); +}; + +export default Card; diff --git a/app/src/modules/market/CardsContainer.tsx b/app/src/modules/market/CardsContainer.tsx new file mode 100644 index 0000000..27d4a6b --- /dev/null +++ b/app/src/modules/market/CardsContainer.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import Card from "./Card"; + +const CardsContainer: React.FC = () => { + const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; + return ( +
+
Products You May Like
+
+ {array.map((index) => ( + + ))} +
+
+ ); +}; + +export default CardsContainer; diff --git a/app/src/modules/market/FilterSearch.tsx b/app/src/modules/market/FilterSearch.tsx new file mode 100644 index 0000000..11a2cbf --- /dev/null +++ b/app/src/modules/market/FilterSearch.tsx @@ -0,0 +1,39 @@ +import React, { useState } from "react"; +// import RegularDropDown from "./ui/inputs/RegularDropDown"; + +import Search from "../../components/ui/inputs/Search"; +import { StarsIcon } from "../../components/icons/marketPlaceIcons"; +import RegularDropDown from "../../components/ui/inputs/RegularDropDown"; + +const FilterSearch: React.FC = () => { + const [activeOption, setActiveOption] = useState("Sort by"); // State for active option + + const handleSelect = (option: string) => { + setActiveOption(option); + }; + return ( +
+ {}} /> + +
Free
+
Animated
+
+
Rating
+
+ + + + + +
+
+
+ ); +}; + +export default FilterSearch; diff --git a/app/src/modules/market/MarketPlace.tsx b/app/src/modules/market/MarketPlace.tsx new file mode 100644 index 0000000..c6f67d6 --- /dev/null +++ b/app/src/modules/market/MarketPlace.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import FilterSearch from "./FilterSearch"; +import CardsContainer from "./CardsContainer"; + +const MarketPlace = () => { + return ( +
+ + +
+ ); +}; + +export default MarketPlace; diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index 6be56a0..4476c50 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -17,6 +17,7 @@ import { import { useNavigate } from "react-router-dom"; import { usePlayButtonStore } from "../store/usePlayButtonStore"; import SimulationUI from "../modules/simulation/simulationUI"; +import MarketPlace from "../modules/market/MarketPlace"; const Project: React.FC = () => { let navigate = useNavigate(); @@ -49,11 +50,11 @@ const Project: React.FC = () => { return (
- - + {!isPlaying && } {!isPlaying && } {!isPlaying && } {activeModule === "visualization" && } + {activeModule === "market" && } {/* {activeModule !== "visualization" && } */} @@ -63,7 +64,9 @@ const Project: React.FC = () => { className="canvas-container" style={{ height: "100vh", width: "100vw" }} > - {activeModule !== "visualization" && } + {activeModule !== "visualization" && activeModule !== "market" && ( + + )}
); diff --git a/app/src/store/useModuleStore.ts b/app/src/store/useModuleStore.ts index 0eeb726..c52b72f 100644 --- a/app/src/store/useModuleStore.ts +++ b/app/src/store/useModuleStore.ts @@ -6,7 +6,7 @@ interface ModuleStore { } const useModuleStore = create((set) => ({ - activeModule: "visualization", // Initial state + activeModule: "market", // Initial state setActiveModule: (module) => set({ activeModule: module }), // Update state })); diff --git a/app/src/styles/components/marketPlace/marketPlace.scss b/app/src/styles/components/marketPlace/marketPlace.scss new file mode 100644 index 0000000..b5c234d --- /dev/null +++ b/app/src/styles/components/marketPlace/marketPlace.scss @@ -0,0 +1,91 @@ +@use "../../abstracts/variables" as *; +@use "../../abstracts/mixins.scss" as *; + + +.marketPlace { + width: calc((100vw) - (320px + 270px + 100px)); + background-color: #FCFDFD; + position: absolute; + top: 100px; + left: calc(240px + 45px); + padding: 14px; + display: flex; + flex-direction: column; + gap: 24px; + + .filter-search-container { + display: flex; + align-items: center; + gap: 12px; + + .search-wrapper { + min-width: 40%; + + width: 684px; + padding: 0; + + .search-container { + border: none !important; + box-shadow: 0px 2px 10.5px 0px #0000000D; + + input { + border: none !important; + outline: none; + + } + } + } + + .regularDropdown-container { + max-width: 159px; + } + + .button { + padding: 5px 20px; + border: 1px solid var(--accent-color); + border-radius: 14px; + } + + .rating-container { + display: flex; + align-items: center; + gap: 6px; + + .stars { + display: flex; + align-items: center; + + } + } + } + + .cards-container-container { + .header { + color: var(--text-color); + font-weight: $medium-weight; + font-size: $xlarge; + } + + .cards-wrapper-container { + .card-container { + width: 316px; + height: 309px; + border-radius: 18px; + padding: 12px; + box-shadow: 0px 2px 10.5px 0px #0000000D; + border: 1px solid var(--background-accent-transparent, #E0DFFF80); + position: relative; + .icon { + position: absolute; + top: 12px; + left: 12px; + width: 30px; + height: 30px; + border-radius: 10px; + padding: 5px; + background-color: var(--accent-color); + } + } + } + } +} \ No newline at end of file diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index 2ab4479..17fea38 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -15,6 +15,7 @@ transition: width 0.2s; background-color: var(--background-color); z-index: #{$z-index-tools}; + .split { height: 20px; width: 2px; @@ -79,6 +80,7 @@ padding: 8px; border-radius: #{$border-radius-large}; background: var(--background-color); + .option-list { margin: 4px 0; display: flex; @@ -149,28 +151,36 @@ } } - .exitPlay { - width: 30px; - height: 30px; - border-radius: 50%; - background-color: var(--accent-color); - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - position: relative; - transition: background-color 0.3s, transform 0.3s; - color: var(--background-color); - } - .exitPlay:hover { + + +} + +.exitPlay { + width: 30px; + height: 30px; + border-radius: 50%; + background-color: var(--accent-color); + + cursor: pointer; + @include flex-center; + position: fixed; + bottom: 50px; + left: 50%; + transform: translate(-50%, 0); + transition: background-color 0.3s, transform 0.3s; + color: var(--background-color); + transform: none; + + &:hover { background-color: var(--accent-color); transform: scale(1.1); } - } + + @keyframes expandWidth { from { width: 0; diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss index c45e2cc..fa6ce51 100644 --- a/app/src/styles/main.scss +++ b/app/src/styles/main.scss @@ -21,6 +21,7 @@ @use 'components/visualization/floating/energyConsumed'; @use 'components/visualization/ui/styledWidgets'; @use './components/visualization/floating/common'; +@use './components/marketPlace/marketPlace.scss'; // layout @use 'layout/loading'; diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index 6c029b2..a63f9cd 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -124,7 +124,7 @@ } .zoon-wrapper.bottom { - bottom: 250px; + bottom: 310px; } .content-container {