From 03886e8605d7331fea0a4c9a5803cf8251501467 Mon Sep 17 00:00:00 2001 From: Duvan Serrano Rojas Date: Mon, 11 Sep 2023 17:47:04 -0500 Subject: [PATCH 1/3] =?UTF-8?q?Crear=20componentes=20Reviews=20completo=20?= =?UTF-8?q?aun=20sin=20dise=C3=B1o=20en=20comillas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.tsx | 3 + src/components/cards/reviewsCard.tsx | 75 +++++++++++++++++++ .../containerCards/containerCardsReviews.tsx | 38 ++++++++++ src/components/paymentMethod/payMethod.tsx | 2 +- src/mockData/mockReviwes.ts | 42 +++++++++++ 5 files changed, 159 insertions(+), 1 deletion(-) create mode 100644 src/components/cards/reviewsCard.tsx create mode 100644 src/components/containerCards/containerCardsReviews.tsx create mode 100644 src/mockData/mockReviwes.ts diff --git a/src/app/page.tsx b/src/app/page.tsx index fcb01c0..af22328 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -7,6 +7,8 @@ import CategoryCategory from '~/components/containerCards/containerCardsCategoty import { category } from '~/mockData/mockCategory'; import BrandCategory from '~/components/containerCards/containerCardsBrands'; import PaymentMethodsList from '~/components/paymentMethod/paymentMethodsList'; +import ReviewsContainer from '~/components/containerCards/containerCardsReviews'; +import reviews from '~/mockData/mockReviwes'; export default function Home() { createIconsTypes(); @@ -16,6 +18,7 @@ export default function Home() { + ); } diff --git a/src/components/cards/reviewsCard.tsx b/src/components/cards/reviewsCard.tsx new file mode 100644 index 0000000..a5c6b50 --- /dev/null +++ b/src/components/cards/reviewsCard.tsx @@ -0,0 +1,75 @@ +/* eslint-disable react/no-unescaped-entities */ +'use client' +import React, { useState } from 'react'; +// import Image from 'next/image'; + +interface ReviewsProps { + description: string; + userImage: string; + rating: number; + userName: string; +} + +const Reviews: React.FC = ({ userName ,description, userImage, rating }) => { + // Función para renderizar las estrellas de calificación + const renderRatingStars = () => { + const maxRating = 5; + const filledStars = Math.min(maxRating, Math.max(0, rating)); // Limita la calificación entre 0 y 5 + const stars = Array.from({ length: maxRating }, (_, index) => ( + + ★ + + )); + return stars; + }; + + const [showMore, setShowMore] = useState(false); + + const toggleShowMore = () => { + setShowMore(!showMore); + }; + + const truncatedDescription = description.slice(0, 350); + + return ( +
+
+ +

"

+
+

+ {showMore ? description : truncatedDescription} + {description.length > 350 && ( + + {showMore ? ' ...' : ' ...'} + + )} +

+
+
+
+ {`Imagen +
+

{userName}

+
{renderRatingStars()}
+
+
+
+
+); +}; + +export default Reviews; + + diff --git a/src/components/containerCards/containerCardsReviews.tsx b/src/components/containerCards/containerCardsReviews.tsx new file mode 100644 index 0000000..8e63c10 --- /dev/null +++ b/src/components/containerCards/containerCardsReviews.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import Reviews from '../cards/reviewsCard'; +import { Carousel } from '../carousels/carousel'; + +interface TestimonialData { + description: string; + userImage: string; + rating: number; + userName: string; +} + +interface ReviewsContainerProps { + reviwes: TestimonialData[]; +} + +const ReviewsContainer: React.FC = ({ reviwes }: ReviewsContainerProps) => { + return ( +
+ + {reviwes.map((reviwes) => { + const { description, userImage, userName, rating } = reviwes; + return ( + ); + } + )} + +
+ ); +}; + +export default ReviewsContainer; + diff --git a/src/components/paymentMethod/payMethod.tsx b/src/components/paymentMethod/payMethod.tsx index e4cae2e..9480491 100644 --- a/src/components/paymentMethod/payMethod.tsx +++ b/src/components/paymentMethod/payMethod.tsx @@ -14,7 +14,7 @@ const PaymentMethod: React.FC = ({ return ( diff --git a/src/mockData/mockReviwes.ts b/src/mockData/mockReviwes.ts new file mode 100644 index 0000000..0777688 --- /dev/null +++ b/src/mockData/mockReviwes.ts @@ -0,0 +1,42 @@ +interface Reviews { + description: string; + userImage: string; + rating: number; + userName: string; + } + +const reviews: Reviews[] = [ + { + description: '¡Me encantó el producto! La calidad es excelente y el servicio al cliente fue muy amable. Definitivamente lo recomendaré¡Me encantó el producto! La calidad es excelente y el servicio al cliente fue muy amable. Definitivamente lo recomendaré.¡Me encantó el producto! La calidad es excelente y el servicio al cliente fue muy amable. Definitivamente lo recomendaré.¡Me encantó el producto! La calidad es excelente y el servicio al cliente fue muy amable. Definitivamente lo recomendaré.', + userImage: 'https://i.ebayimg.com/images/g/Lm4AAOSw6CRj2BGm/s-l1600.jpg', + rating: 5, + userName: 'Juan Pérez', + }, + { + description: 'El producto superó mis expectativas. La entrega fue rápida y todo llegó en perfecto estado. ¡Gracias!', + userImage: 'URL_IMAGEN_USUARIO_2', + rating: 4, + userName: 'María González', + }, + { + description: 'Estoy muy satisfecho con mi compra. El producto es de alta calidad y el proceso de compra fue muy fácil.', + userImage: 'URL_IMAGEN_USUARIO_3', + rating: 5, + userName: 'Carlos Rodríguez', + }, + { + description: 'El producto llegó tarde y tenía algunos defectos. No estoy contento con la experiencia de compra.', + userImage: 'URL_IMAGEN_USUARIO_4', + rating: 2, + userName: 'Laura López', + }, + { + description: 'Buena relación calidad-precio. Estoy satisfecho con el producto y el servicio.', + userImage: 'URL_IMAGEN_USUARIO_5', + rating: 4, + userName: 'Ana Martínez', + }, + ]; + + export default reviews; + \ No newline at end of file From bf6804633358d858dafd2c197bcbddb2ae3d18c0 Mon Sep 17 00:00:00 2001 From: Duvan Serrano Rojas Date: Mon, 11 Sep 2023 18:36:39 -0500 Subject: [PATCH 2/3] Solo trae las reviews mayores a 3 y las comillas son svg --- next.config.js | 1 + src/assets/icons/quotationMarks.tsx | 12 ++++ src/components/cards/reviewsCard.tsx | 55 ++++++++++--------- .../containerCards/containerCardsReviews.tsx | 28 +++++----- src/mockData/mockReviwes.ts | 10 ++-- src/types/icons.d.ts | 2 +- 6 files changed, 61 insertions(+), 47 deletions(-) create mode 100644 src/assets/icons/quotationMarks.tsx diff --git a/next.config.js b/next.config.js index 2233faf..af9ec20 100644 --- a/next.config.js +++ b/next.config.js @@ -8,6 +8,7 @@ const nextConfig = { 'www.autopista.es', 'assets.stickpng.com', 'media.gm.com', + 'us.123rf.com' ], // Agrega aquí los dominios permitidos para las imágenes }, }; diff --git a/src/assets/icons/quotationMarks.tsx b/src/assets/icons/quotationMarks.tsx new file mode 100644 index 0000000..14a9297 --- /dev/null +++ b/src/assets/icons/quotationMarks.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +export default function quotationMarks() { + return ( + + + + ); +} diff --git a/src/components/cards/reviewsCard.tsx b/src/components/cards/reviewsCard.tsx index a5c6b50..2c22338 100644 --- a/src/components/cards/reviewsCard.tsx +++ b/src/components/cards/reviewsCard.tsx @@ -1,7 +1,8 @@ /* eslint-disable react/no-unescaped-entities */ 'use client' import React, { useState } from 'react'; -// import Image from 'next/image'; +import Icon from '~/assets/icons/icon'; +import Image from 'next/image'; interface ReviewsProps { description: string; @@ -11,34 +12,34 @@ interface ReviewsProps { } const Reviews: React.FC = ({ userName ,description, userImage, rating }) => { - // Función para renderizar las estrellas de calificación - const renderRatingStars = () => { - const maxRating = 5; - const filledStars = Math.min(maxRating, Math.max(0, rating)); // Limita la calificación entre 0 y 5 - const stars = Array.from({ length: maxRating }, (_, index) => ( - - ★ - - )); - return stars; - }; - - const [showMore, setShowMore] = useState(false); - - const toggleShowMore = () => { - setShowMore(!showMore); - }; - - const truncatedDescription = description.slice(0, 350); + // Función para renderizar las estrellas de calificación + const renderRatingStars = () => { + const maxRating = 5; + const filledStars = Math.min(maxRating, Math.max(0, rating)); // Limita la calificación entre 0 y 5 + const stars = Array.from({ length: maxRating }, (_, index) => ( + + ★ + + )); + return stars; + }; + + const [showMore, setShowMore] = useState(false); + + const toggleShowMore = () => { + setShowMore(!showMore); + }; + + const truncatedDescription = description.slice(0, 350); + return ( -
+
- -

"

+

{showMore ? description : truncatedDescription} @@ -54,7 +55,7 @@ const Reviews: React.FC = ({ userName ,description, userImage, rat

- {`Imagen = ({ reviwes }: ReviewsContainerProps) => { + + const filteredReviews = reviwes.filter((review) => review.rating >= 3); + return (
- - {reviwes.map((reviwes) => { - const { description, userImage, userName, rating } = reviwes; - return ( - ); - } - )} - + + {filteredReviews.map((review) => ( + + ))} +
); }; diff --git a/src/mockData/mockReviwes.ts b/src/mockData/mockReviwes.ts index 0777688..702bee4 100644 --- a/src/mockData/mockReviwes.ts +++ b/src/mockData/mockReviwes.ts @@ -8,31 +8,31 @@ interface Reviews { const reviews: Reviews[] = [ { description: '¡Me encantó el producto! La calidad es excelente y el servicio al cliente fue muy amable. Definitivamente lo recomendaré¡Me encantó el producto! La calidad es excelente y el servicio al cliente fue muy amable. Definitivamente lo recomendaré.¡Me encantó el producto! La calidad es excelente y el servicio al cliente fue muy amable. Definitivamente lo recomendaré.¡Me encantó el producto! La calidad es excelente y el servicio al cliente fue muy amable. Definitivamente lo recomendaré.', - userImage: 'https://i.ebayimg.com/images/g/Lm4AAOSw6CRj2BGm/s-l1600.jpg', + userImage: 'https://us.123rf.com/450wm/tuktukdesign/tuktukdesign1606/tuktukdesign160600119/59070200-icono-de-usuario-hombre-perfil-hombre-de-negocios-avatar-icono-persona-en-la-ilustraci%C3%B3n.jpg', rating: 5, userName: 'Juan Pérez', }, { description: 'El producto superó mis expectativas. La entrega fue rápida y todo llegó en perfecto estado. ¡Gracias!', - userImage: 'URL_IMAGEN_USUARIO_2', + userImage: 'https://us.123rf.com/450wm/tuktukdesign/tuktukdesign1606/tuktukdesign160600119/59070200-icono-de-usuario-hombre-perfil-hombre-de-negocios-avatar-icono-persona-en-la-ilustraci%C3%B3n.jpg', rating: 4, userName: 'María González', }, { description: 'Estoy muy satisfecho con mi compra. El producto es de alta calidad y el proceso de compra fue muy fácil.', - userImage: 'URL_IMAGEN_USUARIO_3', + userImage: 'https://us.123rf.com/450wm/tuktukdesign/tuktukdesign1606/tuktukdesign160600119/59070200-icono-de-usuario-hombre-perfil-hombre-de-negocios-avatar-icono-persona-en-la-ilustraci%C3%B3n.jpg', rating: 5, userName: 'Carlos Rodríguez', }, { description: 'El producto llegó tarde y tenía algunos defectos. No estoy contento con la experiencia de compra.', - userImage: 'URL_IMAGEN_USUARIO_4', + userImage: 'https://us.123rf.com/450wm/tuktukdesign/tuktukdesign1606/tuktukdesign160600119/59070200-icono-de-usuario-hombre-perfil-hombre-de-negocios-avatar-icono-persona-en-la-ilustraci%C3%B3n.jpg', rating: 2, userName: 'Laura López', }, { description: 'Buena relación calidad-precio. Estoy satisfecho con el producto y el servicio.', - userImage: 'URL_IMAGEN_USUARIO_5', + userImage: 'https://us.123rf.com/450wm/tuktukdesign/tuktukdesign1606/tuktukdesign160600119/59070200-icono-de-usuario-hombre-perfil-hombre-de-negocios-avatar-icono-persona-en-la-ilustraci%C3%B3n.jpg', rating: 4, userName: 'Ana Martínez', }, diff --git a/src/types/icons.d.ts b/src/types/icons.d.ts index 5834176..9640789 100644 --- a/src/types/icons.d.ts +++ b/src/types/icons.d.ts @@ -1 +1 @@ -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 +export type IconTypes = | 'CardCredit' | 'CarShoping' | 'Cash' | 'Facebook' | 'HamburguerClose' | 'HamburguerOpen' | 'Heart' | 'icon' | 'Instagram' | 'Login' | 'MapLocation' | 'Moon' | 'quotationMarks' | 'SearchIcon' | 'Shield' | 'Sun' | 'Truck' | 'warranty' | 'Whatsapp' \ No newline at end of file From a6c615b1779a7469747e097f059e4f69485f05c7 Mon Sep 17 00:00:00 2001 From: Duvan Serrano Rojas Date: Tue, 12 Sep 2023 11:04:01 -0500 Subject: [PATCH 3/3] Arreglo de carucel los endpoint para que traiga 2 cards, responsive terminado de reviews --- src/components/cards/reviewsCard.tsx | 26 ++++--------------- src/components/carousels/carousel.tsx | 2 +- .../containerCards/containerCardsReviews.tsx | 22 ++++++++-------- 3 files changed, 17 insertions(+), 33 deletions(-) diff --git a/src/components/cards/reviewsCard.tsx b/src/components/cards/reviewsCard.tsx index 2c22338..391df93 100644 --- a/src/components/cards/reviewsCard.tsx +++ b/src/components/cards/reviewsCard.tsx @@ -27,30 +27,14 @@ const Reviews: React.FC = ({ userName ,description, userImage, rat return stars; }; - const [showMore, setShowMore] = useState(false); - - const toggleShowMore = () => { - setShowMore(!showMore); - }; - - const truncatedDescription = description.slice(0, 350); - return ( -
-
- -
+
+
+ +

- {showMore ? description : truncatedDescription} - {description.length > 350 && ( - - {showMore ? ' ...' : ' ...'} - - )} + {description}

diff --git a/src/components/carousels/carousel.tsx b/src/components/carousels/carousel.tsx index e9d5686..2c273a6 100644 --- a/src/components/carousels/carousel.tsx +++ b/src/components/carousels/carousel.tsx @@ -80,7 +80,7 @@ export function Carousel({ children }: CarouselProps) { key={i} className={`${ i < 4 ? '' : '' - } min-w-full sm:min-w-[calc(100%/2)] md:min-w-[calc(100%/3)] lg:min-w-[calc(100%/4)] px-1 grid place-content-center overflow-hidden`} + } min-w-full ms:min-w-[calc(100%/2)] md:min-w-[calc(100%/3)] lg:min-w-[calc(100%/4)] px-1 grid place-content-center overflow-hidden`} > {child}
diff --git a/src/components/containerCards/containerCardsReviews.tsx b/src/components/containerCards/containerCardsReviews.tsx index 742e74d..493ac90 100644 --- a/src/components/containerCards/containerCardsReviews.tsx +++ b/src/components/containerCards/containerCardsReviews.tsx @@ -18,17 +18,17 @@ const ReviewsContainer: React.FC = ({ reviwes }: ReviewsC const filteredReviews = reviwes.filter((review) => review.rating >= 3); return ( -
- - {filteredReviews.map((review) => ( - - ))} +
+ + {filteredReviews.map((review) => ( + + ))}
);