top menu structured

README.md

@@ -18,3 +18,7 @@
     </td>
   </tr>
 </table>
+
+
+TO-DO
+-> COMPONENTIZAR OS (menuOptions-subcontainer span) para possibilitar testes

src/Images.ts

@@ -7,4 +7,5 @@ export const Images = {
   meat: require('./images/meat.svg').default,
   pizza: require('./images/pizza.svg').default,
   forkKnifeSpoon: require('./images/forkKnifeSpoon.svg').default,
+  forkKnifePlate: require('./images/forkKnifePlate.svg').default,
 };

src/components/OrderMenu/OrderMenu.css

@@ -0,0 +1,63 @@
+.orderMenu-main-container {
+  width: 325px;
+  font-family: sans-serif;
+}
+
+.orderInfos-subcontainer {
+  background-color: #6C757D;
+  color: #FFFFEA;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 50px;
+  justify-content: space-between;
+  padding: 0 20px 0 20px;
+  margin: 0;
+}
+
+.orderInfos-subcontainer p {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.orderInfos-subcontainer p img {
+  width: 40px;
+  filter: invert(1);
+}
+
+.orderInfos-subcontainer span {
+  background-color: #20252A;
+  border-radius: 2px;
+  font-size: 12px;
+  padding: 3px;
+}
+
+.orderInfos-subcontainer span b {
+  margin-left: 2px;
+}
+
+.menuOptions-subcontainer {
+  display: flex;
+  justify-content: space-evenly;
+  font-size: 12px;
+  font-weight: 500;
+  background-color: #DEE2E6;
+  width: 100%;
+  cursor: pointer;
+}
+
+.menuOptions-subcontainer span {
+  width: 100%;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  opacity: .7;
+}
+
+.menuOptions-subcontainer span.active {
+  background-color: #FFFFFF;
+  opacity: 1;
+}

src/components/OrderMenu/OrderMenu.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import './OrderMenu.css';
+import { Images } from '../../Images';
+
+const OrderMenu = () => {
+  const [menuOption, setMenuOption] = React.useState<string>('New Order');
+
+  return (
+    <div className='orderMenu-main-container'>
+      <div className='orderInfos-subcontainer'>
+        <p>
+          <img src={Images.forkKnifePlate} alt='Order' />
+          Table 01
+        </p>
+        <span>
+          Order: <b>#0056</b>
+        </span>
+      </div>
+      <div className='menuOptions-subcontainer'>
+        <span className={`${menuOption === 'New Order' ? 'active' : ''}`} onClick={() => setMenuOption('New Order')}>New Order (5)</span>
+        <span className={`${menuOption === 'Order History' ? 'active' : ''}`} onClick={() => setMenuOption('Order History')}>Order History(0)</span>
+      </div>
+    </div>
+  );
+};
+
+export default OrderMenu;

src/routes.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
+import OrderMenu from './components/OrderMenu/OrderMenu';
 import ProductCard from './components/ProductCard/ProductCard';
 import SideBar from './components/SideBar/SideBar';
 import DishesCatalog from './pages/DishesCatalog';
@@ -13,6 +14,7 @@ const AppRoutes: React.FC = () => {
       <Route path="estoque" element={<Stock />} />
       <Route path="productcard" element={<ProductCard />} />
       <Route path="sidebar" element={<SideBar />} />
+      <Route path="ordermenu" element={<OrderMenu />} />
     </Routes>
   );
 };