Share Card

Cards 86

About

ShareCard A card component to manage and share access to a resource, such as a folder. It allows inviting new users with specific roles and modifying the roles of existing users.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";
import { ShareCard, User } from "@/components/ui/share-card";

// Mock user data based on the provided image
const initialUsers: User[] = [
  {
    id: "1",
    name: "Heisenberg",
    email: "walterwhite@gmail.com",
    avatar: "https://cdn.21st.dev/assets/mirror/42/420c64d5e90b2ff05fc182e3d8c3df40076440cb684d927efed247855775ea9b.jpg",
    role: "Owner",
  },
  {
    id: "2",
    name: "Jesse Pinkman",
    email: "bitch@gmail.com",
    avatar: "https://cdn.21st.dev/assets/mirror/4f/4fcf7f925f8c23881f850d2c242e643915c1141e6e23e8cace997c603267198c.jpg",
    role: "Viewer",
  },
  {
    id: "3",
    name: "Gustavo Fring",
    email: "thechickenman@gmail.com",
    avatar: "https://cdn.21st.dev/assets/mirror/a7/a785c3eae0f7dc7d4cdd9d8679863c2239d5627711a3a3485ce99005a9c3560d.jpg",
    role: "Viewer",
  },
  {
    id: "4",
    name: "Saul Goodman",
    email: "bettercallsaul@gmail.com",
    avatar: "https://cdn.21st.dev/assets/mirror/9a/9a3f3f88dac2ceb807e98d4cbe99acc9813da6d0ce2859b1cf026747727e1667.jpg",
    role: "Viewer",
  },
  {
    id: "5",
    name: "Mike Ehrmantraut",
    email: "poppop@gmail.com",
    avatar: "https://cdn.21st.dev/assets/mirror/c8/c8fff9320a42977b719bac79df70b93920bcb0e5d6cdfe3a9eccf0b700a6af08.jpg",
    role: "Viewer",
  },
];

export default function ShareCardDemo() {
  const [users, setUsers] = React.useState<User[]>(initialUsers);

  // Handler for role changes
  const handleRoleChange = (userId: string, newRole: "Editor" | "Viewer") => {
    setUsers((prevUsers) =>
      prevUsers.map((user) =>
        user.id === userId ? { ...user, role: newRole } : user
      )
    );
    console.log(`User ${userId} role changed to ${newRole}`);
  };

  // Handler for inviting new users
  const handleInvite = (email: string, role: "Editor" | "Viewer") => {
    const newUser: User = {
      id: (users.length + 1).toString(),
      name: "New Member",
      email,
      avatar: `https://i.pravatar.cc/150?u=${email}`,
      role,
    };
    setUsers((prevUsers) => [...prevUsers, newUser]);
    console.log(`Invited ${email} with role ${role}`);
  };

  return (
    <div className="flex items-center justify-center h-full p-4 bg-background">
      <ShareCard
        folderName="Meth Lab"
        itemCount={159}
        users={users}
        onRoleChange={handleRoleChange}
        onInvite={handleInvite}
      />
    </div>
  );
}