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

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

44
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,27 +122,15 @@ 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 (
},
{
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 <a
key={p.name} key={p.name}
href={p.href} href={p.href}
@ -149,13 +138,20 @@ export default function Trust() {
rel="noreferrer" rel="noreferrer"
className="rounded-lg border border-border/50 p-3 hover:border-aethex-400/50 transition" 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="font-semibold text-foreground">{p.name}</div>
<div className="text-xs">{p.title}</div> <div className="text-xs">{p.title}</div>
<div className="text-xs text-aethex-400 mt-1"> <div className="text-xs text-aethex-400 mt-1">LinkedIn ↗</div>
LinkedIn ↗ </div>
</div> </div>
</a> </a>
))} );
})}
</CardContent> </CardContent>
</Card> </Card>