120 reviews

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
   },
 };

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() {
       <TopSellers />
       <PaymentMethodsList />
       <BrandCategory brand={brands} />
+      <ReviewsContainer reviwes={reviews}/>
     </ContainerPage>
   );
 }

src/assets/icons/quotationMarks.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function quotationMarks() {
+  return (
+    <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    height="2.5em" 
+    viewBox="0 0 448 512">
+        <path fill="#8C0303" d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z"/>
+    </svg>
+  );
+}

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<ReviewsProps> = ({ 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) => (
+        <span
+          key={index}
+          className={`text-2xl ${index < filledStars ? 'text-primary-lm' : 'text-secondary-dm'}`}
+        >
+          ★
+        </span>
+      ));
+      return stars;
+    };
+
+
+  return (
+    <div className="">
+    <div className="bg-white m-3 p-4 lg:shadow-md rounded-lg">
+      <Icon icon="quotationMarks"/>
+      <div className="mb-4 h-[470px] ms:min-h-[400px] md:">
+          <p className="text-gray-700">
+            {description}
+          </p>
+      </div>
+      <div className="border-t border-secondary-dm opacity-20"></div>
+      <div className="flex items-center mb-2 mt-4">
+        <Image 
+          src={userImage} 
+          alt={`Imagen de ${userName}`} 
+          className="w-12 h-12 rounded-full mr-2"         
+          width={245}
+          height={154}/>
+        <div className='flex flex-col'>
+          <p>{userName}</p>
+          <div>{renderRatingStars()}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+};
+
+export default Reviews;
+
+

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}
                 </div>

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<ReviewsContainerProps> = ({ reviwes }: ReviewsContainerProps) => {
+
+  const filteredReviews = reviwes.filter((review) => review.rating >= 3);
+
+  return (
+    <div>
+     <Carousel>      
+          {filteredReviews.map((review) => (
+              <Reviews
+                key={review.userName}
+                description={review.description}
+                userImage={review.userImage}
+                rating={review.rating}
+                userName={review.userName}
+              />
+          ))}
+      </Carousel>
+    </div>
+  );
+};
+
+export default ReviewsContainer;
+

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;
+

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' 
+export type IconTypes = | 'CardCredit' | 'CarShoping' | 'Cash' | 'Facebook' | 'HamburguerClose' | 'HamburguerOpen' | 'Heart' | 'icon' | 'Instagram' | 'Login' | 'MapLocation' | 'Moon' | 'quotationMarks' | 'SearchIcon' | 'Shield' | 'Sun' | 'Truck' | 'warranty' | 'Whatsapp'