Invite Teammates Component This component allows users to invite new members via email, generate a shareable link, and view the status of existing team members. It's built with accessibility and reusability in mind, featuring smooth animations for list rendering.
import { InviteTeammates } from "@/components/ui/invite-teammates"; // Adjust the import path
const Demo = () => {
// Sample data for the teammates list
const sampleTeammates = [
{
name: "Arlo Finch",
email: "arlofinch@company.com",
avatarUrl: "https://cdn.21st.dev/assets/mirror/10/10e2bfa5446e5c116e269b649b5f5e0106d96643f0a903048f3a056e40c35cd8.jpg",
status: "Online" as const,
lastActive: "",
},
{
name: "Juniper Lane",
email: "juniperlane@company.com",
avatarUrl: "https://cdn.21st.dev/assets/mirror/db/db395a118244043772f21d6cd644901eaf89eab5a3dfcedcc73c255a4d6417e0.jpg",
status: "Away" as const,
lastActive: "2 mins",
},
{
name: "Rowan Sage",
email: "rowansage@company.com",
avatarUrl: "https://cdn.21st.dev/assets/mirror/9a/9a3f3f88dac2ceb807e98d4cbe99acc9813da6d0ce2859b1cf026747727e1667.jpg",
status: "Away" as const,
lastActive: "2 days",
},
{
name: "Finnian York",
email: "finnianyork@company.com",
avatarUrl: "https://cdn.21st.dev/assets/mirror/34/346464a2e3f1a5ef41c81c73d08727d0c784e9445031fa30849ee60fc48dd425.jpg",
status: "Inactive" as const,
lastActive: "1 year",
},
];
// Handler functions to demonstrate interactivity
const handleInvite = (emails: string[]) => {
console.log("Inviting emails:", emails);
// Here you would typically make an API call
alert(`Invited: ${emails.join(", ")}`);
};
const handleGetLink = () => {
console.log("Generating shareable link...");
// Logic to copy link to clipboard
navigator.clipboard.writeText("https://example.com/share/file-12345");
alert("Shareable link copied to clipboard!");
};
return (
<div className="flex min-h-screen items-center justify-center bg-background p-4">
<InviteTeammates
teammates={sampleTeammates}
onInvite={handleInvite}
onGetLink={handleGetLink}
/>
</div>
);
};
export default Demo;