Profile Selector Component This component, named ProfileSelector, displays a grid of user profiles for selection. It's built to be data-driven, accepting an array of profiles and handler functions via props, making it extremely reusable for any application requiring a "who's watching?" style interface.
import { ProfileSelector, ProfileIcon } from "@/components/ui/profile-selector"; // Adjust path as needed
import { Plus } from "lucide-react"; // Using lucide-react for icons
/**
* A demo showcasing the ProfileSelector component with image URLs.
*/
export default function ProfileSelectorDemo() {
// Sample data using image URLs for profiles
const sampleProfiles = [
{
id: "Ravi",
label: "Ravi",
// Using a placeholder image service for the demo icon
icon: "https://cdn.21st.dev/assets/mirror/c9/c9babfd70e9056d8223e9d2eda28c4c7cc6c3555d666e10ef656b70a49f67a48.png",
},
{
id: "vaib",
label: "Vaib",
// Using a placeholder image service for the demo icon
icon: "https://cdn.21st.dev/assets/mirror/07/0751fdebf5247cf9eb922b8e04e61adc56845770aa86e5c96268150aa6e0c1c7.jpg",
},
{
id: "kids",
label: "Kids",
// Using a placeholder image service for the demo icon
icon: "https://cdn.21st.dev/assets/mirror/b5/b53ee43974b480634d03d5bd5a4244aba56f7ef731c244fbef72747494732047.jpg",
},
{
id: "add",
label: "Add",
// The 'Add' button can still be a React component for flexibility
icon: (
<ProfileIcon className="bg-foreground/5">
<Plus className="h-12 w-12 text-muted-foreground" />
</ProfileIcon>
),
},
];
// Handler for when a profile is selected
const handleProfileSelect = (id: string) => {
if (id === "add") {
alert("Add new profile action triggered!");
} else {
alert(`Profile selected: ${id}`);
}
};
return (
<ProfileSelector profiles={sampleProfiles} onProfileSelect={handleProfileSelect} />
);
}