from dropdown to tabs

3DStreet · Oct 29, 2024 · ebeb9c7 · ebeb9c7
1 parent adcf8d3
commit ebeb9c7
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 50 deletions.
diff --git a/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx b/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx
@@ -1,23 +1,18 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useAuthContext } from '../../../contexts/index.js';
+import { Button, Tabs } from '../../components';
 
 import styles from './AddLayerPanel.module.scss';
 import classNames from 'classnames';
-import { Button } from '../Button';
 import { Chevron24Down } from '../../../icons';
-import { Dropdown } from '../Dropdown';
 import CardPlaceholder from '../../../../../ui_assets/card-placeholder.svg';
 import LockedCard from '../../../../../ui_assets/locked-card.svg';
 import mixinCatalog from '../../../../catalog.json';
 import posthog from 'posthog-js';
 import Events from '../../../lib/Events';
 import pickPointOnGroundPlane from '../../../lib/pick-point-on-ground-plane';
-import {
-  customLayersData,
-  intersectionLayersData,
-  streetLayersData
-} from './layersData.js';
+import { customLayersData, streetLayersData } from './layersData.js';
 import { LayersOptions } from './LayersOptions.js';
 
 // Create an empty image
@@ -285,13 +280,12 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
   }, []);
 
   const selectedCards = useMemo(() => {
+    console.log(selectedOption);
     switch (selectedOption) {
       case 'Custom Layers':
         return customLayersData;
-      case 'Streets':
+      case 'Streets and Intersections':
         return streetLayersData;
-      case 'Intersections':
-        return intersectionLayersData;
       default:
         return getSelectedMixinCards(groupedMixins, selectedOption);
     }
@@ -427,15 +421,16 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
         <Chevron24Down />
       </Button>
       <div className={styles.header}>
-        <div className={styles.button}></div>
-        <Dropdown
-          placeholder="Layers: Maps & Reference"
-          options={LayersOptions}
-          onSelect={handleSelect}
-          selectedOptionValue={selectedOption}
-          className={styles.dropdown}
-          smallDropdown={true}
-        />
+        <div className={styles.categories}>
+          <Tabs
+            tabs={LayersOptions.map((option) => ({
+              label: option.label,
+              value: option.value,
+              isSelected: selectedOption === option.value,
+              onClick: () => handleSelect(option.value)
+            }))}
+          />
+        </div>
       </div>
       <div className={styles.cards}>
         {selectedCards.map((card) => (

diff --git a/src/editor/components/components/AddLayerPanel/AddLayerPanel.module.scss b/src/editor/components/components/AddLayerPanel/AddLayerPanel.module.scss
@@ -47,8 +47,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 24px;
-    margin-top: -30px;
+    margin-bottom: 12px;
+    margin-top: 12px;
   }
 
   .cards {

diff --git a/src/editor/components/components/AddLayerPanel/LayersOptions.js b/src/editor/components/components/AddLayerPanel/LayersOptions.js
@@ -30,16 +30,10 @@ const LayersOptions = [
     onClick: () => {}
   },
   {
-    value: 'Streets',
-    label: '🛣️ Streets',
+    value: 'Streets and Intersections',
+    label: '🚦 Streets and Intersections',
     onClick: () => {}
   },
-  {
-    value: 'Intersections',
-    label: '🚦 Intersections',
-    onClick: () => {}
-  },
-
   {
     value: 'Buildings',
     label: '🏠 Buildings',

diff --git a/src/editor/components/components/AddLayerPanel/layersData.js b/src/editor/components/components/AddLayerPanel/layersData.js
@@ -61,6 +61,16 @@ export const streetLayersData = [
     description: 'Premade Street 150ft Right of Way / 124ft Roadway Width',
     id: 6,
     handlerFunction: create150ftRightOfWay
+  },
+  {
+    name: 'Create intersection',
+    img: '',
+    requiresPro: true,
+    icon: '',
+    description:
+      'Create intersection entity. Parameters of intersection component could be changed in properties panel.',
+    id: 7,
+    handlerFunction: createIntersection
   }
 ];
 
@@ -72,7 +82,7 @@ export const customLayersData = [
     requiresPro: true,
     description:
       'Create entity with svg-extruder component, that accepts a svgString and creates a new entity with geometry extruded from the svg and applies the default mixin material grass.',
-    id: 3,
+    id: 1,
     handlerFunction: createSvgExtrudedEntity
   },
   {
@@ -82,7 +92,7 @@ export const customLayersData = [
     icon: '',
     description:
       'Create entity with model from path for a glTF (or Glb) file hosted on any publicly accessible HTTP server.',
-    id: 4,
+    id: 2,
     handlerFunction: createCustomModel
   },
   {
@@ -92,7 +102,7 @@ export const customLayersData = [
     icon: '',
     description:
       'Create entity with A-Frame primitive geometry. Geometry type could be changed in properties panel.',
-    id: 5,
+    id: 3,
     handlerFunction: createPrimitiveGeometry
   },
   {
@@ -102,21 +112,7 @@ export const customLayersData = [
     icon: 'ui_assets/cards/icons/gallery24.png',
     description:
       'Place an image such as a sign, reference photo, custom map, etc.',
-    id: 7,
+    id: 4,
     handlerFunction: createImageEntity
   }
 ];
-
-// data for PRO layers cards
-export const intersectionLayersData = [
-  {
-    name: 'Create intersection',
-    img: '',
-    requiresPro: true,
-    icon: '',
-    description:
-      'Create intersection entity. Parameters of intersection component could be changed in properties panel.',
-    id: 6,
-    handlerFunction: createIntersection
-  } // createImageEntity
-];
diff --git a/src/editor/components/components/Tabs/Tabs.module.scss b/src/editor/components/components/Tabs/Tabs.module.scss
@@ -5,10 +5,7 @@
   align-items: center;
   width: fit-content;
   column-gap: 12px;
-  margin: 14px auto 0;
-  background: rgba(55, 55, 55, 0.4);
   border-radius: 16px;
-  padding: 8px 12px;
 
   .activeTab,
   .inactiveTab {