Testimonial Card

Overview

The Testimonial Card Component is a customizable UI element designed to display testimonials in an engaging and visually appealing manner. It features a star rating system, alongside the name, title, and description associated with the testimonial. This component is ideal for showcasing customer feedback, reviews, or endorsements on your website or application, contributing to increased credibility and trustworthiness.

Features

• Star Rating Visualization: Dynamically displays a star rating out of five, using filled and unfilled star characters.
• Customizable Content: Supports essential details such as the reviewer's name, their title or affiliation, and the testimonial text.
• Responsive and Accessible: Designed with responsiveness in mind, ensuring it looks great on devices of all sizes while maintaining accessibility standards.
• Dark Mode Support: Ready for dark mode, providing consistent aesthetics across different theme preferences.

Props

The component accepts the following props for customization:

• stars (Number, required): The star rating of the testimonial, from 0 to 5.
• name (String, required): The name of the person or entity providing the testimonial.
• title (String, required): The title or affiliation of the person providing the testimonial.
• description (String, required): The text of the testimonial, detailing the customer's experience or feedback.

Computed Properties

• starRating: A computed property that concatenates filled and unfilled stars based on the stars prop, visually representing the rating as a string.

Example Usage

<TestimonialCard
  stars="4"
  name="Jane Doe"
  title="CEO at ExampleCorp"
  description="This product has transformed our workflow for the better. Highly recommended for teams looking for efficiency!"
/>

Customization

• Content: Adjust the stars, name, title, and description props to reflect the specific testimonial you wish to display.
• Styling: Utilizes Tailwind CSS for styling, making it easy to adjust the appearance to fit your design system. Modify the Tailwind classes in the template for further customization.

Usage

To integrate the Testimonial Card Component into your Vue or Nuxt application:

1. Ensure Tailwind CSS is set up in your project for consistent styling.
2. Copy the component code into a new .vue file within your project's components directory.
3. Import and use the component in your pages or components where you want to showcase testimonials.

Component Code

<script setup lang="ts">
import { computed } from 'vue';

interface PropsInterface {
  stars: number;
  name: string;
  title: string;
  description: string;
}

const props = defineProps<PropsInterface>();

const starRating = computed(() => {
  const filledStars = '★'.repeat(props.stars);
  const unfilledStars = '☆'.repeat(5 - props.stars);
  return filledStars + unfilledStars;
});
</script>

<template>
  <div class="my-md flex justify-center">
    <div
      class="flex w-72 flex-col rounded-lg bg-black p-4 text-start text-primary dark:bg-primary dark:text-black"
    >
      <div class="flex flex-col text-base">
        <div>
          <p class="text-xl font-bold">{{ starRating }}</p>
        </div>
        <p class="mt-2">{{ description }}</p>
        <p class="mt-4 font-bold">{{ name }}</p>
        <p>{{ title }}</p>
      </div>
    </div>
  </div>
</template>