testimonial card

Author: ariflogs

app/(sink)/demo/components/page.tsx

@@ -15,6 +15,7 @@ import {
 } from "@/packages/ui";
 import { Card } from "@/packages/ui/Cards/Card";
 import BadgeStyleVariants from "@/preview/components/badge-style-variants";
+import TestimonialCard from "@/preview/components/card-style-testimonial";
 import { CheckCircle } from "lucide-react";
 import React from "react";
 
@@ -114,6 +115,8 @@ export default function page() {
         </Menu>
       </div>
 
+      <TestimonialCard />
+
       <div className="h-36"></div>
     </div>
   );

components/Testimonial.tsx

@@ -0,0 +1,35 @@
+import { Text, Card, Avatar } from "@/packages/ui";
+
+interface TestimonialCardProps {
+  quote: string;
+  avatarSrc: string;
+  name: string;
+  title: string;
+}
+
+export default function TestimonialCard({
+  quote,
+  avatarSrc,
+  name,
+  title,
+}: TestimonialCardProps) {
+  return (
+    <Card className="w-full max-w-[400px] shadow-none hover:shadow-md">
+      <Card.Content>
+        <Text className="text-lg">" {quote} "</Text>
+
+        <div className="flex items-center space-x-2 mt-6">
+          <Avatar className="h-10 w-10">
+            <Avatar.Image alt={`${name} avatar`} src={avatarSrc} />
+          </Avatar>
+          <div>
+            <div className="font-medium">{name}</div>
+            <div className="text-sm text-gray-500 dark:text-gray-400">
+              {title}
+            </div>
+          </div>
+        </div>
+      </Card.Content>
+    </Card>
+  );
+}

config/components.ts

@@ -134,6 +134,13 @@ export const componentConfig = {
       filePath: "preview/components/card-style-commerce.tsx",
       preview: lazy(() => import("@/preview/components/card-style-commerce")),
     },
+    "card-style-testimonial": {
+      name: "card-style-testimonial",
+      filePath: "preview/components/card-style-testimonial.tsx",
+      preview: lazy(
+        () => import("@/preview/components/card-style-testimonial")
+      ),
+    },
     "input-style-default": {
       name: "input-style-default",
       filePath: "preview/components/input-style-default.tsx",

content/docs/components/card.mdx

@@ -27,3 +27,9 @@ lastUpdated: 20 Oct, 2024
 ### Product card
 
 <ComponentShowcase name="card-style-commerce" />
+<br />
+<br />
+
+### Testimonial card
+
+<ComponentShowcase name="card-style-testimonial" />

preview/components/card-style-testimonial.tsx

@@ -0,0 +1,28 @@
+import { Text, Card, Avatar } from "@/packages/ui";
+
+export default function TestimonialCard() {
+  return (
+    <Card className="w-full max-w-[400px] shadow-none hover:shadow-md">
+      <Card.Content>
+        <Text className="text-lg">
+          " RetroUI is the cooling looking UI library out there! "
+        </Text>
+
+        <div className="flex items-center space-x-2 mt-6">
+          <Avatar className="h-10 w-10">
+            <Avatar.Image
+              alt="avatar"
+              src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
+            />
+          </Avatar>
+          <div>
+            <div className="font-medium">Leroy Jenkins</div>
+            <div className="text-sm text-gray-500 dark:text-gray-400">
+              CEO of Uber
+            </div>
+          </div>
+        </div>
+      </Card.Content>
+    </Card>
+  );
+}