Now in Public Beta ✨

Meet The Frontend Expert On Your Team.

Generate production-ready UI components through a conversation with Flick. Ship faster.

Prompt: Create a team member profile card with avatar, name, role, social links, and a "Message" button.

import React from "react";
import { Twitter, Linkedin, Mail, ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";

interface TeamMemberCardProps extends React.HTMLAttributes<HTMLDivElement> {
  name?: string;
  role?: string;
  avatarUrl?: string;
  email?: string;
  twitterUrl?: string;
  linkedinUrl?: string;
}

export default function TeamMemberCard({
  name,
  role,
  avatarUrl,
  email,
  twitterUrl,
  linkedinUrl,
  className,
  ...rest
}: TeamMemberCardProps) {
  return (
    <div
      className={cn(
        "rounded-2xl bg-white/5 border border-slate-700 p-6 shadow-lg max-w-xs w-full backdrop-blur",
        className
      )}
      {...rest}
    >
      <img
        src="https://randomuser.me/api/portraits/men/32.jpg"
        alt="Avatar"
        className="w-20 h-20 rounded-full mx-auto border-4 border-indigo-500/30 shadow mb-4"
      />
      <div className="text-center">
        <h3 className="text-lg font-bold text-slate-100">{name}</h3>
        <p className="text-indigo-400 text-sm mb-2">{role}</p>
        <div className="flex justify-center gap-3 mb-4">
          <a href={twitterUrl} target="_blank" rel="noopener">
            <Twitter size={18} className="text-slate-400 hover:text-indigo-400 transition" />
          </a>
          <a href={linkedinUrl} target="_blank" rel="noopener">
            <Linkedin size={18} className="text-slate-400 hover:text-indigo-400 transition" />
          </a>
          <a href={email} target="_blank" rel="noopener">
            <Mail size={18} className="text-slate-400 hover:text-indigo-400 transition" />
          </a>
        </div>
        <Button className="w-full">
          Message <ArrowRight size={16} className="ml-2" />
        </Button>
      </div>
    </div>
  );
}