Profile Selector

Component 445

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Profile Selector to your project and fits it to your theme.

Code

How Profile Selector is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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} />
  );
}