Skip to content

Commit 278c73f

Browse files
MartinLingeriMartinLingeri
committed
Agregado de categorias y busqueda
1 parent 7ad31b3 commit 278c73f

File tree

7 files changed

+148
-17
lines changed

7 files changed

+148
-17
lines changed

‎app/layout.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Inter } from 'next/font/google'
55
const inter = Inter({ subsets: ['latin'] })
66

77
export const metadata: Metadata = {
8-
title: 'Create Next App',
8+
title: 'Precios de Hardware',
99
description: 'Generated by create next app',
1010
}
1111

@@ -15,7 +15,7 @@ export default function RootLayout({
1515
children: React.ReactNode
1616
}) {
1717
return (
18-
<html lang="en">
18+
<html lang="es">
1919
<body className={inter.className}>{children}</body>
2020
</html>
2121
)

‎app/page.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import Products from "@/components/Products"
2+
import Search from "@/components/Search"
3+
import Categories from "@/components/Categories"
24

35
export default function Home() {
46
return (
57
<main className="bg-gray-100">
68
<div className="mx-auto max-w-4xl">
9+
<Search />
10+
<Categories />
711
<Products url="http://localhost:3000/api/mexx" store="mexx" />
812
</div>
913
</main>

‎components/Categories.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { categories } from "./Category"
2+
3+
export default function Categories() {
4+
return (
5+
<div className="mx-9 mb-9">
6+
<select
7+
id="categories"
8+
className="relative p-4 rounded-lg block w-full text-sm text-gray-900 bg-gray-50 shadow-md focus:shadow-xl focus:border-black"
9+
>
10+
{categories.map((category) => (
11+
<option key={category.value} value={category.value}>
12+
{category.value}
13+
</option>
14+
))}
15+
</select>
16+
</div>
17+
)
18+
}

‎components/Category.ts

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
export const categories = [
2+
{ value: "Todos los productos", mexx: "", logg: "" },
3+
{ value: "Notebooks", mexx: "notebooks", logg: "Notebooks" },
4+
{ value: "Motherboards", mexx: "motherboards", logg: "Motherboards" },
5+
{ value: "Procesadores", mexx: "procesadores", logg: "Procesadores" },
6+
{ value: "Memorias ram", mexx: "memorias-ram", logg: "memoriasRAM" },
7+
{ value: "Almacenamiento", mexx: "almacenamiento", logg: "Almacenamiento" },
8+
{ value: "Placas de video", mexx: "placas-de-video", logg: "Placasdevideo" },
9+
{
10+
value: "Fuentes de poder",
11+
mexx: "fuentes-de-poder",
12+
logg: "Fuentesdealimentacion",
13+
},
14+
{ value: "Gabinetes", mexx: "gabinetes", logg: "Gabinetes" },
15+
{
16+
value: "Refrigeracion pc",
17+
mexx: "refrigeracion-pc",
18+
logg: "Refrigeracion",
19+
},
20+
{
21+
value: "Teclados, mouses y pads",
22+
mexx: "teclados-mouses-y-pads",
23+
logg: "Perifericos",
24+
},
25+
{
26+
value: "Auriculares y microfonos",
27+
mexx: "auriculares-y-microfonos",
28+
logg: "Audio",
29+
},
30+
{ value: "Camaras web e ip", mexx: "camaras-web-e-ip", logg: "Perifericos" },
31+
{ value: "Monitores", mexx: "monitores", logg: "Pantallasyvideo" },
32+
]

‎components/Products.tsx

+36-14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Link from "next/link"
22
import { GroupedProduct, getProducts } from "./Product"
3+
import Image from "next/image"
34

45
type Props = {
56
url: string
@@ -9,20 +10,41 @@ type Props = {
910
export default async function Products(props: Props) {
1011
const products = await getProducts(props.url)
1112
return (
12-
<section>
13-
<h1>{props.store.toUpperCase()} Products</h1>
14-
<div className="grid gap-4 grid-cols-1fr lg:grid-cols-2 xl:grid-cols-3">
15-
{products!.map((product: GroupedProduct) => (
16-
<Link
17-
href={`/${props.store}/${product.id}`}
18-
className="flex flex-col justify-between p-4 rounded-md max-w-sm shadow-md bg-slate-50 text-black box-shadow hover:shadow-xl hover:scale-105 transition-transform duration-300"
19-
key={product.id}
20-
>
21-
<h1 className="font-bold">{product.title}</h1>
22-
<img src={product.image} />
23-
<div>${product.prices[product.prices.length - 1].price.toLocaleString()}</div>
24-
</Link>
25-
))}
13+
<section className="grid justify-center">
14+
<h1 className="text-black text-xl">
15+
{props.store.toUpperCase()} Products
16+
</h1>
17+
<div className="grid self-center gap-4 grid-cols-1fr grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
18+
{products
19+
? products.map((product: GroupedProduct) => (
20+
<Link
21+
href={`/${props.store}/${product.id}`}
22+
className="flex flex-col justify-between rounded-md w-64 md:w-48 h-80 pb-4 shadow-md bg-slate-50 text-black box-shadow hover:shadow-xl hover:scale-105 transition-transform duration-300"
23+
key={product.id}
24+
>
25+
<img
26+
//alt={product.title}
27+
//width={192}
28+
//height={192}
29+
className="w-full max-h-48 object-cover rounded-t-md"
30+
src={product.image}
31+
/>
32+
<h1 className="font-medium px-4 max-h-30 line-clamp-4 sm:line-clamp-3">
33+
{product.title}
34+
</h1>
35+
<div className="font-bold px-4">
36+
$
37+
{product.prices[
38+
product.prices.length - 1
39+
].price.toLocaleString()}
40+
</div>
41+
</Link>
42+
))
43+
: Array(20)
44+
.fill(
45+
<div className="rounded-md w-64 md:w-48 h-80 pb-4 shadow-md bg-gray-200 dark:bg-gray-700"></div>
46+
)
47+
.map((product) => product)}
2648
</div>
2749
</section>
2850
)

‎components/Search.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
export default function Search() {
2+
return (
3+
<form className="p-9">
4+
<div className="relative">
5+
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
6+
<svg
7+
className="w-4 h-4 text-gray-500 dark:text-gray-400"
8+
aria-hidden="true"
9+
xmlns="http://www.w3.org/2000/svg"
10+
fill="none"
11+
viewBox="0 0 20 20"
12+
>
13+
<path
14+
stroke="currentColor"
15+
strokeLinecap="round"
16+
strokeLinejoin="round"
17+
strokeWidth="2"
18+
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
19+
/>
20+
</svg>
21+
</div>
22+
<input
23+
type="search"
24+
id="default-search"
25+
className="block w-full p-4 pl-10 text-sm text-gray-900 rounded-lg bg-gray-50 shadow-md focus:shadow-xl focus:border-black"
26+
placeholder="Buscar..."
27+
required
28+
/>
29+
<button
30+
type="submit"
31+
className="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
32+
>
33+
Buscar
34+
</button>
35+
</div>
36+
</form>
37+
)
38+
}

‎next.config.js

+18-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,21 @@
11
/** @type {import('next').NextConfig} */
2-
const nextConfig = {}
2+
const nextConfig = {
3+
images: {
4+
remotePatterns: [
5+
{
6+
protocol: "https",
7+
hostname: "mexx-img-2019.s3.amazonaws.com",
8+
pathname: "/**/*",
9+
port: "",
10+
},
11+
{
12+
protocol: "https",
13+
hostname: "logg.api.cygnus.market",
14+
pathname: "/**/*",
15+
port: "",
16+
},
17+
],
18+
},
19+
}
320

421
module.exports = nextConfig

0 commit comments

Comments
 (0)