Carritocontext

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",

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

src/api/datacart.jsx

@@ -0,0 +1,82 @@
+ export const Datacart= [{
+    id: "EL2870U",
+    nombre: "Monitor Benq EL2870U",
+    marca: "BenQ",
+    descripcion: "Monitor Benq 28\" Modelo EL2870U, Gamer LED, resolución 3840x2160, frecuencia 60 HZ, 1MS, 4K UHD",
+    precio: 2020.32,
+    valoracion: 4.5,
+    tipos: [
+    {
+    categoria: "Monitores",
+    clase: "recomendado"
+    }
+    ],
+    imagen1: "https://i.ibb.co/j3P2pJf/167115045487122.jpg",
+    imagen2: "https://i.ibb.co/xjjS459/168123629123866.jpg"
+    },
+    {
+    id: "2V6B2AA",
+    nombre: "Monitor HP 2V6B2AA",
+    marca: "HP",
+    descripcion: "Monitor HP 27\" Gamer LED, frecuencia 165 HZ",
+    precio: 680.8,
+    valoracion: 4,
+    tipos: [
+    {
+    categoria: "Monitores",
+    clase: "oferta"
+    }
+    ],
+    imagen1: "https://i.ibb.co/1dhTSKZ/167520951358224.jpg",
+    imagen2: "https://i.ibb.co/B6wQckq/167520951645048.jpg"
+    },
+    {
+        id: "27GP750B",
+        nombre: "Monitor LG 27GP750B",
+        marca: "LG",
+        descripcion: "Monitor LG 27\", Gamer UltraGear, LED frecuencia 240 HZ, 1MS, resolución 1920x1080",
+        precio: 1209.27,
+        valoracion: 5.0,
+        tipos: [
+        {
+        categoria: "Monitores",
+        clase: "recomendado"
+        }
+        ],
+        imagen1: "https://i.ibb.co/ryHjBHV/167129452319234.jpg",
+        imagen2: "https://i.ibb.co/ymjHtyc/167129444053198.jpg"
+        },
+        {
+            id: "27GP750B",
+            nombre: "Monitor LG 27GP750B",
+            marca: "LG",
+            descripcion: "Monitor LG 27\", Gamer UltraGear, LED frecuencia 240 HZ, 1MS, resolución 1920x1080",
+            precio: 1209.27,
+            valoracion: 5.0,
+            tipos: [
+            {
+            categoria: "Monitores",
+            clase: "recomendado"
+            }
+            ],
+            imagen1: "https://i.ibb.co/ryHjBHV/167129452319234.jpg",
+            imagen2: "https://i.ibb.co/ymjHtyc/167129444053198.jpg"
+            },
+            {
+                id: "27GP750B",
+                nombre: "Monitor LG 27GP750B",
+                marca: "LG",
+                descripcion: "Monitor LG 27\", Gamer UltraGear, LED frecuencia 240 HZ, 1MS, resolución 1920x1080",
+                precio: 1209.27,
+                valoracion: 5.0,
+                tipos: [
+                {
+                categoria: "Monitores",
+                clase: "recomendado"
+                }
+                ],
+                imagen1: "https://i.ibb.co/ryHjBHV/167129452319234.jpg",
+                imagen2: "https://i.ibb.co/ymjHtyc/167129444053198.jpg"
+                },
+]
+

src/app/Cart/page.tsx

@@ -0,0 +1,36 @@
+"use client"
+import Preciocart from '@/components/Preciocart'
+import Link from 'next/link'
+import React, {useContext} from 'react'
+import { Store } from '../context/store'
+
+function page() {
+  const {state, dispatch} = useContext(Store)
+  const {cart : {cartItems}} = state
+
+  const removeCartHandler = (item)=>{
+      dispatch({type: 'CART_REMOVE_ITEM', payload: item})
+  }
+
+  //funcion para actualizar el carrito
+  const updateCartHandler = (item , qty)=>{
+      const quantity = Number(qty)
+      dispatch({type: 'CARD_ADD_ITEM', payload:{...item, quantity}})
+  }
+
+  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 className="flex justify-center p-10 bg-[#F8F8F9]"> 
+       <Link href={"/Checkout"}>
+        <button className="text-[white] rounded-3xl bg-[#F39C34] w-64 h-12 ">
+                    <h3 className="text-lg "> Pagar </h3>
+                </button>
+         </Link>
+            </div>
+  </div>
+  )
+}
+
+export default page

src/app/context/store.js

@@ -0,0 +1,38 @@
+import { Children } from "react"
+import {useReducer, createContext, useContext} from "react"
+export const Store = createContext()
+
+const initialState = { cart: {
+    carItems:[]
+}}
+
+function reducer (state, action){
+    switch (action.type) {
+        case "CARD_ADD_ITEM":
+            {
+                const newItem = action.payload            }
+            const existItem = state.cart.carItems.find( item => item.id === newitem.id)
+            //condicion
+            const cartItems = existItem ? state.cart.cartItems.map(item => item.nombre === existItem.nombre ? newItem: item)
+            //sino existe    
+            : [...state.cart.carItems, newItem]
+
+            return {...state, cart:{...state.cart,cartItems}}
+
+
+        default:
+            return state
+    }
+
+
+ }
+export function StoreProvider ({Children}) {
+    const [state, dispatch] = useReducer(reducer, initialState)
+    const value = {state, dispatch}
+    return <Store.Provider value={value}>{Children}</Store.Provider>
+}
+
+export function Statecontext () {
+    const context = useContext(Store)
+    return context
+}

src/app/layout.tsx

@@ -2,7 +2,9 @@ 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";
+import {StoreProvider} from "../app/context/store"
 const inter = Inter({ subsets: ['latin'] })
 
 const FacebookIcon = () => {
@@ -89,10 +91,14 @@ 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>
+
+        </body>
     </html>
   );
 }

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>

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;