feat: 🎨 improve client app for demo

Signed-off-by: Tiago Barbosa <tbarbos@hotmail.com>

frontend/src/components/ItemsList.tsx

@@ -1,36 +1,39 @@
-import React from 'react'
+import { Button } from '@headlessui/react';
 
 // ItemsListProps
 type ItemsListProps = {
-    title: string,
-    items: {
-        id: number,
-        name: string,
-        description: string,
-        imageUrl: string,
-    }[]
-}
+  title: string;
+  items: {
+    id: string;
+    name: string;
+    description: string;
+    imageUrl: string;
+  }[];
+  onClick: (item: string) => void;
+};
+
+function ItemsList({ title, items, onClick }: ItemsListProps) {
 
-function ItemsList({ title, items }: ItemsListProps) {
   return (
     <div className="bg-gray-100">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl py-16 sm:py-24 lg:max-w-none lg:py-32">
+        <div className="mx-auto max-w-2xl pt-8 sm:pt-12 lg:max-w-none lg:pt-16">
           <h2 className="text-2xl font-bold text-gray-900">{title}</h2>
 
           <div className="mt-6 space-y-12 lg:grid lg:grid-cols-3 lg:gap-x-6 lg:space-y-0">
             {items.map((item) => (
               <div key={item.name} className="group relative">
-                <div className="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
+                <div className="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 sm:h-64">
                   <img
                     src={item.imageUrl}
                     alt={item.name}
                     className="h-full w-full object-cover object-center"
                   />
                 </div>
-                <h3 className="mt-6 text-sm text-gray-500">
-
-                </h3>
+                <Button onClick={()=> onClick(item.name)} className="w-full h-10 mt-2 -mb-2 align-bottom font-bold bg-red-500 text-white rounded-md hover:opacity-90">
+                  Select
+                </Button>
+                <h3 className="mt-6 text-sm text-gray-500">{item.name}</h3>
                 <p className="text-base font-semibold text-gray-900">
                   {item.description}
                 </p>

frontend/src/components/OrderCommand.tsx

@@ -0,0 +1,44 @@
+import { Button } from '@headlessui/react'
+
+type Props = {
+  food: string;
+  drink: string;
+  email: string;
+};
+
+
+
+function OrderCommand({food, drink}: Props) {
+
+  function submitOrder() {
+    fetch("https://cors-anywhere.herokuapp.com/http://51.8.235.29/order", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify({
+        customer_email: "john.doe@email.com",
+        items: [food, drink],
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+      });
+  }  
+
+  return (
+    <div className="bg-red-500 opacity-90 h-14 sticky top-0 bottom-0 flex flex-col items-center">
+      <Button
+        onClick={submitOrder}
+        disabled={food === "" || drink === ""}
+        className="bg-red-100 font-semibold mt-3 text-red-900 rounded-md text-2xl w-80 disabled:opacity-60"
+      >
+        Order
+      </Button>
+    </div>
+  );
+}
+
+export default OrderCommand

frontend/src/pages/Customer.tsx

@@ -1,69 +1,84 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Navbar } from '../components/Navbar'
 import ItemsList from '../components/ItemsList';
-import StickyFooter from '../components/StickyFooter';
+import OrderCommand from '../components/OrderCommand';
 
 const foodItems = [
   {
-    id: 1,
-    name: 'Cappuccino',
-    description: 'Espresso',
-    imageUrl: 'img/cappuccino.jpg',
+    id: "1",
+    name: 'Avocado Toast',
+    description: 'Delicious avocado on toast with eggs and tomatoes',
+    imageUrl: 'img/food/pexels-avocado-toast.jpeg',
   },
   {
-    id: 2,
-    name: 'Latte',
-    description: 'Espresso',
-    imageUrl: 'img/latte.jpg',
+    id: "2",
+    name: 'Old School Burger',
+    description: 'Classic beef burger with lettuce, tomato, cheese and side of fries',
+    imageUrl: 'img/food/pexels-burger.jpeg',
   },
   {
-    id: 3,
-    name: 'Espresso',
-    description: 'Espresso',
-    imageUrl: 'img/espresso.jpg',
+    id: "3",
+    name: 'Shrimp and egg ramen',
+    description: 'Spicy ramen with shrimp, egg, and vegetables',
+    imageUrl: 'img/food/pexels-ramen.jpeg',
   },
   {
-    id: 4,
-    name: 'Mocha',
-    description: 'Espresso',
-    imageUrl: 'img/mocha.jpg',
+    id: "4",
+    name: 'Salted Caramel Pancakes',
+    description: 'Delicious pancakes with salted caramel sauce and strawberries',
+    imageUrl: 'img/food/pexels-pancakes.jpeg',
   },
 ];
 
 const drinkItems = [
   {
-    id: 5,
-    name: 'Americano',
-    description: 'Espresso',
-    imageUrl: 'img/americano.jpg',
+    id: "5",
+    name: 'Orange Juice',
+    description: 'Freshly squeezed orange juice',
+    imageUrl: 'img/drinks/pexels-orange-juice.jpeg',
   },
   {
-    id: 6,
-    name: 'Macchiato',
-    description: 'Espresso',
-    imageUrl: 'img/macchiato.jpg',
+    id: "6",
+    name: 'Strawberry Milkshake',
+    description: 'Delicious strawberry milkshake with whipped cream and strawberries',
+    imageUrl: 'img/drinks/pexels-strawberry-mikshake.jpeg',
   },
   {
-    id: 7,
-    name: 'Flat White',
-    description: 'Espresso',
-    imageUrl: 'img/flat-white.jpg',
+    id: "7",
+    name: 'Gin and Tonic',
+    description: 'Classic gin and tonic with lime and ice',
+    imageUrl: 'img/drinks/pexels-gin-tonic.jpeg',
   },
   {
-    id: 8,
-    name: 'Affogato',
-    description: 'Espresso',
-    imageUrl: 'img/affogato.jpg',
+    id: "8",
+    name: 'Old Fashioned',
+    description: 'Classic old fashioned cocktail with orange and cherry',
+    imageUrl: 'img/drinks/pexels-old-fashioned.jpeg',
   },
 ];
 
 export function Customer() {
+
+
+  const [food, setFood] = useState("");
+  const [drink, setDrink] = useState("");
+
+  function selectFoodItem(item: string) {
+    setFood(item);
+  }
+
+  function selectDrinkItem(item: string) {
+    setDrink(item);
+  }
+
+
+
   return (
     <div className="bg-gray-100">
       <Navbar />
-      <ItemsList title="Food Menu" items={foodItems} />
-      <ItemsList title="Drinks Menu" items={drinkItems} />
-      <StickyFooter />
+      <ItemsList title="Food Menu" items={foodItems} onClick={selectFoodItem} />
+      <ItemsList title="Drinks Menu" items={drinkItems} onClick={selectDrinkItem} />
+      <OrderCommand food={food} drink={drink} email="john.doe@email.com" />
     </div>
   );
 }