From fba232dec5c56e567b97cccb7c019472abdfbd2b Mon Sep 17 00:00:00 2001
From: codeza-ai <darshan.odedara@gmail.com>
Date: Thu, 24 Oct 2024 20:15:38 +0530
Subject: [PATCH] feat: create a new customer rating card component

---
 animata/card/customer-rating.stories.tsx | 24 ++++++++
 animata/card/customer-rating.tsx         | 73 ++++++++++++++++++++++++
 content/docs/card/customer-rating.mdx    | 42 ++++++++++++++
 next.config.mjs                          |  1 +
 4 files changed, 140 insertions(+)
 create mode 100644 animata/card/customer-rating.stories.tsx
 create mode 100644 animata/card/customer-rating.tsx
 create mode 100644 content/docs/card/customer-rating.mdx

diff --git a/animata/card/customer-rating.stories.tsx b/animata/card/customer-rating.stories.tsx
new file mode 100644
index 00000000..bd341b4a
--- /dev/null
+++ b/animata/card/customer-rating.stories.tsx
@@ -0,0 +1,24 @@
+import CustomerRating from "@/animata/card/customer-rating";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Card/Customer Rating",
+  component: CustomerRating,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof CustomerRating>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    name: "Jonathan Doe",
+    rating: 75,
+    imageUrl:
+      "https://images.unsplash.com/photo-1581092165309-2ab35320ca70?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  },
+};
diff --git a/animata/card/customer-rating.tsx b/animata/card/customer-rating.tsx
new file mode 100644
index 00000000..5de27661
--- /dev/null
+++ b/animata/card/customer-rating.tsx
@@ -0,0 +1,73 @@
+"use client";
+import { useState } from "react";
+import { Poppins } from "next/font/google";
+import Image from "next/image";
+
+import { cn } from "@/lib/utils";
+
+interface CustomerRatingProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: string;
+  imageUrl: string;
+  rating: number;
+}
+export const poppins = Poppins({
+  subsets: ["latin"],
+  weight: "700",
+});
+
+const CustomerRating: React.FC<CustomerRatingProps> = ({
+  name,
+  rating,
+  imageUrl,
+}: CustomerRatingProps) => {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      className={cn(
+        poppins.className,
+        "w-80 rounded-3xl border border-gray-400 bg-white pl-8 pr-8 text-black shadow-md",
+        "transform transition-transform duration-300",
+        { "scale-105": hovered, "scale-100": !hovered }, // Conditional scaling
+      )}
+    >
+      {/* Customer Image and Name */}
+      <div className="mb-4 mt-8 flex items-center gap-4">
+        <div className="relative h-12 w-12 overflow-hidden rounded-full">
+          <Image
+            className="rounded-full object-cover"
+            src={imageUrl}
+            alt={name}
+            width={50}
+            height={50}
+            loading="lazy"
+          />
+        </div>
+
+        <div>
+          <h6 className="text-lg font-medium">{name}</h6>
+          <span className="mt-2 text-xl font-extrabold text-gray-700">{rating}%</span>
+        </div>
+      </div>
+
+      {/* Rating Bar */}
+      <div className="mb-8 mt-4 flex w-full items-center justify-start">
+        <div
+          className={cn(
+            "relative h-4 overflow-hidden rounded-full bg-gray-300 transition-all duration-300",
+            { "w-full": hovered, "w-10": !hovered },
+          )}
+        >
+          <div
+            className="absolute left-0 top-0 h-full rounded-full bg-green-600 transition-all duration-300"
+            style={{ width: hovered ? `${rating}%` : "0%" }} // Dynamically set width
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CustomerRating;
diff --git a/content/docs/card/customer-rating.mdx b/content/docs/card/customer-rating.mdx
new file mode 100644
index 00000000..d104c5f2
--- /dev/null
+++ b/content/docs/card/customer-rating.mdx
@@ -0,0 +1,42 @@
+---
+title: Customer Rating
+description: A customer rating component that will display ratings out of 100. The rating bar will be revealed when hovered on the component.
+labels: ["requires interaction", "hover"]
+author: [Darshan Odedara](https://github.com/codeza-ai)
+---
+
+<ComponentPreview name="card-customer-rating--docs" />
+
+## Installation
+
+<Steps>
+<Step>Run the following commmand to create the component file.</Step>
+
+It will create a new file `customer-rating.tsx` inside the `components/animata/card` directory.
+
+```bash
+mkdir -p components/animata/card && touch components/animata/card/customer-rating.tsx
+```
+
+<Step>Paste the code</Step>{" "}
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/card/customer-rating.tsx
+
+```
+
+<Step>Use the responsive component with your own props.<Step>
+Import the compoent with the import statement given below.
+
+```jsx
+import { CustomerRating } from "./components/animata/card/customer-rating";
+```
+
+</Steps>
+
+## Credits
+
+Built by [Darshan Odedara](https://github.com/codeza-ai)
+
+...Add appropriate credits here.
diff --git a/next.config.mjs b/next.config.mjs
index 0965033c..4dd014e2 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -7,6 +7,7 @@ const nextConfig = {
   swcMinify: true,
   images: {
     unoptimized: true,
+    domains: ['images.unsplash.com'],
   },
 };