profile-card

1import { 
2  Avatar, 
3  AvatarFallback, 
4  AvatarImage } from "@/components/ui/avatar"
5import { Badge } from "@/components/ui/badge"
6import { Button } from "@/components/ui/button" 
7import { Card,
8  CardContent, 
9  CardFooter, 
10  CardHeader } from "@/components/ui/card"
11import { Code, GitBranch, Mail, Users } from 'lucide-react'
12 
13interface ProfileCardProps {
14  name: string
15  role: string
16  avatarUrl: string
17  skills: string[]
18  recentActivity: string
19  team: string
20  email: string
21}
22 
23export function ProfileCard({
24  name,
25  role,
26  avatarUrl,
27  skills,
28  recentActivity,
29  team,
30  email
31}: ProfileCardProps) {
32  return (
33    <Card className="bg-card max-w-md w-full">
34      <CardHeader className="flex flex-row items-center gap-4">
35        <Avatar className="h-20 w-20 bg-primary/90 ">
36          <AvatarImage src={avatarUrl} alt={name} />
37          <AvatarFallback>{name.split(' ').map(n => n[0]).join('')}</AvatarFallback>
38        </Avatar>
39        <div>
40          <h2 className="text-2xl font-bold">{name}</h2>
41          <p className="text-sm text-muted-foreground">{role}</p>
42        </div>
43      </CardHeader>
44      <CardContent className="grid gap-4">
45        <div className="flex flex-wrap gap-2">
46          {skills.map((skill, index) => (
47            <Badge key={index} variant="secondary">
48              <Code className="mr-1 h-3 w-3" />
49              {skill}
50            </Badge>
51          ))}
52        </div>
53        <div className="flex items-center gap-2 text-sm">
54          <GitBranch className="h-4 w-4 text-muted-foreground" />
55          <span>Recent activity: {recentActivity}</span>
56        </div>
57        <div className="flex items-center gap-2 text-sm">
58          <Users className="h-4 w-4 text-muted-foreground" />
59          <span>Team: {team}</span>
60        </div>
61      </CardContent>
62      <CardFooter>
63        <Button className="w-full" variant="outline">
64          <Mail className="mr-2 h-4 w-4" />
65          Contact
66        </Button>
67      </CardFooter>
68    </Card>
69  )
70}