From 0b7162ade424da01e436a47528c98c545ae56181 Mon Sep 17 00:00:00 2001 From: stefano Date: Fri, 30 Jun 2023 16:09:07 -0500 Subject: [PATCH 01/21] arreglando el Header --- src/app/page.tsx | 6 ++--- src/components/Header.tsx | 46 ++++++++++++++++++++++++++------------- tailwind.config.js | 2 ++ 3 files changed, 35 insertions(+), 19 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index b8cf5f6..e793810 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -67,10 +67,8 @@ const Home = () => { }; return ( <> - -
-
+
+
diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 0b6b2f5..d4e924c 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,42 +1,58 @@ import React from "react"; import Image from "next/image"; +import Buscador from "./Buscador"; const Header = () => { return ( <> -
-
+
+
+
Logo de GameOn
-
-
-

Iniciar Sesión

+
+ +
+
+
+

+ Iniciar Sesión +

Usuario
-
-

Carrito

+
+

+ Carrito +

Carrito de Compras + className="h-[27px] w-[27px] mt-2.5 cursor-pointer mobile2:h-[28px] mobile2:w-[28px] mobile3:h-[28px] mobile3:w-[28px]" + src="/CarritoDeCompras.png" + width={1000} + height={1000} + alt="Carrito de Compras" + />
+
); }; diff --git a/tailwind.config.js b/tailwind.config.js index f30738b..d491518 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -21,6 +21,8 @@ module.exports = { 'tablet':'767px', 'tablet1004':'1004px', 'laptop':'1024px', + 'laptopL':'1440px', + 'laptopL2':'1535px', 'desktopmd': '1833px', 'desktopmd2': '1965px', 'desktop': '2000px', From 3107d0926e6d0464f1024bc12a96db94f930c415 Mon Sep 17 00:00:00 2001 From: stefano Date: Fri, 30 Jun 2023 19:23:16 -0500 Subject: [PATCH 02/21] Header con cambios finalizado --- package.json | 1 + src/app/page.tsx | 18 ++----- src/components/Header.tsx | 99 +++++++++++++++++++++++---------------- tailwind.config.js | 11 ----- yarn.lock | 61 +++++++++++++++++++++++- 5 files changed, 123 insertions(+), 67 deletions(-) diff --git a/package.json b/package.json index 720ad28..db1d613 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "next": "^13.4.6", "postcss": "8.4.24", "react": "18.2.0", + "react-custom-scrollbars": "^4.2.1", "react-dom": "18.2.0", "tailwindcss": "3.3.2", "turbo": "^1.10.3", diff --git a/src/app/page.tsx b/src/app/page.tsx index e793810..bc7ac29 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -67,9 +67,8 @@ const Home = () => { }; return ( <> -
-
-
+
+
{ className={isLaptopsClicked ? 'bg-orange-300 text-white w-24' : 'bg-gray-300 text-gray-500 w-24'} onClick={handleClickLaptops} /> -
+
- {/* ver si se puede aplicar flex-1 al contenido y al body colocarle flex y quitar ese p-*/} - {

- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae iste eos quisquam nam magnam. Inventore culpa, facere cum distinctio dolorum saepe est molestias, placeat animi, impedit repellat aliquid asperiores? Mollitia. - Sit rem neque iste, tenetur veritatis assumenda accusamus cum tempora. Eveniet soluta labore ad sapiente harum asperiores, autem sint mollitia at nemo consequuntur fuga doloribus commodi qui possimus consequatur porro! - Ipsam ab rem voluptatibus corporis inventore nihil distinctio doloremque quod, consequatur quasi tempora architecto laudantium quis nobis. Ab laudantium suscipit cupiditate sint unde amet nulla eligendi, aliquid temporibus esse ducimus. - Sunt atque labore assumenda dolor in, eius cumque doloribus voluptatibus quas aspernatur explicabo repellat nihil quos libero at error recusandae tempore neque itaque! Dolore perferendis eum ullam rem, officiis eos! - Nobis, consequuntur nesciunt voluptas rerum sequi quae nisi minus, tempora exercitationem repellendus praesentium accusamus minima! Nisi optio officia, doloremque et, sit quidem dolorum eaque accusantium adipisci quod tempora amet. Provident? - Nam tempora eaque voluptatem asperiores ab? Voluptates fuga ullam vero cupiditate quos praesentium ea ipsum nemo fugit mollitia, cum rem? Deserunt veniam sunt inventore ad. Perferendis expedita praesentium cum incidunt! - Nam tempora eaque voluptatem asperiores ab? asdfasdf -

} +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur rerum, est laudantium quod in placeat ratione porro vitae! Illum veritatis asperiores expedita repellendus soluta cupiditate ullam commodi totam quia amet.

) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index d4e924c..b3316d3 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -5,53 +5,70 @@ import Buscador from "./Buscador"; const Header = () => { return ( <> -
-
-
- Logo de GameOn -
-
- -
-
-
-

- Iniciar Sesión -

+
+
+
Usuario -
-
-

- Carrito -

- Carrito de Compras
+
+ +
+
+
+

+ Iniciar Sesión +

+ Usuario +
+
+

+ Carrito +

+ Carrito de Compras +
+
+ +
+
+ + Icono de búsqueda
-
); diff --git a/tailwind.config.js b/tailwind.config.js index d491518..5860882 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -15,21 +15,10 @@ module.exports = { screens: { 'mobile2':'374px', 'mobile3': '424px', - 'desktop-minimizar':'520px', - 'tablet-670':'670px', - 'tablet-mitad':'550px', 'tablet':'767px', - 'tablet1004':'1004px', 'laptop':'1024px', 'laptopL':'1440px', 'laptopL2':'1535px', - 'desktopmd': '1833px', - 'desktopmd2': '1965px', - 'desktop': '2000px', - '2.5xl':'1600px', - '2.7xl':'1668px', - '2.8xl':'1700px', - '3xl': '1534px', } }, }, diff --git a/yarn.lock b/yarn.lock index e339404..d806b52 100644 --- a/yarn.lock +++ b/yarn.lock @@ -294,6 +294,11 @@ acorn@^8.8.0: resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a" integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw== +add-px-to-style@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a" + integrity sha512-YMyxSlXpPjD8uWekCQGuN40lV4bnZagUwqa2m/uFv1z/tNImSk9fnXVMUI5qwME/zzI3MMQRvjZ+69zyfSSyew== + ajv@^6.10.0, ajv@^6.12.4: version "6.12.6" resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4" @@ -679,6 +684,15 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" +dom-css@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202" + integrity sha512-w9kU7FAbaSh3QKijL6n59ofAhkkmMJ31GclJIz/vyQdjogfyxcB6Zf8CZyibOERI5o0Hxz30VmJS7+7r5fEj2Q== + dependencies: + add-px-to-style "1.0.0" + prefix-style "2.0.1" + to-camel-case "1.0.0" + electron-to-chromium@^1.4.428: version "1.4.430" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.430.tgz#52693c812a81800fafb5b312c1a850142e2fc9eb" @@ -1896,6 +1910,11 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== +performance-now@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" + integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow== + picocolors@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" @@ -1978,12 +1997,17 @@ postcss@8.4.24, postcss@^8.4.23: picocolors "^1.0.0" source-map-js "^1.0.2" +prefix-style@2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06" + integrity sha512-gdr1MBNVT0drzTq95CbSNdsrBDoHGlb2aDJP/FoY+1e+jSDPOb1Cv554gH2MGiSr2WTcXi/zu+NaFzfcHQkfBQ== + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -prop-types@^15.8.1: +prop-types@^15.5.10, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -2002,6 +2026,22 @@ queue-microtask@^1.2.2: resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== +raf@^3.1.0: + version "3.4.1" + resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" + integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== + dependencies: + performance-now "^2.1.0" + +react-custom-scrollbars@^4.2.1: + version "4.2.1" + resolved "https://registry.yarnpkg.com/react-custom-scrollbars/-/react-custom-scrollbars-4.2.1.tgz#830fd9502927e97e8a78c2086813899b2a8b66db" + integrity sha512-VtJTUvZ7kPh/auZWIbBRceGPkE30XBYe+HktFxuMWBR2eVQQ+Ur6yFJMoaYcNpyGq22uYJ9Wx4UAEcC0K+LNPQ== + dependencies: + dom-css "^2.0.0" + prop-types "^15.5.10" + raf "^3.1.0" + react-dom@18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" @@ -2344,6 +2384,18 @@ titleize@^3.0.0: resolved "https://registry.yarnpkg.com/titleize/-/titleize-3.0.0.tgz#71c12eb7fdd2558aa8a44b0be83b8a76694acd53" integrity sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ== +to-camel-case@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46" + integrity sha512-nD8pQi5H34kyu1QDMFjzEIYqk0xa9Alt6ZfrdEMuHCFOfTLhDG5pgTu/aAM9Wt9lXILwlXmWP43b8sav0GNE8Q== + dependencies: + to-space-case "^1.0.0" + +to-no-case@^1.0.0: + version "1.0.2" + resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a" + integrity sha512-Z3g735FxuZY8rodxV4gH7LxClE4H0hTIyHNIHdk+vpQxjLm0cwnKXq/OFVZ76SOQmto7txVcwSCwkU5kqp+FKg== + to-regex-range@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4" @@ -2351,6 +2403,13 @@ to-regex-range@^5.0.1: dependencies: is-number "^7.0.0" +to-space-case@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17" + integrity sha512-rLdvwXZ39VOn1IxGL3V6ZstoTbwLRckQmn/U8ZDLuWwIXNpuZDhQ3AiRUlhTbOXFVE9C+dR51wM0CBDhk31VcA== + dependencies: + to-no-case "^1.0.0" + ts-interface-checker@^0.1.9: version "0.1.13" resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699" From 2ca3c938af91c47625f3e5ad7cd2613707837afb Mon Sep 17 00:00:00 2001 From: stefano Date: Fri, 30 Jun 2023 19:36:32 -0500 Subject: [PATCH 03/21] Header finalizado con arreglos --- src/components/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index b3316d3..6590f4d 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -7,7 +7,7 @@ const Header = () => { <>
-
+
Date: Fri, 30 Jun 2023 19:40:24 -0500 Subject: [PATCH 04/21] Header finalizado --- src/app/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index bc7ac29..acd2b0e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -67,7 +67,7 @@ const Home = () => { }; return ( <> -
+
From 9265cb543d982ee4bd13aee93289e9869f339575 Mon Sep 17 00:00:00 2001 From: stefano Date: Sun, 2 Jul 2023 11:08:00 -0500 Subject: [PATCH 05/21] Hotfix quitando el margin bottom a los productos --- src/components/Products.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Products.tsx b/src/components/Products.tsx index 7322c1e..6d84dd8 100644 --- a/src/components/Products.tsx +++ b/src/components/Products.tsx @@ -50,7 +50,7 @@ export default async function Products() { return (
-

+

Productos en oferta

From 7ef964aa3811d7f7e3b907d077d75882cd2b2a46 Mon Sep 17 00:00:00 2001 From: stefano Date: Sun, 2 Jul 2023 11:25:28 -0500 Subject: [PATCH 06/21] HotFix logo redirige al main funcionando --- src/components/Header.tsx | 42 +++------------------------------------ 1 file changed, 3 insertions(+), 39 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index c026d88..b5d6d73 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -9,7 +9,7 @@ const Header = () => { -
- - Icono de búsqueda -
+
); From ffe4e12ab878bccdf83be88736c5ce6120a30725 Mon Sep 17 00:00:00 2001 From: stefano Date: Sun, 2 Jul 2023 12:14:51 -0500 Subject: [PATCH 07/21] Header con cambios 02062023 , para hacer pull de la nueva API --- src/api/api.ts | 2 +- src/components/Header.tsx | 21 ++++++--------------- 2 files changed, 7 insertions(+), 16 deletions(-) diff --git a/src/api/api.ts b/src/api/api.ts index c45abb2..36aa68b 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -1,4 +1,4 @@ -const url = "https://run.mocky.io/v3/0a111700-e670-4dc6-988e-dff27d84cf5d"; +const url = "https://run.mocky.io/v3/a1aa2d7c-0d69-41c5-a58b-53854ffd360c"; export async function getProducts() { const response = await fetch(url); diff --git a/src/components/Header.tsx b/src/components/Header.tsx index b5d6d73..f2c079e 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -8,7 +8,7 @@ const Header = () => { <>
- From 57eb3c02ddba2282c4fc2bcc379941cac769fa36 Mon Sep 17 00:00:00 2001 From: stefano Date: Sun, 2 Jul 2023 11:08:00 -0500 Subject: [PATCH 08/21] Hotfix quitando el margin bottom a los productos --- src/components/Products.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Products.tsx b/src/components/Products.tsx index 7c44f87..97aca0d 100644 --- a/src/components/Products.tsx +++ b/src/components/Products.tsx @@ -52,7 +52,7 @@ export default async function Products() { return (
-

+

Productos en oferta

From a1f4c0d3dfe359301fa49b4fbba8cd31fcb7d8b9 Mon Sep 17 00:00:00 2001 From: stefano Date: Sun, 2 Jul 2023 16:14:59 -0500 Subject: [PATCH 09/21] Hotfix Cambios a Products.tsx para que sea renderizado como un componente --- src/app/page.tsx | 7 +++++-- src/components/Header.tsx | 2 +- src/components/Products.tsx | 16 ++++++++++++++-- 3 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index ad9544f..e646114 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,11 +1,13 @@ 'use client' -import React,{ useState } from 'react' +import React, { useState, useEffect } from 'react'; import Footer from '../components/Footer' import Header from '../components/Header' import HeaderBotones from '@/components/HeaderBotones' import Buscador from '@/components/Buscador' -import Products from "@/components/Products"; +import { getProducts } from '../api/api'; +import { IProducts } from '@/models/product'; +import {Products} from "@/components/Products"; const Home = () => { const [isTodosClicked, setIsTodosClicked] = useState(true); @@ -66,6 +68,7 @@ const Home = () => { setIsParlantesClicked(false); setIsLaptopsClicked(true); }; + return ( <>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx index f2c079e..f6179be 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -9,7 +9,7 @@ const Header = () => {
- + { + const [products, setProducts] = useState([]); + + useEffect(() => { + const fetchProducts = async () => { + const fetchedProducts = await getProducts(); + setProducts(fetchedProducts); + }; + + fetchProducts(); + }, []); -export default async function Products() { const settings = { infinite: true, speed: 300, @@ -48,7 +60,7 @@ export default async function Products() { //utilizar enmuns en lugar de comparcion de strings // const OFERTA = "oferta " - const products = await getProducts(); + return (
From ed40135ca01a9291ebec9a81c42b0c53bd828e29 Mon Sep 17 00:00:00 2001 From: stefano Date: Sun, 2 Jul 2023 17:34:35 -0500 Subject: [PATCH 10/21] Cambios en Products --- src/app/page.tsx | 3 ++- src/components/Products.tsx | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index e646114..e8b9b2e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -68,6 +68,7 @@ const Home = () => { setIsParlantesClicked(false); setIsLaptopsClicked(true); }; + return ( <> @@ -101,7 +102,7 @@ const Home = () => {
- +
diff --git a/src/components/Products.tsx b/src/components/Products.tsx index be9053e..b499c38 100644 --- a/src/components/Products.tsx +++ b/src/components/Products.tsx @@ -6,6 +6,7 @@ import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import React, { useState, useEffect } from 'react'; + export const Products = () => { const [products, setProducts] = useState([]); From 3fc73b3615d5764d0f7f783d1da7efe206eb52d5 Mon Sep 17 00:00:00 2001 From: stefano Date: Sun, 2 Jul 2023 23:02:46 -0500 Subject: [PATCH 11/21] boton Monitores filtrando correctamente! boton Perifericcos filtra doble --- src/app/page.tsx | 121 +++++++++--------------------------- src/components/Products.tsx | 12 ++-- 2 files changed, 36 insertions(+), 97 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index e8b9b2e..3941a58 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,106 +10,41 @@ import { IProducts } from '@/models/product'; import {Products} from "@/components/Products"; const Home = () => { - const [isTodosClicked, setIsTodosClicked] = useState(true); - const [isMonitoresClicked, setIsMonitoresClicked] = useState(false); - const [isPerifericosClicked, setIsPerifericosClicked] = useState(false); - const [isTecladosClicked, setIsTecladosClicked] = useState(false); - const [isParlantesClicked, setIsParlantesClicked] = useState(false); - const [isLaptopsClicked, setIsLaptopsClicked] = useState(false); + const [filterCategory, setFilterCategory] = useState(''); - const handleClickTodos = () => { - setIsTodosClicked(true); - setIsMonitoresClicked(false); - setIsPerifericosClicked(false); - setIsTecladosClicked(false); - setIsParlantesClicked(false); - setIsLaptopsClicked(false); + const handleClickCategory = (category: string) => { + setFilterCategory(category); }; - const handleClickMonitores = () => { - setIsTodosClicked(false); - setIsMonitoresClicked(true); - setIsPerifericosClicked(false); - setIsTecladosClicked(false); - setIsParlantesClicked(false); - setIsLaptopsClicked(false); - }; - - const handleClickPerifericos = () => { - setIsTodosClicked(false); - setIsMonitoresClicked(false); - setIsPerifericosClicked(true); - setIsTecladosClicked(false); - setIsParlantesClicked(false); - setIsLaptopsClicked(false); - }; - - const handleClickTeclados = () => { - setIsTodosClicked(false); - setIsMonitoresClicked(false); - setIsPerifericosClicked(false); - setIsTecladosClicked(true); - setIsParlantesClicked(false); - setIsLaptopsClicked(false); - }; - const handleClickParlantes = () => { - setIsTodosClicked(false); - setIsMonitoresClicked(false); - setIsPerifericosClicked(false); - setIsTecladosClicked(false); - setIsParlantesClicked(true); - setIsLaptopsClicked(false); - }; - const handleClickLaptops = () => { - setIsTodosClicked(false); - setIsMonitoresClicked(false); - setIsPerifericosClicked(false); - setIsTecladosClicked(false); - setIsParlantesClicked(false); - setIsLaptopsClicked(true); - }; - - return ( <> -
-
- - - - - - - -
-
-
- -
+
+
+ handleClickCategory('')} + /> + handleClickCategory('Monitores')} + /> + handleClickCategory('Perifericos')} + /> +
+
+
+ +
+ ); +}; - ) -} - -export default Home +export default Home; diff --git a/src/components/Products.tsx b/src/components/Products.tsx index b499c38..3a3d9b0 100644 --- a/src/components/Products.tsx +++ b/src/components/Products.tsx @@ -5,9 +5,13 @@ import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import React, { useState, useEffect } from 'react'; +import { Anybody } from "next/font/google"; +type ProductsProps = { + filterCategory: string; +}; -export const Products = () => { +export const Products = ({ filterCategory }: ProductsProps) => { const [products, setProducts] = useState([]); useEffect(() => { @@ -71,7 +75,7 @@ export const Products = () => { {products .filter( - (product: IProducts) => product.tipos.at(0).clase === "oferta" + (product: IProducts) => (product.tipos.at(0).clase === "oferta" && product.tipos.at(0).categoria === filterCategory ) ) .map((product: IProducts) => (
@@ -86,7 +90,7 @@ export const Products = () => { {products .filter( (product: IProducts) => - product.tipos.at(0).clase === "recomendado" + (product.tipos.at(0).clase === "recomendado" && product.tipos.at(0).categoria === filterCategory ) ) .map((product: IProducts) => (
@@ -100,7 +104,7 @@ export const Products = () => { {products .filter( - (product: IProducts) => product.tipos.at(0).clase === "destacado" + (product: IProducts) => (product.tipos.at(0).clase === "destacado" && product.tipos.at(0).categoria === filterCategory) ) .map((product: IProducts) => (
From d20c4217d3a2d968c404159b0e3ac10542036968 Mon Sep 17 00:00:00 2001 From: stefano Date: Mon, 3 Jul 2023 15:54:25 -0500 Subject: [PATCH 12/21] Botones funcionando filtrando --- src/api/api.ts | 5 +-- src/app/page.tsx | 4 +-- src/components/Products.tsx | 71 ++++++++++++++++++++++++++----------- 3 files changed, 56 insertions(+), 24 deletions(-) diff --git a/src/api/api.ts b/src/api/api.ts index 8599f44..4de0651 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -1,12 +1,13 @@ -const url = "https://run.mocky.io/v3/a1aa2d7c-0d69-41c5-a58b-53854ffd360c"; +const url = "https://run.mocky.io/v3/05e8172e-684f-494b-98f5-906e6564e8e0"; export async function getProducts() { const response = await fetch(url, { cache: 'no-store' }); const products = await response.json(); - return products; + return products; } + // export async function ListOfProducts() { // const products = await api(); // return ( diff --git a/src/app/page.tsx b/src/app/page.tsx index 3941a58..6fe9d8b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -28,12 +28,12 @@ const Home = () => { handleClickCategory('Monitores')} + onClick={() => handleClickCategory("Monitores")} /> handleClickCategory('Perifericos')} + onClick={() => handleClickCategory("Perifericos")} />
diff --git a/src/components/Products.tsx b/src/components/Products.tsx index 3a3d9b0..7aeb1a6 100644 --- a/src/components/Products.tsx +++ b/src/components/Products.tsx @@ -5,7 +5,6 @@ import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import React, { useState, useEffect } from 'react'; -import { Anybody } from "next/font/google"; type ProductsProps = { filterCategory: string; @@ -63,9 +62,6 @@ export const Products = ({ filterCategory }: ProductsProps) => { ], }; - //utilizar enmuns en lugar de comparcion de strings - // const OFERTA = "oferta " - return (
@@ -74,24 +70,48 @@ export const Products = ({ filterCategory }: ProductsProps) => { {products - .filter( - (product: IProducts) => (product.tipos.at(0).clase === "oferta" && product.tipos.at(0).categoria === filterCategory ) - ) - .map((product: IProducts) => ( -
- -
- ))} + .filter((product: IProducts) => { + if (filterCategory === '') { + return product.tipos[0].clase === "oferta"; + } else if (filterCategory === 'Todos') { + return ( + product.tipos[0].clase === "oferta" && product.tipos[0].categoria === filterCategory + ); + } else { + return ( + product.tipos[0].clase === "oferta" && + product.tipos[0].categoria === filterCategory + ); + } + }) + .map((product: IProducts) => { + console.log('Periféricos key:', product.id); + return ( +
+ +
+ ); + })}

Productos recomendados

{products - .filter( - (product: IProducts) => - (product.tipos.at(0).clase === "recomendado" && product.tipos.at(0).categoria === filterCategory ) - ) + .filter((product: IProducts) => { + if (filterCategory === '') { + return product.tipos[0].clase === "recomendado"; + } else if (filterCategory === 'Todos') { + return ( + product.tipos[0].clase === "recomendado" && product.tipos[0].categoria === filterCategory + ); + } else { + return ( + product.tipos[0].clase === "recomendado" && + product.tipos[0].categoria === filterCategory + ); + } + }) .map((product: IProducts) => (
@@ -103,11 +123,22 @@ export const Products = ({ filterCategory }: ProductsProps) => { {products - .filter( - (product: IProducts) => (product.tipos.at(0).clase === "destacado" && product.tipos.at(0).categoria === filterCategory) - ) + .filter((product: IProducts) => { + if (filterCategory === '') { + return product.tipos[0].clase === "destacado"; + } else if (filterCategory === 'Todos') { + return ( + product.tipos[0].clase === "destacado" && product.tipos[0].categoria === filterCategory + ); + } else { + return ( + product.tipos[0].clase === "destacado" && + product.tipos[0].categoria === filterCategory + ); + } + }) .map((product: IProducts) => ( -
+
))} From 0de9511a4e874c8afe0b124cec131f585ea798ef Mon Sep 17 00:00:00 2001 From: stefano Date: Tue, 4 Jul 2023 17:50:06 -0500 Subject: [PATCH 13/21] a punto de usar CreateContext para no usar 2 veces la funcion getProducts --- src/api/api.ts | 22 ------------------- src/app/login/page.tsx | 1 + src/app/page.tsx | 1 - src/app/products/[id]/page.tsx | 35 +++++++++++++++++++++++++----- src/components/Buscador.tsx | 25 --------------------- src/components/DetalleProducto.tsx | 29 +++++++++++++++++++++++++ src/components/Products.tsx | 6 ++--- 7 files changed, 62 insertions(+), 57 deletions(-) delete mode 100644 src/components/Buscador.tsx create mode 100644 src/components/DetalleProducto.tsx diff --git a/src/api/api.ts b/src/api/api.ts index 4de0651..abd62b7 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -6,25 +6,3 @@ export async function getProducts() { return products; } - - -// export async function ListOfProducts() { -// const products = await api(); -// return ( -// <> -// {products.map((product: Products) => ( -//
-//

{product.tipos.at(0).categoria}

-//

{product.tipos.at(0).clase}

-//

{product.nombre}

-//

{product.marca}

-//

{product.descripcion}

-//

{product.precio}

-//

{product.valoracion}

-// {`imagen -// {`imagen -//
-// ))} -// -// ) -// } diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 4440150..126f1e0 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -2,6 +2,7 @@ import React from 'react' import Link from 'next/link' export default function Login() { + return (
diff --git a/src/app/page.tsx b/src/app/page.tsx index 6fe9d8b..01bb027 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -4,7 +4,6 @@ import React, { useState, useEffect } from 'react'; import Footer from '../components/Footer' import Header from '../components/Header' import HeaderBotones from '@/components/HeaderBotones' -import Buscador from '@/components/Buscador' import { getProducts } from '../api/api'; import { IProducts } from '@/models/product'; import {Products} from "@/components/Products"; diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx index 2e01799..13d6578 100644 --- a/src/app/products/[id]/page.tsx +++ b/src/app/products/[id]/page.tsx @@ -1,9 +1,32 @@ +'use client' import { IProducts } from "@/models/product"; +import DetalleProducto from "@/components/DetalleProducto"; +import React, { useEffect, useState } from 'react'; +import { getProducts } from "@/api/api"; +import Link from "next/link"; + +const Detail = () => { + useEffect(() => { + const fetchData = async () => { + try { + const products = await getProducts(); + console.log(products); // Imprimir el resultado del JSON en la consola + } catch (error) { + console.error('Error al obtener los productos:', error); + } + }; + + fetchData(); + }, []); + -export default function product ( {params}:{params:IProducts} ) { return ( -
-

Modelo de producto: {params.id}

-
- ) -} \ No newline at end of file + <> +
+ +
+ + ); +} + +export default Detail; \ No newline at end of file diff --git a/src/components/Buscador.tsx b/src/components/Buscador.tsx deleted file mode 100644 index 6b82f7b..0000000 --- a/src/components/Buscador.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; -import Image from "next/image"; - -const Buscador = () => { - return ( -
- - Icono de búsqueda -
- ); -}; - -export default Buscador; diff --git a/src/components/DetalleProducto.tsx b/src/components/DetalleProducto.tsx new file mode 100644 index 0000000..054ab33 --- /dev/null +++ b/src/components/DetalleProducto.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import Image from "next/image"; +import { StarIcon } from "@heroicons/react/20/solid"; +import Link from "next/link"; +import { IProducts } from "@/models/product"; + +const DetalleProducto:React.FC<{ item: IProducts }> = ({ item }) => { + return ( +
+ {`imagen +
+

+ { + item.nombre + } +

+
+
+ ) +} + +export default DetalleProducto \ No newline at end of file diff --git a/src/components/Products.tsx b/src/components/Products.tsx index 7aeb1a6..b79d50e 100644 --- a/src/components/Products.tsx +++ b/src/components/Products.tsx @@ -75,7 +75,7 @@ export const Products = ({ filterCategory }: ProductsProps) => { return product.tipos[0].clase === "oferta"; } else if (filterCategory === 'Todos') { return ( - product.tipos[0].clase === "oferta" && product.tipos[0].categoria === filterCategory + product.tipos[0].clase === "oferta" ); } else { return ( @@ -103,7 +103,7 @@ export const Products = ({ filterCategory }: ProductsProps) => { return product.tipos[0].clase === "recomendado"; } else if (filterCategory === 'Todos') { return ( - product.tipos[0].clase === "recomendado" && product.tipos[0].categoria === filterCategory + product.tipos[0].clase === "recomendado" ); } else { return ( @@ -128,7 +128,7 @@ export const Products = ({ filterCategory }: ProductsProps) => { return product.tipos[0].clase === "destacado"; } else if (filterCategory === 'Todos') { return ( - product.tipos[0].clase === "destacado" && product.tipos[0].categoria === filterCategory + product.tipos[0].clase === "destacado" ); } else { return ( From d130928e24ca60d216371ba963c4c5755c882d05 Mon Sep 17 00:00:00 2001 From: stefano Date: Wed, 5 Jul 2023 22:51:22 -0500 Subject: [PATCH 14/21] Pantalla Product Detail terminada --- package.json | 1 + src/api/api.ts | 11 +++-- src/app/page.tsx | 4 +- src/app/products/[id]/page.tsx | 79 ++++++++++++++++++++++++++-------- src/components/Header.tsx | 2 +- src/components/Products.tsx | 24 +++++++---- yarn.lock | 12 ++++++ 7 files changed, 98 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index 0b6c342..c74ccff 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "react-custom-scrollbars": "^4.2.1", "react-dom": "18.2.0", "react-slick": "^0.29.0", + "reactn": "^2.2.7", "slick-carousel": "^1.8.1", "tailwindcss": "3.3.2", "turbo": "^1.10.3", diff --git a/src/api/api.ts b/src/api/api.ts index abd62b7..77d539a 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -1,8 +1,7 @@ -const url = "https://run.mocky.io/v3/05e8172e-684f-494b-98f5-906e6564e8e0"; +import React from 'react' -export async function getProducts() { - const response = await fetch(url, { cache: 'no-store' }); - const products = await response.json(); - - return products; +const api = () => { + } + +export default api \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 01bb027..bfb73b2 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,10 +1,8 @@ 'use client' - import React, { useState, useEffect } from 'react'; import Footer from '../components/Footer' import Header from '../components/Header' import HeaderBotones from '@/components/HeaderBotones' -import { getProducts } from '../api/api'; import { IProducts } from '@/models/product'; import {Products} from "@/components/Products"; @@ -37,7 +35,7 @@ const Home = () => {
- +
); diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx index 13d6578..a767c2e 100644 --- a/src/app/products/[id]/page.tsx +++ b/src/app/products/[id]/page.tsx @@ -1,32 +1,77 @@ -'use client' +"use client"; +import { useEffect, useState } from "react"; import { IProducts } from "@/models/product"; -import DetalleProducto from "@/components/DetalleProducto"; -import React, { useEffect, useState } from 'react'; -import { getProducts } from "@/api/api"; -import Link from "next/link"; +import Image from "next/image"; +import { StarIcon } from "@heroicons/react/20/solid"; + +const DetailProduct = ({ params }: { params: IProducts }) => { + const [product, setProduct] = useState(null); -const Detail = () => { useEffect(() => { const fetchData = async () => { try { - const products = await getProducts(); - console.log(products); // Imprimir el resultado del JSON en la consola + const response = await fetch( + "https://run.mocky.io/v3/05e8172e-684f-494b-98f5-906e6564e8e0" + ); + const data = await response.json(); + const foundProduct = data.find( + (item: IProducts) => item.id === params.id + ); + setProduct(foundProduct); + console.log("Product:", foundProduct); } catch (error) { - console.error('Error al obtener los productos:', error); + console.error("Error fetching product:", error); } }; fetchData(); - }, []); - + }, [params.id]); return ( - <> -
- -
+ < > + {product ? ( +
+ {`imagen +
+
+
+ {[0, 1, 2, 3, 4].map((element: number) => ( + element + ? "text-yellow-400 h-6 w-6" + : "text-gray-200 h-6 w-6" + } h-5 w-5 flex-shrink-0 + `} + aria-hidden="true" + /> + ))} +
+

{product.nombre}

+

S./ {product.precio}

+

{product.descripcion}

+
+
+
+ +
+
+ + ) : ( +

Loading...

+ )} ); -} +}; -export default Detail; \ No newline at end of file +export default DetailProduct; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index f6179be..d84af5e 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,7 +1,7 @@ import React from "react"; import Image from "next/image"; import Link from "next/link"; -import Buscador from "./Buscador"; + const Header = () => { return ( diff --git a/src/components/Products.tsx b/src/components/Products.tsx index b79d50e..12eb9ab 100644 --- a/src/components/Products.tsx +++ b/src/components/Products.tsx @@ -1,27 +1,36 @@ -import { getProducts } from "../api/api"; + import { IProducts } from "@/models/product"; import Cards from "@/components/Cards"; import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import React, { useState, useEffect } from 'react'; +import Link from "next/link"; type ProductsProps = { filterCategory: string; }; export const Products = ({ filterCategory }: ProductsProps) => { - const [products, setProducts] = useState([]); + + const [products, setProducts] = useState([]); useEffect(() => { - const fetchProducts = async () => { - const fetchedProducts = await getProducts(); - setProducts(fetchedProducts); + const fetchData = async () => { + try { + const response = await fetch("https://run.mocky.io/v3/05e8172e-684f-494b-98f5-906e6564e8e0"); + const data = await response.json(); + setProducts(data); + console.log('Respuesta del API:', data); + } catch (error) { + console.error('Error al obtener los datos del API:', error); + } }; - fetchProducts(); + fetchData(); }, []); + const settings = { infinite: true, speed: 300, @@ -85,7 +94,6 @@ export const Products = ({ filterCategory }: ProductsProps) => { } }) .map((product: IProducts) => { - console.log('Periféricos key:', product.id); return (
@@ -114,7 +122,7 @@ export const Products = ({ filterCategory }: ProductsProps) => { }) .map((product: IProducts) => (
- +
))} diff --git a/yarn.lock b/yarn.lock index aee893b..d71f588 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2112,6 +2112,13 @@ react@18.2.0: dependencies: loose-envify "^1.1.0" +reactn@^2.2.7: + version "2.2.7" + resolved "https://registry.yarnpkg.com/reactn/-/reactn-2.2.7.tgz#4d9a94ab0d8a540062666408e4bf1fae6892cecc" + integrity sha512-cqnt23kWN/ABqEZhW3OlpqI1DgTaaNDeHpSHtyd81qk0H1jd32zPTzJ69Hpzti2WakwNYveGFPIgI6i7E7nXOA== + dependencies: + use-force-update "^1.0.5" + read-cache@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz" @@ -2605,6 +2612,11 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +use-force-update@^1.0.5: + version "1.0.11" + resolved "https://registry.yarnpkg.com/use-force-update/-/use-force-update-1.0.11.tgz#9483e9cf3e3cfba0f486cce141b66426bcb27619" + integrity sha512-h4SICYgTJHon8w9dFIqdqR1Vrzdgl4YaRfRwhmAh01kBGljzTICanyfaFU8C4etuEfRdYpE+04XX2ZrEhOWKXQ== + util-deprecate@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz" From c660ab9a5e9476e61404f8725d0b7b2b593ecb79 Mon Sep 17 00:00:00 2001 From: stefano Date: Thu, 6 Jul 2023 07:58:11 -0500 Subject: [PATCH 15/21] Pantalla Detalle del Producto finalizada en mobile --- src/app/products/[id]/page.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx index a767c2e..119e33a 100644 --- a/src/app/products/[id]/page.tsx +++ b/src/app/products/[id]/page.tsx @@ -30,7 +30,7 @@ const DetailProduct = ({ params }: { params: IProducts }) => { return ( < > {product ? ( -
+
{`imagen {

{product.descripcion}

-
-
From dc1850d3fc3743383fcfc65ebbf22d28573d2467 Mon Sep 17 00:00:00 2001 From: stefano Date: Thu, 6 Jul 2023 15:43:28 -0500 Subject: [PATCH 16/21] Modal de Carlos Agregado --- src/app/products/[id]/page.tsx | 7 ++----- src/components/Modal.tsx | 19 +++++++++++++++++++ 2 files changed, 21 insertions(+), 5 deletions(-) create mode 100644 src/components/Modal.tsx diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx index a767c2e..c49594e 100644 --- a/src/app/products/[id]/page.tsx +++ b/src/app/products/[id]/page.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from "react"; import { IProducts } from "@/models/product"; import Image from "next/image"; import { StarIcon } from "@heroicons/react/20/solid"; +import Modal from "@/components/Modal"; const DetailProduct = ({ params }: { params: IProducts }) => { const [product, setProduct] = useState(null); @@ -60,11 +61,7 @@ const DetailProduct = ({ params }: { params: IProducts }) => {

{product.descripcion}

-
- -
+
) : ( diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx new file mode 100644 index 0000000..028ccbc --- /dev/null +++ b/src/components/Modal.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +const Modal = ({ isVisible, onClose, children }: { isVisible: boolean, onClose: () => void, children: React.ReactNode }) => { + + if (!isVisible) return null; + + return ( + <> +
+
+
+ {children} +
+
+
+ + ) +} + +export default Modal \ No newline at end of file From eac356cc2e0d880e7bdf8fd7688408072cb225a4 Mon Sep 17 00:00:00 2001 From: Julio Teran Date: Fri, 7 Jul 2023 02:20:50 -0500 Subject: [PATCH 17/21] Agregado cart a la rama --- src/app/Cart/page.tsx | 15 +++++++++++ src/components/Carritocompras.tsx | 43 +++++++++++++++++++++++++++++++ src/components/Header.tsx | 6 ++++- src/components/Preciocart.tsx | 34 ++++++++++++++++++++++++ 4 files changed, 97 insertions(+), 1 deletion(-) create mode 100644 src/app/Cart/page.tsx create mode 100644 src/components/Carritocompras.tsx create mode 100644 src/components/Preciocart.tsx diff --git a/src/app/Cart/page.tsx b/src/app/Cart/page.tsx new file mode 100644 index 0000000..f60abed --- /dev/null +++ b/src/app/Cart/page.tsx @@ -0,0 +1,15 @@ + +import Preciocart from '@/components/Preciocart' +import Link from 'next/link' +import React from 'react' + +function page() { + return ( +
+ {/* ver si se puede aplicar flex-1 al contenido y al body colocarle flex y quitar ese p-*/} + { } +
+ ) +} + +export default page \ No newline at end of file diff --git a/src/components/Carritocompras.tsx b/src/components/Carritocompras.tsx new file mode 100644 index 0000000..7b2cbe0 --- /dev/null +++ b/src/components/Carritocompras.tsx @@ -0,0 +1,43 @@ +"use client" +import { useState, useEffect } from "react" + +function Carritocompras() { + + const [numpro , setnumpro] = useState(1) + + function Restar () { if(numpro>1) return setnumpro(numpro-1)} + return ( + +
+ +
+

Monitor Benq EL2870U

+

S./ 2000.30

+
+ +
+ +
+ {/*en el parrafo modificar tamaño de letra recomendado 0.925rem*/} +

+ {numpro} +

+ +
+ +
+
+ + ) +} + + +export default Carritocompras \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx index d84af5e..16a5351 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -42,13 +42,17 @@ const Header = () => { alt="Usuario" /> - + Carrito de Compras + + +
diff --git a/src/components/Preciocart.tsx b/src/components/Preciocart.tsx new file mode 100644 index 0000000..21fe22b --- /dev/null +++ b/src/components/Preciocart.tsx @@ -0,0 +1,34 @@ +import Carritocompras from "./Carritocompras" +let Pdelivery = " s./ 00.00" +let pproductos = "S./ 3,000.00" +function Preciocart() { + return ( + +
+
+ + + +
+
+

Total: +

+

{pproductos}

+

Delivery:

+

{Pdelivery}

+
+
+

Total a pagar:

+

{pproductos}

+
+
+ +
+ +
+ ) +} + +export default Preciocart \ No newline at end of file From 2cf542c7808e2c2a817d36553c315f75098392b2 Mon Sep 17 00:00:00 2001 From: stefano Date: Fri, 7 Jul 2023 21:59:11 -0500 Subject: [PATCH 18/21] random commit --- src/app/products/[id]/page.tsx | 76 ++++++++++++++++++++++++---------- 1 file changed, 54 insertions(+), 22 deletions(-) diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx index c49594e..42ca6b4 100644 --- a/src/app/products/[id]/page.tsx +++ b/src/app/products/[id]/page.tsx @@ -4,9 +4,11 @@ import { IProducts } from "@/models/product"; import Image from "next/image"; import { StarIcon } from "@heroicons/react/20/solid"; import Modal from "@/components/Modal"; +import Link from "next/link"; const DetailProduct = ({ params }: { params: IProducts }) => { const [product, setProduct] = useState(null); + const [showModal, setShowModal] = useState(false); useEffect(() => { const fetchData = async () => { @@ -29,9 +31,9 @@ const DetailProduct = ({ params }: { params: IProducts }) => { }, [params.id]); return ( - < > + <> {product ? ( -
+
{`imagen { priority={true} />
-
-
- {[0, 1, 2, 3, 4].map((element: number) => ( - element - ? "text-yellow-400 h-6 w-6" - : "text-gray-200 h-6 w-6" - } h-5 w-5 flex-shrink-0 +
+
+ {[0, 1, 2, 3, 4].map((element: number) => ( + element + ? "text-yellow-400 h-6 w-6" + : "text-gray-200 h-6 w-6" + } h-5 w-5 flex-shrink-0 `} - aria-hidden="true" - /> - ))} + aria-hidden="true" + /> + ))} +
+

{product.nombre}

+

S./ {product.precio}

+

{product.descripcion}

+
-

{product.nombre}

-

S./ {product.precio}

-

{product.descripcion}

-
-
- -
+
+ +
+ setShowModal(false)}> +

Exito!

+

+ El producto fue agregado al carrito +

+ + + + + + + + +
) : (

Loading...

)} From ececa86e8ffeb86dfa12db0c4595a82f6e9923dd Mon Sep 17 00:00:00 2001 From: stefano Date: Thu, 6 Jul 2023 15:36:58 -0500 Subject: [PATCH 19/21] Arreglando el Header --- src/app/layout.tsx | 4 +- src/app/login/layout.tsx | 98 ++++++++++++++++++++++++++++ src/app/products/[id]/layout.tsx | 98 ++++++++++++++++++++++++++++ src/app/products/[id]/page.tsx | 2 +- src/components/DetalleProducto.tsx | 29 -------- src/components/HeaderSinBusqueda.tsx | 59 +++++++++++++++++ 6 files changed, 259 insertions(+), 31 deletions(-) create mode 100644 src/app/login/layout.tsx create mode 100644 src/app/products/[id]/layout.tsx delete mode 100644 src/components/DetalleProducto.tsx create mode 100644 src/components/HeaderSinBusqueda.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 6cd1c3a..6932201 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,6 +2,8 @@ import "./globals.css"; import { Inter } from "next/font/google"; import Footer from "@/components/Footer"; import Header from "@/components/Header"; +import LoginLayout from "./login/layout"; +import HeaderSinBusqueda from "@/components/HeaderSinBusqueda"; const inter = Inter({ subsets: ['latin'] }) @@ -89,7 +91,7 @@ export default function RootLayout({ return ( -
+
{children}