From 37b07b86ed081aa2f428689ed554c17302d19436 Mon Sep 17 00:00:00 2001 From: jhoniernem Date: Fri, 8 Sep 2023 10:07:40 -0500 Subject: [PATCH 1/9] add product types --- src/types/products.d.ts | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/types/products.d.ts diff --git a/src/types/products.d.ts b/src/types/products.d.ts new file mode 100644 index 0000000..582e26e --- /dev/null +++ b/src/types/products.d.ts @@ -0,0 +1,22 @@ +export type ProductsProps = { + id: string; + title: string; + state: string; + stock: number; + price: number; + availability: number; + image: string[]; + model: string; + year: string; + brand: Brand; + category: Category; +}; +type Brand = { + id: string; + name: string; +}; + +type Category = { + id: string; + name: string; +}; \ No newline at end of file From ba7db17ca40e1b0a938f3e8f8bcbe8fb15e93707 Mon Sep 17 00:00:00 2001 From: jhoniernem Date: Fri, 8 Sep 2023 10:13:03 -0500 Subject: [PATCH 2/9] feat - Create carousel component --- src/components/carousels/carousel.tsx | 100 ++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 src/components/carousels/carousel.tsx diff --git a/src/components/carousels/carousel.tsx b/src/components/carousels/carousel.tsx new file mode 100644 index 0000000..2968563 --- /dev/null +++ b/src/components/carousels/carousel.tsx @@ -0,0 +1,100 @@ +'use client'; +import { useRef } from 'react'; +import { BsChevronCompactLeft, BsChevronCompactRight } from 'react-icons/bs'; + +type CarouselProps = { + children: React.ReactNode[]; +}; + +export function Carousel({ children }: CarouselProps) { + const carouselRef = useRef(null); + + function next() { + if (!carouselRef.current) return; + + if (carouselRef?.current?.children?.length > 0) { + const firstElement = carouselRef?.current?.children[0]; + carouselRef.current.style.transition = '300ms ease-out all'; + + const size = carouselRef.current.children[0].clientWidth; + + carouselRef.current.style.transform = `translatex(-${size}px)`; + + const transicion = () => { + if (!carouselRef.current) return; + + carouselRef.current.style.transition = 'none'; + carouselRef.current.style.transform = 'translatex(0px)'; + + carouselRef.current.appendChild(firstElement); + carouselRef.current.removeEventListener('transitionend', transicion); + }; + + carouselRef.current.addEventListener('transitionend', transicion); + } + } + function previus() { + if (!carouselRef.current) return; + + if (carouselRef?.current?.children.length > 0) { + const endElement = + carouselRef.current.children[carouselRef.current.children.length - 1]; + carouselRef.current.insertBefore( + endElement, + carouselRef?.current?.firstChild + ); + + carouselRef.current.style.transition = 'none'; + + const size = carouselRef.current.children[0].clientWidth; + carouselRef.current.style.transform = `translate(-${size}px)`; + + setTimeout(() => { + if (!carouselRef.current) return; + + carouselRef.current.style.transition = '300ms ease-out all'; + carouselRef.current.style.transform = 'translatex(0)'; + }, 30); + } + } + + if (!children.length) return; + + return ( + <> +
+ +
+
+ {children.map((child, i) => { + return ( +
+ {child} +
+ ); + })} +
+
+ +
+ + ); +} From ce20cc99f78df45854e15e889ebb83e1688f0822 Mon Sep 17 00:00:00 2001 From: jhoniernem Date: Fri, 8 Sep 2023 10:15:02 -0500 Subject: [PATCH 3/9] fix order layer base and utilities --- src/app/globals.css | 39 ++++++---- src/app/page.tsx | 7 +- src/app/products/page.tsx | 6 +- .../containerCards/containerCards.tsx | 78 +++---------------- 4 files changed, 43 insertions(+), 87 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index bee0b6d..8110c70 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,19 +1,26 @@ +@layer base { + ::-webkit-scrollbar { + background: #ededed; + width: 8px; + } + ::-webkit-scrollbar-thumb { + background: #41444384; + border-radius: 3px; + } + ::-webkit-scrollbar-thumb:hover { + background: #3a3b3b; + } +} +@layer utilities { + .title { + font-size: 4rem; + font-weight: bold; + text-align: center; + margin-top: 2rem; + margin-bottom: 2rem; + } +} + @tailwind base; @tailwind components; @tailwind utilities; - - - -@layer base { - /*Cambio de estilos para etiquetas como h1, h2,, h3, p, span, div, - es decir estilos por default*/ - } - @layer utilities { - .title { - font-size: 4rem; - font-weight: bold; - text-align: center; - margin-top: 2rem; - margin-bottom: 2rem; - } - } \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 40f42a7..891f64f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,6 @@ import MainCarousel from '~/components/carousels/mainCarousel'; -import { productos } from '~/mockData/mockProducts'; import { brands } from '~/mockData/mockBrands'; -import { ContainerCard } from '~/components/containerCards/containerCards'; +import { TopSellers } from '~/components/containerCards/containerCards'; import { createIconsTypes } from '~/utils/createIcons'; import { ContainerPage } from './container_page'; import CategoryCategory from '~/components/containerCards/containerCardsCategoty'; @@ -14,9 +13,9 @@ export default function Home() { return ( }> - - + + ); } diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx index 6d137cb..ba7cf29 100644 --- a/src/app/products/page.tsx +++ b/src/app/products/page.tsx @@ -1,3 +1,7 @@ +import { ContainerPage } from '../container_page'; + export default function Landing() { - return

Hola soy products

; + return + Products page + ; } diff --git a/src/components/containerCards/containerCards.tsx b/src/components/containerCards/containerCards.tsx index 1ce1337..c0c0e60 100644 --- a/src/components/containerCards/containerCards.tsx +++ b/src/components/containerCards/containerCards.tsx @@ -1,66 +1,19 @@ 'use client'; -import { useState } from 'react'; import Card from '../cards/landingCard'; -import Pagination from '../pagination'; +import { productos } from '~/mockData/mockProducts'; +import { Carousel } from '../carousels/carousel'; +import { ProductsProps } from '~/types/products'; -type Brand = { - id: string; - name: string; -}; - -type Category = { - id: string; - name: string; -}; - -type Products = { - id: string; - title: string; - state: string; - stock: number; - price: number; - availability: number; - image: string[]; - model: string; - year: string; - brand: Brand; - category: Category; -}; - -type ContainerCardProps = { - products: Products[]; -}; - -export function ContainerCard({ products }: ContainerCardProps) { - const [pagination, setPagination] = useState({ - page: 1, - itemsPage: 5, - }); - - const maximo = Math.ceil(products.length / pagination.itemsPage); - const startIndex = (pagination.page - 1) * pagination.itemsPage; - const endIndex = startIndex + pagination.itemsPage; - - const anteriorSiguiente = (action: 'Anterior' | 'Siguiente') => { - if (action === 'Anterior') - setPagination({ - ...pagination, - page: pagination.page - 1, - }); - else if (action === 'Siguiente') - setPagination({ - ...pagination, - page: pagination.page + 1, - }); - }; +export function TopSellers() { + const products = productos; return ( -
-

- Productos -

-
- {products.slice(startIndex, endIndex).map((producto: Products) => { +
+
+

Lo más vendidos

+
+ + {products.map((producto: ProductsProps) => { const { title, id, price, image } = producto; return ( ); })} -
-
- -
+
); } From fbd62d93fc351ee0b2f03b332d5d51aca3ef4326 Mon Sep 17 00:00:00 2001 From: jhoniernem Date: Fri, 8 Sep 2023 10:55:38 -0500 Subject: [PATCH 4/9] update --- src/components/containerCards/containerCards.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/containerCards/containerCards.tsx b/src/components/containerCards/containerCards.tsx index c0c0e60..442ac35 100644 --- a/src/components/containerCards/containerCards.tsx +++ b/src/components/containerCards/containerCards.tsx @@ -8,7 +8,7 @@ export function TopSellers() { const products = productos; return ( -
+

Lo más vendidos

From 2806655aadc71cf3d28fab221a62b19226e03e64 Mon Sep 17 00:00:00 2001 From: jhoniernem Date: Sun, 10 Sep 2023 10:59:40 -0500 Subject: [PATCH 5/9] fix imports --- src/app/page.tsx | 2 +- src/components/containerCards/containerCards.tsx | 6 +++--- src/stories/landingCard.stories.tsx | 8 ++++---- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index e52eb0a..fcb01c0 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -13,8 +13,8 @@ export default function Home() { return ( }> - + ); diff --git a/src/components/containerCards/containerCards.tsx b/src/components/containerCards/containerCards.tsx index 442ac35..f777709 100644 --- a/src/components/containerCards/containerCards.tsx +++ b/src/components/containerCards/containerCards.tsx @@ -1,5 +1,5 @@ 'use client'; -import Card from '../cards/landingCard'; +import { ProductCard } from '../cards/ProductCard'; import { productos } from '~/mockData/mockProducts'; import { Carousel } from '../carousels/carousel'; import { ProductsProps } from '~/types/products'; @@ -16,10 +16,10 @@ export function TopSellers() { {products.map((producto: ProductsProps) => { const { title, id, price, image } = producto; return ( - diff --git a/src/stories/landingCard.stories.tsx b/src/stories/landingCard.stories.tsx index 872b24d..8ba6fc7 100644 --- a/src/stories/landingCard.stories.tsx +++ b/src/stories/landingCard.stories.tsx @@ -1,12 +1,12 @@ import type { Meta, StoryObj } from '@storybook/react'; -import Card from '../components/cards/landingCard'; +import { ProductCard } from '../components/cards/ProductCard'; const meta = { title: 'folder/landingCard', - component: Card, + component: ProductCard, parameters: {}, argTypes: {}, -} satisfies Meta; +} satisfies Meta; export default meta; type Story = StoryObj; @@ -14,7 +14,7 @@ type Story = StoryObj; export const Primary: Story = { args: { title: '', - price: '', + price: 0, nota: '', imageSrc: '', }, From be0e88e89d4a2f5fe094522646015ed0a0c8c720 Mon Sep 17 00:00:00 2001 From: jhoniernem Date: Sun, 10 Sep 2023 11:00:27 -0500 Subject: [PATCH 6/9] Refactor styles for card product --- src/components/cards/ProductCard.tsx | 53 ++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 src/components/cards/ProductCard.tsx diff --git a/src/components/cards/ProductCard.tsx b/src/components/cards/ProductCard.tsx new file mode 100644 index 0000000..f99807d --- /dev/null +++ b/src/components/cards/ProductCard.tsx @@ -0,0 +1,53 @@ +import Image from 'next/image'; +import { MainButton } from '../button/button'; +import Icon from '~/assets/icons/icon'; + +interface ProductCardProps { + title: string; + price: number; + nota: string; + imageSrc: string; +} + +export function ProductCard({ title, price, imageSrc }: ProductCardProps) { + return ( +
+ Cubre Volante +
+

{title}

+

{`${toCurrency( + price + )}`}

+

{`${toCurrency( + price + )}`}

+
+
+ +
+ Añadir al Carrito +
+ +
+
+ +
+
+ ); +} + +function toCurrency(number: number, currency: string = 'COP') { + const formatter = new Intl.NumberFormat(currency, { + currency: currency, + style: 'currency', + minimumFractionDigits: 0, + }); + + return formatter.format(number); +} From a3e9a38959fc2203914c403e9873cbfc5c8316e7 Mon Sep 17 00:00:00 2001 From: jhoniernem Date: Sun, 10 Sep 2023 11:07:34 -0500 Subject: [PATCH 7/9] style for carousel padding x --- src/components/carousels/carousel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/carousels/carousel.tsx b/src/components/carousels/carousel.tsx index 2968563..c30cd77 100644 --- a/src/components/carousels/carousel.tsx +++ b/src/components/carousels/carousel.tsx @@ -62,7 +62,7 @@ export function Carousel({ children }: CarouselProps) { return ( <> -
+
); } diff --git a/src/components/carousels/carousel.tsx b/src/components/carousels/carousel.tsx index c30cd77..e9d5686 100644 --- a/src/components/carousels/carousel.tsx +++ b/src/components/carousels/carousel.tsx @@ -65,7 +65,7 @@ export function Carousel({ children }: CarouselProps) {
@@ -90,7 +90,7 @@ export function Carousel({ children }: CarouselProps) {
diff --git a/src/components/containerCards/containerCards.tsx b/src/components/containerCards/containerCards.tsx index f777709..d6a6841 100644 --- a/src/components/containerCards/containerCards.tsx +++ b/src/components/containerCards/containerCards.tsx @@ -5,7 +5,7 @@ import { Carousel } from '../carousels/carousel'; import { ProductsProps } from '~/types/products'; export function TopSellers() { - const products = productos; + const products = productos.slice(0, 10); return (
@@ -20,7 +20,7 @@ export function TopSellers() { key={id} title={title} price={price} - nota={title} + offer={0.1} imageSrc={image[0]} /> ); diff --git a/src/types/icons.d.ts b/src/types/icons.d.ts index 793fd83..5834176 100644 --- a/src/types/icons.d.ts +++ b/src/types/icons.d.ts @@ -1 +1 @@ -export type IconTypes = | 'CardCredit' | 'CarShoping' | 'Cash' | 'Facebook' | 'HamburguerClose' | 'HamburguerOpen' | 'icon' | 'Instagram' | 'Login' | 'MapLocation' | 'Moon' | 'SearchIcon' | 'Shield' | 'Sun' | 'Truck' | 'warranty' | 'Whatsapp' \ No newline at end of file +export type IconTypes = | 'CardCredit' | 'CarShoping' | 'Cash' | 'Facebook' | 'HamburguerClose' | 'HamburguerOpen' | 'Heart' | 'icon' | 'Instagram' | 'Login' | 'MapLocation' | 'Moon' | 'SearchIcon' | 'Shield' | 'Sun' | 'Truck' | 'warranty' | 'Whatsapp' \ No newline at end of file diff --git a/src/types/products.d.ts b/src/types/products.d.ts index 582e26e..37e8799 100644 --- a/src/types/products.d.ts +++ b/src/types/products.d.ts @@ -19,4 +19,11 @@ type Brand = { type Category = { id: string; name: string; -}; \ No newline at end of file +}; + +export interface ProductCardProps { + title: string; + price: number; + offer: number; + imageSrc: string; +} \ No newline at end of file