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