TestimonialItem Component
The TestimonialItem component is a versatile React component designed to display customer testimonials. It features a customizable quote, star rating, author information, and the ability to highlight specific sentences within the testimonial text.
Importing the Component
To use the TestimonialItem component in your React application, import it as follows:
import { TestimonialItem } from '@/components/TestimonialItem';
Props
The TestimonialItem component accepts the following props:
Prop Name | Type | Description |
---|---|---|
text | string | The main text of the testimonial |
name | string | The name of the person giving the testimonial |
job | string | The job title or company of the person |
pictureUrl | string | URL of the profile picture |
highlightSentences | string[] (optional) | An array of sentences to highlight within the text |
Basic Usage
Here's a basic example of how to use the TestimonialItem component:
import { TestimonialItem } from '@/components/TestimonialItem';
const MyTestimonial = () => {
return (
<TestimonialItem
text="This product has revolutionized our workflow. It's incredibly easy to use and has saved us countless hours. The customer support is also top-notch."
name='Jane Doe'
job='CEO, Tech Innovators'
pictureUrl='/path/to/jane-doe-picture.jpg'
highlightSentences={[
"It's incredibly easy to use and has saved us countless hours.",
]}
/>
);
};
Styling
The TestimonialItem component uses Tailwind CSS for styling. Key styling features include:
- Maximum width of 600px for the entire component
- Flexible layout using flexbox
- Rounded full-width image for the author's picture
- Color theming for light and dark modes
- Custom brand colors for highlighted text and icons
Customization
To customize the TestimonialItem component:
- Modify the Tailwind CSS classes to change the appearance, spacing, or colors.
- Adjust the star rating by adding or removing
<TbStarFilled />
components. - Replace the
TbQuote
andTbStarFilled
icons with different icons if desired. - Extend the
ITestimonialItemProps
interface to include additional props for more customization options.
Accessibility
To improve accessibility:
- Consider adding appropriate ARIA labels to the star rating to convey the rating value to screen readers.
- Ensure sufficient color contrast for text elements, especially in dark mode.
- Add alt text to the author's image that includes their name and role.
Best Practices and Improvements
- Consider making the star rating dynamic based on a prop value.
- Implement error handling for cases where the
pictureUrl
is invalid or the image fails to load. - Add prop validation using PropTypes or TypeScript to ensure required props are provided.
- Consider adding a fallback UI for when certain props are missing (e.g., a default avatar if no
pictureUrl
is provided). - Optimize the component for better performance by memoizing the
highlightText
function if it's used frequently.
Example Usage in a Testimonial Section
Here's an example of how you might use multiple TestimonialItem components in a testimonial section:
import { TestimonialItem } from '@/components/TestimonialItem';
const TestimonialSection = () => {
const testimonials = [
{
text: "This product has revolutionized our workflow. It's incredibly easy to use and has saved us countless hours. The customer support is also top-notch.",
name: 'Jane Doe',
job: 'CEO, Tech Innovators',
pictureUrl: '/images/jane-doe.jpg',
highlightSentences: [
"It's incredibly easy to use and has saved us countless hours.",
],
},
{
text: "I can't imagine running my business without this tool. The features are comprehensive and the interface is intuitive. It's been a game-changer for us.",
name: 'John Smith',
job: 'Founder, StartUp Solutions',
pictureUrl: '/images/john-smith.jpg',
highlightSentences: ["It's been a game-changer for us."],
},
// Add more testimonials as needed
];
return (
<section className='py-12 bg-gray-50 dark:bg-gray-800'>
<div className='container mx-auto'>
<h2 className='text-3xl font-bold text-center mb-8'>
What Our Customers Say
</h2>
<div className='grid gap-8 md:grid-cols-2 lg:grid-cols-3'>
{testimonials.map((testimonial, index) => (
<TestimonialItem key={index} {...testimonial} />
))}
</div>
</div>
</section>
);
};
export default TestimonialSection;
This example demonstrates how to use multiple TestimonialItem components within a grid layout to create a comprehensive testimonial section.
By using the TestimonialItem component, you can easily display customer testimonials with a professional and customizable design. The component's ability to highlight specific sentences allows you to emphasize key points from each testimonial, potentially increasing the impact of your social proof elements.