Components
Loading preview...
Sentiment Analysis Card A visually engaging card component to display sentiment analysis results with an animated, segmented progress bar. It's built to be fully reusable by accepting data through props.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/card-9import { SentimentAnalysisCard, SentimentData } from '@/components/ui/card-9';
import { Smile, Meh, Frown, Sparkles } from 'lucide-react'; // Using lucide-react for icons
// Main demo component
const SentimentAnalysisCardDemo = () => {
// Sample data to be passed to the component via props
const sentimentData: SentimentData[] = [
{
label: 'Positive',
value: 75,
color: 'bg-green-500',
icon: <Smile className="h-4 w-4 text-green-500" />,
},
{
label: 'Neutral',
value: 20,
color: 'bg-yellow-500',
icon: <Meh className="h-4 w-4 text-yellow-500" />,
},
{
label: 'Negative',
value: 5,
color: 'bg-red-500',
icon: <Frown className="h-4 w-4 text-red-500" />,
},
];
return (
<div className="flex h-full w-full items-center justify-center bg-background p-4">
<SentimentAnalysisCard
title="Sentiment Analysis"
overallSentiment="Very Positive"
overallSentimentIcon={<Sparkles className="h-4 w-4 text-green-500" />}
data={sentimentData}
/>
</div>
);
};
export default SentimentAnalysisCardDemo;