Merge branch 'main' of https://github.com/FernandoNarvaez1904/ecommerce

apps/nextjs/src/components/ItemHeader/Header.module.css

@@ -0,0 +1,24 @@
+.header {
+  padding: 2em;
+  display: flex;
+  justify-content: space-between;
+}
+.logoSpan {
+  display: flex;
+}
+.logoSpan img {
+  padding-right: 5px;
+}
+.listSpan ul {
+  display: flex;
+}
+.listSpan ul li {
+  padding: 7px;
+  font-weight: bold;
+}
+#searchBar {
+  box-sizing: border-box;
+  border: 1px solid gray;
+  border-radius: 3px;
+  padding: 5px 10px;
+}

apps/nextjs/src/components/ItemHeader/ItemHeader.tsx

@@ -0,0 +1,24 @@
+import { useRouter } from "next/router";
+import styles from "./Header.module.css";
+
+function ItemHeader() {
+  const router = useRouter();
+  return (
+    <>
+      <header className={styles.header}>
+        <span className={styles.logoSpan}>
+          <img src="logo" alt="header-logo" />
+        </span>
+        <span className={styles.listSpan}>
+          <ul>
+            <li onClick={() => router.back()}>Home</li>
+            <li>Shop</li>
+            <li>About</li>
+            <li>Contact</li>
+          </ul>
+        </span>
+      </header>
+    </>
+  );
+}
+export default ItemHeader;

apps/nextjs/src/components/RegisterForm/RegisterForm.module.css

@@ -0,0 +1,54 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-top: 15%;
+  margin-left: 30%;
+  margin-right: 30%;
+  height: 400px;
+  background-color: rgb(229, 236, 238);
+  padding: 25px;
+  border-radius: 5px;
+}
+.container h1 {
+  font-size: xx-large;
+  text-align: center;
+  margin-top: 0.7em;
+}
+.container form {
+  display: flex;
+  flex-direction: column;
+}
+.container form label {
+  font-size: large;
+  margin-bottom: 5px;
+}
+.container form input {
+  height: 40px;
+  border-radius: 3px;
+  padding-left: 10px;
+  margin-bottom: 5px;
+}
+.container button {
+  height: 40px;
+  background-color: rgb(211, 211, 211);
+  border-radius: 3px;
+  width: 100px;
+}
+.container button:active {
+  background-color: darkgrey;
+}
+.container p {
+  text-align: center;
+}
+.container p a {
+  color: rgb(64, 64, 241);
+}
+.buttonDiv {
+  margin-top: 5px;
+  display: flex;
+  justify-content: space-between;
+}
+.cancelbtn {
+  background-color: red;
+}

apps/nextjs/src/components/RegisterForm/RegisterForm.tsx

@@ -0,0 +1,47 @@
+import styles from "./RegisterForm.module.css";
+import { useRouter } from "next/router";
+function RegisterForm() {
+  const router = useRouter();
+  return (
+    <>
+      <form action="" method="post">
+        <div className={styles.container}>
+          <h1>Sign Up</h1>
+          <hr />
+
+          <label htmlFor="email">Email</label>
+          <input type="text" placeholder="Enter Email" name="email" required />
+
+          <label htmlFor="psw">Password</label>
+          <input
+            type="password"
+            placeholder="Enter Password"
+            name="psw"
+            required
+          />
+
+          <label htmlFor="psw-repeat"> Repeat Password </label>
+          <input
+            type="password"
+            placeholder="Repeat Password"
+            name="psw-repeat"
+            required
+          />
+          <div className={styles.buttonDiv}>
+            <button
+              type="button"
+              className={styles.cancelbtn}
+              onClick={() => router.back()}
+            >
+              Cancel
+            </button>
+            <button type="submit" className={styles.signupbtn}>
+              Sign Up
+            </button>
+          </div>
+        </div>
+      </form>
+    </>
+  );
+}
+export default RegisterForm;

apps/nextjs/src/components/aside/Aside.module.css

@@ -0,0 +1,16 @@
+.aside {
+  background-color: lightgray;
+  width: 20%;
+  height: 100;
+  padding: 1.5em;
+}
+.aside h2 {
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.aside li {
+  padding: 3px;
+}
+.aside li:hover {
+  background-color: gray;
+}

apps/nextjs/src/components/aside/Aside.tsx

@@ -0,0 +1,18 @@
+import styles from "./Aside.module.css";
+function Aside() {
+  return (
+    <>
+      <aside className={styles.aside}>
+        <h2>Categories</h2>
+        <ul>
+          <li>Clothing</li>
+          <li>Electronics</li>
+          <li>Home & kitchen</li>
+          <li>Books</li>
+          <li>Toys</li>
+        </ul>
+      </aside>
+    </>
+  );
+}
+export default Aside;

apps/nextjs/src/components/content/Content.module.css

@@ -0,0 +1,45 @@
+.container {
+  display: flex;
+}
+.container main {
+  width: 80%;
+  display: flex;
+  flex-wrap: wrap;
+}
+.card {
+  width: 20%;
+  margin: 30px;
+  border: 3px solid lightgrey;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.card picture {
+  display: flex;
+  justify-content: center;
+}
+.card img {
+  max-height: 200px;
+}
+.card h3 {
+  margin-top: 7px;
+  font-weight: bold;
+}
+.card p {
+  margin-top: 7px;
+  font-weight: bold;
+}
+.card button {
+  color: white;
+  background-color: black;
+  margin-top: 7px;
+  padding-left: 2em;
+  padding-right: 2em;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  border-radius: 4px;
+}
+.card button:active {
+  background-color: gray;
+}

apps/nextjs/src/components/content/Content.tsx

@@ -0,0 +1,46 @@
+import Aside from "../aside/Aside";
+import styles from "./Content.module.css";
+import { trpc } from "../../utils/trpc";
+import { useRouter } from "next/router";
+
+interface ContentProps {
+  filterValue: string;
+}
+
+function Content({ filterValue }: ContentProps) {
+  const { data } = trpc.item.all.useQuery();
+  const router = useRouter();
+
+  const filteredData =
+    data?.filter((item) =>
+      item.name.toLowerCase().includes(filterValue.toLowerCase()),
+    ) ?? [];
+
+  return (
+    <>
+      <div className={styles.container}>
+        <Aside></Aside>
+        <main>
+          {filteredData.map((item) => (
+            <span
+              className={styles.card}
+              key={item.id}
+              onClick={() => router.push(`/item/${item.id}`)}
+            >
+              <picture>
+                <img
+                  src={item.image_url != null ? item.image_url : ""}
+                  alt="product"
+                />
+              </picture>
+              <h3>{item.name}</h3>
+              <p>${item.price.toFixed(2)}</p>
+              <button type="button">Add to cart</button>
+            </span>
+          ))}
+        </main>
+      </div>
+    </>
+  );
+}
+export default Content;

apps/nextjs/src/components/header/Header.module.css

@@ -0,0 +1,24 @@
+.header {
+  padding: 2em;
+  display: flex;
+  justify-content: space-between;
+}
+.logoSpan {
+  display: flex;
+}
+.logoSpan img {
+  padding-right: 5px;
+}
+.listSpan ul {
+  display: flex;
+}
+.listSpan ul li {
+  padding: 7px;
+  font-weight: bold;
+}
+#searchBar {
+  box-sizing: border-box;
+  border: 1px solid gray;
+  border-radius: 3px;
+  padding: 5px 10px;
+}

apps/nextjs/src/components/header/Header.tsx

@@ -0,0 +1,37 @@
+import styles from "./Header.module.css";
+import { useRouter } from "next/router";
+import { Dispatch, SetStateAction } from "react";
+
+interface HeaderProps {
+  filterValue: string;
+  setFilterValue: Dispatch<SetStateAction<string>>;
+}
+
+function Header({ filterValue, setFilterValue }: HeaderProps) {
+  const router = useRouter();
+  return (
+    <>
+      <header className={styles.header}>
+        <span className={styles.logoSpan}>
+          <img src="logo" alt="header-logo" />
+          <input
+            type="search"
+            id={styles.searchBar}
+            placeholder="🔍 Search products..."
+            value={filterValue}
+            onChange={(e) => setFilterValue(e.currentTarget.value)}
+          ></input>
+        </span>
+        <span className={styles.listSpan}>
+          <ul>
+            <li>Home</li>
+            <li onClick={() => router.push(`/shoppingCart`)}>Shop</li>
+            <li onClick={() => router.push(`/login`)}>About</li>
+            <li>Contact</li>
+          </ul>
+        </span>
+      </header>
+    </>
+  );
+}
+export default Header;