obulaworld

/* 

Prompt:
  We have defined a basic dropdown via the Dropdown and DropdownItem components below, with example usage in the ExampleNav component.
  The Dropdown and DropdownItem components have some problems, and also have room for improvements.
  Please fix any obvious bugs you see with the dropdown, and explain your reasoning.
  Please then describe some improvements you would make to the dropdown, and how you would implement them.
  Consider the different contexts in which you might use this dropdown and what changes might be neccessary to make it more flexible.
  
  Follow up question: if we wanted to sync this dropdown selection to the server with app.sync('PATCH', 'user', { dropdown_1_state: {true,false} }) where would this be included

obulaworld

export const stageMockData = {
  stages: [
    {
      id: 'requested',
      title: 'Requested',
      className: 'requestedCount',
      cardData: [
        {
          id: 1,
          title: 'Flow Meter Measurement E',

obulaworld

hr {
  height: 1px;
  background-color: #f2f2f2;
  border: none;
}

.cardTitle ~ .ellipsis {
    margin-right: 0;
}

obulaworld

.stage {
  width: 20rem;
  display: flex;
  height: 43.25rem;
  flex-direction: column;
  overflow: scroll;
  padding-bottom: 1.5rem;
  align-items: center;
  border: 1px solid #dce1e4;
  position: relative;

obulaworld

import React, { useCallback, useState } from 'react';
import ToolBar from '../ToolBar/ToolBar';
import Stage from '../Stage/Stage';
import { stageMockData } from '../../__mock_data/StageMockData';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import { array_move, array_insert } from '../../utils/utils';
import './Board.css';

function Board() {
  const [board, setBoard] = useState({ ...stageMockData });

obulaworld

import React from 'react';
import { ToggleLayer } from 'react-laag';
import Card from '../Card/Card';
import { Draggable } from 'react-beautiful-dnd';
import './Stage.css';
import ellipsis from '../../assets/ellipsis.svg';
import mark from '../../assets/mark.svg';
import star from '../../assets/star.svg';

function Stage(props) {

obulaworld

import React from 'react';
import cardTypeIcon from '../../assets/cardTypeIcon.svg';
import dateIcon from '../../assets/dateIcon.svg';
import './Card.css';

function Card(props) {
  const {
    title,
    description,
    tag,