Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | 262x 46x 2x 4x | import { Users, Plus, Edit2, Trash2, User } from "lucide-react";
import {
Card,
CardContent,
CardHeader,
CardTitle,
CardDescription,
} from "../ui/card";
import { Button } from "../ui/button";
import { type ProLeadership, getImageUrl } from "../../lib/api";
interface LeadershipSectionProps {
leadershipTeam: ProLeadership[];
onAdd: () => void;
onEdit: (member: ProLeadership) => void;
onDelete: (id: number) => void;
/**
* #424: gate the Add/Edit/Delete affordances on the caller's edit
* permission. Default `true` preserves existing admin-page behavior
* (admin users always have edit access) so the admin call site doesn't
* need to change.
*/
canEdit?: boolean;
}
export function LeadershipSection({
leadershipTeam,
onAdd,
onEdit,
onDelete,
canEdit = true,
}: LeadershipSectionProps) {
return (
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<div>
<CardTitle className="flex items-center gap-2">
<Users className="h-5 w-5" />
Leadership Team
</CardTitle>
<CardDescription>
Introduce your team to build trust (up to 5 members)
</CardDescription>
</div>
{canEdit && leadershipTeam.length < 5 && (
<Button variant="outline" size="sm" onClick={onAdd}>
<Plus className="h-4 w-4 mr-1" />
Add Member
</Button>
)}
</CardHeader>
<CardContent>
{leadershipTeam.length === 0 ? (
<div className="text-center py-8 text-foreground-muted">
<Users className="h-12 w-12 mx-auto mb-2 text-foreground-subtle" />
<p>No team members added yet</p>
<p className="text-sm">
Adding team photos increases trust significantly
</p>
</div>
) : (
<div className="space-y-4">
{leadershipTeam.map((member) => (
<div
key={member.id}
className="flex items-start justify-between p-4 border rounded-lg"
>
<div className="flex items-start gap-3">
{member.photoUrl ? (
<img
src={getImageUrl(member.photoUrl)}
alt={member.name}
className="h-10 w-10 rounded-full object-cover border border-border-default flex-shrink-0"
/>
) : (
<div className="h-10 w-10 rounded-full bg-background-muted flex items-center justify-center flex-shrink-0">
<User className="h-5 w-5 text-foreground-subtle" />
</div>
)}
<div>
<h4 className="font-medium">{member.name}</h4>
<p className="text-sm text-foreground-muted">{member.role}</p>
{member.bio && (
<p className="text-sm text-foreground-muted mt-1">
{member.bio}
</p>
)}
</div>
</div>
{canEdit && (
<div className="flex gap-2">
<button
type="button"
onClick={() => onEdit(member)}
className="p-1 text-foreground-subtle hover:text-info"
>
<Edit2 className="h-4 w-4" />
</button>
<button
type="button"
onClick={() => onDelete(member.id)}
className="p-1 text-foreground-subtle hover:text-error"
>
<Trash2 className="h-4 w-4" />
</button>
</div>
)}
</div>
))}
</div>
)}
</CardContent>
</Card>
);
}
|