frontend done (except orders in administration.tsx)

package.json

@@ -15,6 +15,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@material-ui/icons": "^4.11.3",
     "@types/express": "^4.17.21",
     "class-sanitizer": "^1.0.1",
     "class-transformer": "^0.5.1",
@@ -45,6 +46,7 @@
     "match-sorter": "^6.3.1",
     "prettier": "3.1.1",
     "react-router-dom": "^6.21.1",
+    "tailwindcss": "^3.4.1",
     "ts-node": "^10.9.2"
   }
 }

src/pages/administration.tsx

+"use client";
+import React from "react";
+//import {Routes, Route, useNavigate} from 'react-router-dom';
+import DeleteIcon from "@material-ui/icons/Delete";
+import RemoveIcon from "@material-ui/icons/Remove";
+import AddIcon from "@material-ui/icons/Add";
+
+const products = [
+  {
+    ID: "0",
+    title: "Product Title 1",
+    description: "This is product description. Its purpose is to describe the product.",
+    price: "19.99",
+    imageUrl: "https://eshop.technikert.com/wp-content/uploads/2017/12/tshirt-1.jpg",
+  },
+  {
+    ID: "1",
+    title: "Product Title 2",
+    description: "This is product description. Its purpose is to describe the product.",
+    price: "29.99",
+    imageUrl: "https://eshop.technikert.com/wp-content/uploads/2017/12/tshirt-1.jpg",
+  },
+  {
+    ID: "2",
+    title: "Product Title 3",
+    description: "This is product description. Its purpose is to describe the product.",
+    price: "39.99",
+    imageUrl: "https://eshop.technikert.com/wp-content/uploads/2017/12/tshirt-1.jpg",
+  },
+];
+const productsQueue = [
+  {
+    ID: "1",
+    title: "Product Title 1 in queue",
+    description: "This is product description. Its purpose is to describe the product.",
+    price: "19.99",
+    imageUrl: "https://eshop.technikert.com/wp-content/uploads/2017/12/tshirt-1.jpg",
+  },
+  {
+    ID: "2",
+    title: "Product Title 2 in queue",
+    description: "This is product description. Its purpose is to describe the product.",
+    price: "29.99",
+    imageUrl: "https://eshop.technikert.com/wp-content/uploads/2017/12/tshirt-1.jpg",
+  },
+  {
+    ID: "3",
+    title: "Product Title 3 in queue",
+    description: "This is product description. Its purpose is to describe the product.",
+    price: "39.99",
+    imageUrl: "https://eshop.technikert.com/wp-content/uploads/2017/12/tshirt-1.jpg",
+  },
+];
+const productsOther = [
+  {
+    ID: "0",
+    title: "Product Title 1",
+    description: "This is product description. Its purpose is to describe the product.",
+    price: "19.99",
+    imageUrl: "https://eshop.technikert.com/wp-content/uploads/2017/12/tshirt-1.jpg",
+  },
+  {
+    ID: "1",
+    title: "Product Title 2",
+    description: "This is product description. Its purpose is to describe the product.",
+    price: "29.99",
+    imageUrl: "https://eshop.technikert.com/wp-content/uploads/2017/12/tshirt-1.jpg",
+  },
+  {
+    ID: "2",
+    title: "Product Title 3",
+    description: "This is product description. Its purpose is to describe the product.",
+    price: "39.99",
+    imageUrl: "https://eshop.technikert.com/wp-content/uploads/2017/12/tshirt-1.jpg",
+  },
+  {
+    ID: "4",
+    title: "Product Title 4",
+    description: "This is product description. Its purpose is to describe the product.",
+    price: "49.99",
+    imageUrl: "https://eshop.technikert.com/wp-content/uploads/2017/12/tshirt-1.jpg",
+  },
+  {
+    ID: "5",
+    title: "Product Title 5",
+    description: "This is product description. Its purpose is to describe the product.",
+    price: "59.99",
+    imageUrl: "https://eshop.technikert.com/wp-content/uploads/2017/12/tshirt-1.jpg",
+  },
+  {
+    ID: "6",
+    title: "Product Title 6",
+    description: "This is product description. Its purpose is to describe the product.",
+    price: "69.99",
+    imageUrl: "https://eshop.technikert.com/wp-content/uploads/2017/12/tshirt-1.jpg",
+  },
+];
+
+function Content() {
+  return (
+    <div className="flex flex-col gap-16 my-16 items-center">
+      <p className="font-bold text-3xl">Eshop Administration</p>
+      <div className="flex gap-10">
+        <ListProducts />
+        <ListQueue />
+      </div>
+      <div>
+        <ListOther />
+      </div>
+      <div>//orders</div>
+    </div>
+  );
+}
+
+function ListProducts() {
+  const listItems = products.map((product) => <Card product={product} button={<Remove />} />);
+  return (
+    <div>
+      <p className="font-bold text-2xl mb-5">Currently offering</p>
+      <div className="flex justify-between gap-5">{listItems}</div>
+    </div>
+  );
+}
+
+function ListQueue() {
+  const listItems = productsQueue.map((product) => <Card product={product} button={<Remove />} />);
+  return (
+    <div>
+      <p className="font-bold text-2xl mb-5">Queue</p>
+      <div className="flex justify-between gap-5">{listItems}</div>
+    </div>
+  );
+}
+
+function ListOther() {
+  const listItems = productsOther.map((product) => <Card product={product} button={<Add />} />);
+  return (
+    <div>
+      <p className="font-bold text-2xl mb-5">Other products</p>
+      <div className="flex justify-between gap-5">{listItems}</div>
+    </div>
+  );
+}
+
+function Card({ product, button }) {
+  return (
+    <div key={product.ID}>
+      <div className="w-52 flex flex-col items-start gap-4 p-6 rounded-xl bg-dark-21">
+        <div className="rounded-lg overflow-hidden">
+          <img className="product_img" src={product.imageUrl} alt={"photo of " + product.title} />
+        </div>
+
+        <p className="font-bold text-base">{product.title}</p>
+        <p className="text-xs">{product.description}</p>
+        <div className="flex justify-between items-center w-full h-6">
+          <p className="text-sm font-semibold">{"$" + product.price}</p>
+          <button className="bg-red-600 hover:bg-red-700 transition ease-in-out duration-300 rounded-md px-1.5 py-1">
+            <DeleteIcon />
+          </button>
+        </div>
+        {button}
+      </div>
+    </div>
+  );
+}
+
+function Add() {
+  return (
+    <div className="flex justify-between w-full">
+      <button className="flex items-center bg-purple-600 hover:bg-purple-700 transition ease-in-out duration-300 rounded-md pr-2 pl-1 py-1">
+        <AddIcon />
+        <p className="text-sm">Page</p>
+      </button>
+      <button className="flex items-center bg-purple-600 hover:bg-purple-700 transition ease-in-out duration-300 rounded-md pr-2 pl-1 py-1">
+        <AddIcon />
+        <p className="text-sm">Queue</p>
+      </button>
+    </div>
+  );
+}
+
+function Remove() {
+  return (
+    <div className="flex w-full justify-center">
+      <button className="flex items-center bg-violet-600 hover:bg-violet-700 transition ease-in-out duration-300 rounded-md px-1 py-1">
+        <RemoveIcon />
+        <p className="text-sm">Move out</p>
+      </button>
+    </div>
+  );
+}
+
+/*
+function orders() {
+  return (
+
+  )
+}
+*/
+
+export default function MyApp() {
+  return <Content />;
+}

src/pages/confirmation.tsx

+import React from "react";
+//import {Routes, Route, useNavigate} from 'react-router-dom';
+import BuyBtn from "../components/buyBtn";
+
+const product = {
+  ID: "0",
+  title: "Product Title 1",
+  description: "This is product description. Its purpose is to describe the product.",
+  price: "19.99",
+  imageUrl: "https://eshop.technikert.com/wp-content/uploads/2017/12/tshirt-1.jpg",
+};
+
+function Content() {
+  return (
+    <div className="flex gap-32 my-16 justify-center">
+      <div className="flex flex-col gap-10">
+        <p className="font-bold text-3xl">You are buying</p>
+        <Card />
+      </div>
+      <div className="flex flex-col gap-10">
+        <p className="font-bold text-3xl">Your details</p>
+        <div className="p-6 rounded-3xl bg-dark-21">
+          <Form />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Card() {
+  return (
+    <div key={product.ID}>
+      <div className="w-80 flex flex-col items-start gap-4 p-6 rounded-xl bg-dark-21">
+        <div className="rounded-lg overflow-hidden">
+          <img className="product_img" src={product.imageUrl} alt={"photo of " + product.title} />
+        </div>
+
+        <p className="font-bold text-2xl">{product.title}</p>
+        <p className="text-base">{product.description}</p>
+        <div className="flex justify-between items-center w-full">
+          <p className="text-base font-bold">{product.price + " USD"}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Form() {
+  function save(formData) {
+    const name = formData.get("name");
+    const surname = formData.get("surname");
+    const address = formData.get("address");
+    const email = formData.get("email");
+    alert(
+      `'${name}' '${surname}' requested item delivery at address '${address}'. We will inform him further on his email address '${email}'`,
+    );
+    //action={save} do formu -> error
+  }
+  return (
+    <form className="flex flex-col gap-5 w-120">
+      <div className="flex gap-3">
+        <div className="flex flex-col gap-1">
+          <label htmlFor="name">Name</label>
+          <input name="name" className="p-1 bg-dark-21 border-2 border-dark-82 rounded-md" placeholder="e.g. John" />
+        </div>
+        <div className="flex flex-col gap-1">
+          <label htmlFor="surname">Surname</label>
+          <input
+            name="surname"
+            className="p-1 bg-dark-21 border-2 border-dark-82 rounded-md"
+            placeholder="e.g. Smith"
+          />
+        </div>
+      </div>
+      <div className="flex flex-col gap-1">
+        <label htmlFor="email">Email</label>
+        <input
+          name="email"
+          className="p-1 bg-dark-21 border-2 border-dark-82 rounded-md"
+          placeholder="e.g. example@gmail.com"
+        />
+      </div>
+      <div className="flex flex-col gap-1">
+        <label htmlFor="address">Address</label>
+        <input
+          name="address"
+          className="p-1 bg-dark-21 border-2 border-dark-82 rounded-md"
+          placeholder="e.g. Street III 1234/5, 123 00 City 1"
+        />
+      </div>
+      <div className="flex justify-center">
+        <button
+          type="submit"
+          className="px-5 py-2 mt-2 transition ease-in-out duration-300 rounded-full bg-green-600 hover:bg-green-700"
+        >
+          Purchase
+        </button>
+      </div>
+    </form>
+  );
+}
+
+export default function MyApp() {
+  return <Content />;
+}

tailwind.config.js

+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+  content: [],
+  theme: {
+    extend: {
+      colors: {
+        "dark-12": "#121212",
+        "dark-21": "#212121",
+        "dark-42": "#424242",
+        "dark-63": "#636363",
+        "dark-82": "#828282",
+      },
+    },
+  },
+  plugins: [],
+};