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/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/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 new file mode 100644 index 0000000..391df93 --- /dev/null +++ b/src/components/cards/reviewsCard.tsx @@ -0,0 +1,60 @@ +/* eslint-disable react/no-unescaped-entities */ +'use client' +import React, { useState } from 'react'; +import Icon from '~/assets/icons/icon'; +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; + }; + + + return ( +
+
+ +
+

+ {description} +

+
+
+
+ {`Imagen +
+

{userName}

+
{renderRatingStars()}
+
+
+
+
+); +}; + +export default Reviews; + + 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 new file mode 100644 index 0000000..493ac90 --- /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) => { + + const filteredReviews = reviwes.filter((review) => review.rating >= 3); + + return ( +
+ + {filteredReviews.map((review) => ( + + ))} + +
+ ); +}; + +export default ReviewsContainer; + diff --git a/src/mockData/mockReviwes.ts b/src/mockData/mockReviwes.ts new file mode 100644 index 0000000..702bee4 --- /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://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: '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: '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: '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: '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', + }, + ]; + + export default reviews; + \ No newline at end of file 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