Fork of atp.tools as a universal profile for people on the ATmosphere
1import { Coffee } from "lucide-react";
2
3const externalLinks = [
4 {
5 title: "Ko-fi",
6 url: "https://ko-fi.com/uxieq",
7 icon: <Coffee className="w-6 h-6" />,
8 },
9 {
10 title: "GitHub",
11 url: "https://github.com/espeon/atptools",
12 icon: (
13 <img
14 src="/assets/invertocat.png"
15 className="h-[1.35rem] mb-0.5 brightness-[10] dark:brightness-[999] hover:brightness-[999] dark:hover:brightness-[20] grayscale invert dark:invert-0"
16 alt="Bluesky"
17 />
18 ),
19 },
20 {
21 title: "Discord",
22 url: "https://discord.gg/pgGM9n8ppf",
23 icon: (
24 <img
25 src="/assets/discord.png"
26 className="w-6 brightness-[2.2] hover:brightness-[999] dark:hover:brightness-200 grayscale hover:grayscale-0 invert dark:invert-0"
27 alt="Bluesky"
28 />
29 ),
30 },
31 {
32 title: "Bluesky",
33 url: "https://bsky.app/profile/did:plc:k644h4rq5bjfzcetgsa6tuby",
34 icon: (
35 <img
36 src="/assets/services/bluesky.png"
37 className="w-6 brightness-[8.5] hover:brightness-[999] dark:hover:brightness-200 grayscale hover:grayscale-0 invert dark:invert-0"
38 alt="Bluesky"
39 />
40 ),
41 },
42 // add more external links as desired
43];
44
45export function ExternalLinksRow() {
46 return (
47 <div className="flex flex-row justify-end items-center px-2 py-1 gap-4">
48 {externalLinks.map((link) => (
49 <a
50 key={link.title}
51 href={link.url}
52 target="_blank"
53 rel="noopener noreferrer"
54 className="flex items-center space-x-1 hover:text-primary hover:bg-muted-foreground/30 p-1 rounded-lg aspect-square *:transition-colors duration-200"
55 >
56 {link.icon}
57 </a>
58 ))}
59 </div>
60 );
61}