Profile Card A visually polished card for displaying a user's profile, including an avatar, name, title, key statistics, and call-to-action buttons. It is designed to be highly reusable by accepting all content via props.
import { ProfileCard, ProfileCardProps } from "@/components/ui/card-3"; // Adjust path if needed
const ProfileCardDemo = () => {
// Sample data for the component, easily fetched from an API
const userProfile: ProfileCardProps = {
imageUrl: "https://cdn.21st.dev/assets/mirror/2e/2e31da7fffb7c833bfe5d16233dabe5c1a62b6a45a56cc49e42bf01e2a679257.jpg",
fallbackText: "SR",
name: "Sam Rivers",
title: "Photographer",
stats: [
{ label: "Countries Visited", value: 28 },
{ label: "Exhibitions Held", value: 10 },
{ label: "Rating", value: 4.9 },
],
primaryActionLabel: "Explore Portfolio",
secondaryActionLabel: "Message",
onPrimaryAction: () => alert("Exploring Portfolio!"),
onSecondaryAction: () => alert("Sending a message!"),
};
return (
<div className="flex h-full w-full items-center justify-center bg-background p-4">
<ProfileCard {...userProfile} />
</div>
);
};
export default ProfileCardDemo;