Components
Performance Card A responsive and theme-adaptive card component designed to display key performance metrics. It features a tabbed interface to switch between different data views, animated content transitions, and customizable data points for users, sales, and other statistics. It is built with framer-motion for smooth animations and follows shadcn/ui best practices for styling and structure.
Loading preview...
import React, { useState } from "react";
import { PerformanceCard } from "@/components/ui/performance-card"; // Adjust the import path
// Mock data for the demo
const demoData = {
topUser: {
name: "Gillian P.",
avatarUrl: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
metricLabel: "Daily Purchase",
metricValue: "10",
},
metricData: {
label: "Total New Users",
value: "5,9k",
percentageChange: 8.20,
users: [
{ id: '1', name: 'User 1', avatarUrl: 'https://i.pravatar.cc/150?u=a042581f4e29026704a' },
{ id: '2', name: 'User 2', avatarUrl: 'https://i.pravatar.cc/150?u=a042581f4e29026704b' },
{ id: '3', name: 'User 3', avatarUrl: 'https://i.pravatar.cc/150?u=a042581f4e29026704c' },
{ id: '4', name: 'User 4', avatarUrl: 'https://i.pravatar.cc/150?u=a042581f4e29026704e' },
],
},
footerNote: "Increase 25% more email marketing to reach your user acquisition target to reach your monthly target.",
};
const tabs = ["New Users", "Online Sales", "Daily Sales"];
// The demo component
export default function PerformanceCardDemo() {
const [activeTab, setActiveTab] = useState(tabs[0]);
// In a real application, you would fetch different data when the tab changes.
// For this demo, we'll reuse the same data to showcase the animation.
const handleTabChange = (tab: string) => {
setActiveTab(tab);
// e.g., fetchDataForTab(tab);
};
return (
<div className="flex h-full w-full items-center justify-center bg-background p-4">
<PerformanceCard
tabs={tabs}
activeTab={activeTab}
onTabChange={handleTabChange}
topUser={demoData.topUser}
metricData={demoData.metricData}
footerNote={demoData.footerNote}
/>
</div>
);
}