bguizado · julioteran55 · Jun 30, 2023 · Jul 1, 2023 · Jul 1, 2023 · Jul 1, 2023
diff --git 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
@@ -1,29 +1,7 @@
-const url = "https://run.mocky.io/v3/a1aa2d7c-0d69-41c5-a58b-53854ffd360c";
+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 async function ListOfProducts() {
-//   const products = await api();
-//   return (
-//     <>
-//       {products.map((product: Products) => (
-//         <div key={product.id}>
-//           <p>{product.tipos.at(0).categoria}</p>
-//           <p>{product.tipos.at(0).clase}</p>
-//           <p>{product.nombre}</p>
-//           <p>{product.marca}</p>
-//           <p>{product.descripcion}</p>
-//           <p>{product.precio}</p>
-//           <p>{product.valoracion}</p>
-//           <Image src={product.imagen1} alt={`imagen de ${product.nombre}`}  width={300} height={300} priority={true}/>
-//           <Image src={product.imagen2} alt={`imagen de ${product.nombre}_2`}  width={300} height={300} priority={true}/>
-//         </div>
-//       ))}
-//     </>
-//   )
-// }
+export default api
diff --git a/src/app/Actions/CarritoActions.js b/src/app/Actions/CarritoActions.js
@@ -0,0 +1,6 @@
+export const TYPES= {
+    ADD_TO_CART: "ADD_TO_CART",
+    REMOVE_ONE_FROM_CART: "REMOVE_ONE_FROM_CART",
+    REMOVE_ALL_FROM_CART: "REMOVE_ALL_FROM_CART"
+
+}
diff --git a/src/app/Cart/page.tsx 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 (
+    <div className='p-0 w-auto h-4/5'>
+    {/* ver si se puede aplicar flex-1 al contenido y al body colocarle flex  y quitar ese p-*/} 
+    { <Preciocart/>}
+  </div>
+  )
+}
+
+export default page
diff --git a/src/app/Reducers/CarritoReducers.tsx b/src/app/Reducers/CarritoReducers.tsx
@@ -0,0 +1,38 @@
+"use client"
+import { useState, useEffect } from "react"
+import {TYPES} from "../Actions/CarritoActions"
+const [productList, setProductList] = useState([]);
+
+useEffect(() => {
+  const fetchProducts = async () => {
+    try {
+      const response = await fetch('https://run.mocky.io/v3/05e8172e-684f-494b-98f5-906e6564e8e0');
+      const data = await response.json();
+      setProductList(data);
+    } catch (error) {
+      console.error('Error al obtener los productos:', error);
+    }
+  };
+
+  fetchProducts();
+}, [])
+export const carritoInitialState = {
+Products: productList,
+Cart: []
+}
+
+export function CarritoReducer (state , action) {
+    switch (action.type) {
+        case TYPES.ADD_TO_CART: {
+
+        }
+        case TYPES.REMOVE_ALL_FROM_CART: {
+
+        }
+        case TYPES.REMOVE_ONE_FROM_CART: {
+
+        }
+        default: return state
+
+    }
+}
diff --git 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 (
     <html lang="en">
       <body className={inter.className}>
-        <Header></Header>
+          <Header></Header>
           {children}
         <Footer facebook={FacebookIcon()} instagram={InstagramIcon()} youtube={YoutubeIcon()} twitter={TwitterIcon()} alipay={AlipayIcon()} paypal={PaypalIcon()} stripe={StripeIcon()} />
       </body>

diff --git 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 (
     <div className="min-h-full flex items-center justify-center mt-30 py-12 sm:px-6 lg:px-8 text-gray-500">
         <div>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,111 +1,47 @@
 '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 { 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 handleClickTodos = () => {
-    setIsTodosClicked(true);
-    setIsMonitoresClicked(false);
-    setIsPerifericosClicked(false);
-    setIsTecladosClicked(false);
-    setIsParlantesClicked(false);
-    setIsLaptopsClicked(false);
-  };
-
-  const handleClickMonitores = () => {
-    setIsTodosClicked(false);
-    setIsMonitoresClicked(true);
-    setIsPerifericosClicked(false);
-    setIsTecladosClicked(false);
-    setIsParlantesClicked(false);
-    setIsLaptopsClicked(false);
-  };
+  const [filterCategory, setFilterCategory] = useState('');
 
-  const handleClickPerifericos = () => {
-    setIsTodosClicked(false);
-    setIsMonitoresClicked(false);
-    setIsPerifericosClicked(true);
-    setIsTecladosClicked(false);
-    setIsParlantesClicked(false);
-    setIsLaptopsClicked(false);
+  const handleClickCategory = (category: string) => {
+    setFilterCategory(category);
   };
 
-  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 (
     <>
-    <section className="flex w-full h-[62px] overflow-x-auto  items-center tablet:justify-center laptop:justify-center" >
-     <div className="flex space-x-3 ml-2" >
-        <HeaderBotones text="Todos" className={isTodosClicked ? 'bg-orange-300 text-white w-20' : 'bg-gray-300 text-gray-500 w-20'}
-          onClick={handleClickTodos}/>
-        <HeaderBotones text="Monitores"  className={isMonitoresClicked ? 'bg-orange-300 text-white w-24' : 'bg-gray-300 text-gray-500 w-24'}
-          onClick={handleClickMonitores}/>
-        <HeaderBotones
-          text="Periféricos"
-          className={isPerifericosClicked ? 'bg-orange-300 text-white w-24' : 'bg-gray-300 text-gray-500 w-24'}
-          onClick={handleClickPerifericos}
-        />
-        <HeaderBotones
-          text="Teclados"
-          className={isTecladosClicked ? 'bg-orange-300 text-white w-24' : 'bg-gray-300 text-gray-500 w-24'}
-          onClick={handleClickTeclados}
-        />
-         <HeaderBotones
-          text="Parlantes"
-          className={isParlantesClicked ? 'bg-orange-300 text-white w-24' : 'bg-gray-300 text-gray-500 w-24'}
-          onClick={handleClickParlantes}
-        />
-         <HeaderBotones
-          text="Laptops"
-          className={isLaptopsClicked ? 'bg-orange-300 text-white w-24' : 'bg-gray-300 text-gray-500 w-24'}
-          onClick={handleClickLaptops}
-        />
-
-    </div>
-    </section>
-    <main>
-    <Products></Products>
-    </main>
+      <section className="flex w-full h-[62px] overflow-x-auto  items-center tablet:justify-center laptop:justify-center">
+        <div className="flex space-x-3 ml-2">
+          <HeaderBotones
+            text="Todos"
+            className={filterCategory === '' ? 'bg-orange-300 text-white w-20' : 'bg-gray-300 text-gray-500 w-20'}
+            onClick={() => handleClickCategory('')}
+          />
+          <HeaderBotones
+            text="Monitores"
+            className={filterCategory === 'Monitores' ? 'bg-orange-300 text-white w-24' : 'bg-gray-300 text-gray-500 w-24'}
+            onClick={() => handleClickCategory("Monitores")}
+          />
+          <HeaderBotones
+            text="Perifericos"
+            className={filterCategory === 'Perifericos' ? 'bg-orange-300 text-white w-24' : 'bg-gray-300 text-gray-500 w-24'}
+            onClick={() => handleClickCategory("Perifericos")}
+          />
+        </div>
+      </section>
+      <main>
+        <Products filterCategory={filterCategory}/>
+      </main>
     </>
+  );
+};
 
-  )
-}
-
-export default Home
+export default Home;
 
 
 

diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx
@@ -1,9 +1,106 @@
+'use client';
+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";
+import Link from "next/link";
+
+const DetailProduct = ({ params }: { params: IProducts }) => {
+  const [product, setProduct] = useState<IProducts | null>(null);
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        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 fetching product:", error);
+      }
+    };
+
+    fetchData();
+  }, [params.id]);
 
-export default function product ( {params}:{params:IProducts} ) {
   return (
-    <div>
-      <p>Modelo de producto: {params.id} </p>
-    </div>
-  )
-}
+    <>
+      {product ? (
+        <div className="h-fit">
+          <Image
+            src={product.imagen1}
+            alt={`imagen de ${product.nombre}`}
+            className="object-fill object-center"
+            width={500}
+            height={500}
+            priority={true}
+          />
+          <div className="flex justify-center h-fit">
+            <div className="bg-gray-100 shadow-lg rounded-lg w-[90%]">
+              <div className="flex items-center justify-start pl-4 pb-3 mt-3">
+                {[0, 1, 2, 3, 4].map((element: number) => (
+                  <StarIcon
+                    key={element}
+                    className={` ${
+                      product.valoracion > 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"
+                  />
+                ))}
+              </div>
+              <h2 className="font-bold ml-4">{product.nombre}</h2>
+              <p className="pl-4 pt-1 pb-2">S./ {product.precio}</p>
+              <p className="pl-4">{product.descripcion}</p>
+            </div>
+          </div>
+             <div className="flex justify-center items-center h-[75px]">      
+            <button
+              className="bg-orange-400 font-bold text-white rounded-xl py-2 px-6  hover:bg-orange-500"
+              onClick={() => setShowModal(true)}
+            >
+              Agregar al carrito
+            </button>
+             </div> 
+
+            <Modal isVisible={showModal} onClose={() => setShowModal(false)}>
+              <h1 className="text-3xl font-bold p-3">Exito!</h1>
+              <p className="w-36 text-center text-slate-400">
+                El producto fue agregado al carrito
+              </p>
+              <Link href={"/"}>
+              <button
+                className="bg-orange-400 text-white rounded-xl py-2 px-6 mt-6 mb-4 hover:bg-orange-500"
+                onClick={() => setShowModal(false)}
+              >
+                Seguir comprando
+              </button>
+              </Link>
+              <Link href={"/"}>
+              <button
+                className="text-slate-400 border-2 border-slate-300 rounded-xl py-2 px-6 hover:bg-slate-300 hover:text-white"
+                onClick={() => setShowModal(false)}
+              >
+                Salir
+              </button>
+              </Link>
+            </Modal>
+
+        </div>
+      ) : (
+        <p>Loading...</p>
+      )}
+    </>
+  );
+};
+
+export default DetailProduct;