Add reviews section

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package.json

@@ -9,12 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
+    "@types/react-star-ratings": "^2.3.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
     "react-fast-marquee": "^1.6.4",
     "react-icons": "^5.0.1",
-    "react-image-gallery": "^1.3.0"
+    "react-image-gallery": "^1.3.0",
+    "react-star-ratings": "^2.3.0",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/node": "^20",

src/actions/reviews.ts

@@ -0,0 +1,7 @@
+"use server";
+
+export const getReviews = async () => {
+  const response = await fetch("http://localhost:3005/reviews");
+  const { data } = await response.json();
+  return data;
+};

src/app/globals.css

@@ -1,7 +1,76 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
 
-body, html, :root {
-  height: 100%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }

src/app/page.tsx

@@ -2,6 +2,9 @@ import Banner from "@/components/Banner";
 import Categories from "@/components/Categories";
 import Blog from "@/components/Blog";
 import BrandsCarousel from "@/components/BrandsCarousel";
+import { Reviews } from "@/components/Reviews";
+import { ReviewsSkeleton } from "@/components/Reviews/ReviewsSkeleton";
+import { Suspense } from "react";
 
 export default function Home() {
   return (
@@ -10,6 +13,9 @@ export default function Home() {
       <Categories />
       <BrandsCarousel />
       <Blog />
+      <Suspense fallback={<ReviewsSkeleton />}>
+        <Reviews />
+      </Suspense>
     </main>
   );
 }

src/components/BrandsCarousel/index.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
 
 import { Carousel } from "./Carousel";
-import { BRANDS } from "@/utils/constants";
+import { BRANDS } from "@/lib/constants";
 
 const BrandsCarousel: FC = () => {
 

src/components/Categories/index.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import CategoryCard from "./CategoryCard";
 
-import { CATEGORIES } from "@/utils/constants";
+import { CATEGORIES } from "@/lib/constants";
 
 const Categories: FC = () => {
   return (

src/components/Reviews/ReviewCard.tsx

@@ -0,0 +1,35 @@
+"use client";
+import StarRatings from "react-star-ratings";
+import { ImQuotesLeft } from "react-icons/im";
+import { IoPersonCircleSharp } from "react-icons/io5";
+import { Review } from "@/types";
+
+interface ReviewCardProps {
+  review: Review;
+}
+
+export const ReviewCard = ({ review }: ReviewCardProps) => {
+  return (
+    <article className="w-60 ms:w-96 p-4 space-y-3 shadow-lg mx-4 my-6 rounded-lg border border-black border-opacity-15 bg-white">
+      <div className="h-32">
+        <ImQuotesLeft size={30} color="red" />
+        <div className="h-24 overflow-y-scroll">
+          <p>{review.review}</p>
+        </div>
+      </div>
+      <hr />
+      <div className="flex flex-col ms:flex-row items-center gap-x-3">
+        <IoPersonCircleSharp size={50} />
+        <div className="flex flex-col justify-center items-center ms:items-start">
+          <p className="text-lg">{review.user}</p>
+          <StarRatings
+            rating={3}
+            numberOfStars={5}
+            starRatedColor="orange"
+            starDimension="30px"
+          />
+        </div>
+      </div>
+    </article>
+  );
+};

src/components/Reviews/ReviewsMarquee.tsx

@@ -0,0 +1,17 @@
+import Marquee from "react-fast-marquee";
+import { ReviewCard } from "./ReviewCard";
+import { Review } from "@/types";
+
+interface ReviewsMarqueeProps {
+  reviews: Review[];
+}
+
+export const ReviewsMarquee = ({ reviews }: ReviewsMarqueeProps) => {
+  return (
+    <Marquee pauseOnHover speed={20}>
+      {reviews.map((review) => (
+        <ReviewCard review={review} key={review.id} />
+      ))}
+    </Marquee>
+  );
+};

src/components/Reviews/ReviewsSkeleton.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { Skeleton } from "../ui/skeleton";
+import StarRatings from "react-star-ratings";
+
+export const ReviewsSkeleton = () => {
+  return (
+    <div className="flex justify-evenly items-center p-4">
+      <div>
+        <Skeleton className="w-96 h-56 p-4 flex flex-col justify-between gap-y-3">
+          <Skeleton className="h-10 w-10" />
+          <Skeleton className="w-full h-4" />
+          <Skeleton className="w-full h-4" />
+          <div className="flex items-center gap-x-4">
+            <Skeleton className="rounded-full h-14 w-14" />
+            <div className="flex flex-col gap-y-2">
+              <Skeleton className="w-28 h-4" />
+              <StarRatings
+                rating={0}
+                numberOfStars={5}
+                starRatedColor="orange"
+                starDimension="35px"
+              />
+            </div>
+          </div>
+        </Skeleton>
+      </div>
+      <div>
+        <Skeleton className="w-96 h-56 p-4 flex flex-col justify-between gap-y-3">
+          <Skeleton className="h-10 w-10" />
+          <Skeleton className="w-full h-4" />
+          <Skeleton className="w-full h-4" />
+          <div className="flex items-center gap-x-4">
+            <Skeleton className="rounded-full h-14 w-14" />
+            <div className="flex flex-col gap-y-2">
+              <Skeleton className="w-28 h-4" />
+              <StarRatings
+                rating={0}
+                numberOfStars={5}
+                starRatedColor="orange"
+                starDimension="35px"
+              />
+            </div>
+          </div>
+        </Skeleton>
+      </div>
+      <div>
+        <Skeleton className="w-96 h-56 p-4 flex flex-col justify-between gap-y-3">
+          <Skeleton className="h-10 w-10" />
+          <Skeleton className="w-full h-4" />
+          <Skeleton className="w-full h-4" />
+          <div className="flex items-center gap-x-4">
+            <Skeleton className="rounded-full h-14 w-14" />
+            <div className="flex flex-col gap-y-2">
+              <Skeleton className="w-28 h-4" />
+              <StarRatings
+                rating={0}
+                numberOfStars={5}
+                starRatedColor="orange"
+                starDimension="35px"
+              />
+            </div>
+          </div>
+        </Skeleton>
+      </div>
+    </div>
+  );
+};

src/components/Reviews/index.tsx

@@ -0,0 +1,17 @@
+import { ReviewsMarquee } from "./ReviewsMarquee";
+import { getReviews } from "@/actions/reviews";
+
+export const Reviews = async () => {
+  const reviews = await getReviews();
+
+  return (
+    <section
+      className="w-full"
+      style={{ background: "linear-gradient(red 50%, transparent 50%)" }}
+    >
+      <div className="max-w-[1920px] mx-auto">
+        <ReviewsMarquee reviews={reviews} />
+      </div>
+    </section>
+  );
+};

src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/types.d.ts

@@ -1,4 +1,10 @@
 export interface Brand {
   image: string;
   name: string;
-}
+}
+export interface Review {
+  id: string;
+  review: string;
+  rating: number;
+  user: string;
+}