AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add avatars to executive list using Unavatar with fallback

Browse source 
cgen-3e452331c813407e9e40f5e79d089616
This commit is contained in:
Builder.io 2025-10-19 02:01:02 +00:00
parent ad49c6c9bb
commit 1f068923be
1 changed files with 31 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
client/pages/Trust.tsx
View file

@ -8,6 +8,7 @@ import {
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Link } from "react-router-dom";
import {
Shield,
@ -121,41 +122,36 @@ export default function Trust() {
</CardHeader>
<CardContent className="grid sm:grid-cols-2 gap-4 text-sm text-muted-foreground">
{[
{
name: "Anderson Gladney",
title: "Founder & CEO",
href: "https://www.linkedin.com/in/andersongladney/",
},
{
name: "Dylan Gladney",
title: "Founder & COO",
href: "https://www.linkedin.com/in/dylangladney/",
},
{
name: "Trevor Davis",
title: "Co-Founder & CFO",
href: "https://www.linkedin.com/in/trevor-davis-892642324/",
},
{
name: "Braden Eiser",
title: "Co-Founder & CTO",
href: "https://www.linkedin.com/in/bradeneiser/",
},
].map((p) => (
<a
key={p.name}
href={p.href}
target="_blank"
rel="noreferrer"
className="rounded-lg border border-border/50 p-3 hover:border-aethex-400/50 transition"
>
<div className="font-semibold text-foreground">{p.name}</div>
<div className="text-xs">{p.title}</div>
<div className="text-xs text-aethex-400 mt-1">
LinkedIn ↗
</div>
</a>
))}
{ name: "Anderson Gladney", title: "Founder & CEO", href: "https://www.linkedin.com/in/andersongladney/" },
{ name: "Dylan Gladney", title: "Founder & COO", href: "https://www.linkedin.com/in/dylangladney/" },
{ name: "Trevor Davis", title: "Co-Founder & CFO", href: "https://www.linkedin.com/in/trevor-davis-892642324/" },
{ name: "Braden Eiser", title: "Co-Founder & CTO", href: "https://www.linkedin.com/in/bradeneiser/" },
].map((p) => {
const unavatar = `https://unavatar.io/${encodeURIComponent(p.href)}`;
const fallback = `https://ui-avatars.com/api/?name=${encodeURIComponent(p.name)}&background=0D8ABC&color=fff&size=256`;
const initials = p.name.split(" ").map((n) => n[0]).join("").toUpperCase();
return (
<a
key={p.name}
href={p.href}
target="_blank"
rel="noreferrer"
className="rounded-lg border border-border/50 p-3 hover:border-aethex-400/50 transition"
>
<div className="flex items-center gap-3">
<Avatar className="h-10 w-10">
<AvatarImage src={unavatar} alt={p.name} onError={(e) => { (e.currentTarget as HTMLImageElement).src = fallback; }} />
<AvatarFallback>{initials}</AvatarFallback>
</Avatar>
<div>
<div className="font-semibold text-foreground">{p.name}</div>
<div className="text-xs">{p.title}</div>
<div className="text-xs text-aethex-400 mt-1">LinkedIn ↗</div>
</div>
</div>
</a>
);
})}
</CardContent>
</Card>