Fork of atp.tools as a universal profile for people on the ATmosphere

bottom bar links

+63
public/assets/discord.png

This is a binary file and will not be displayed.

public/assets/invertocat.png

This is a binary file and will not be displayed.

+2
src/components/sidebar.tsx
··· 19 19 import { ForwardRefExoticComponent, ReactNode } from "preact/compat"; 20 20 import { FontPicker } from "./fontPicker"; 21 21 import { NavUser } from "./auth/navUser"; 22 + import { ExternalLinksRow } from "./sidebarLinks"; 22 23 23 24 type BaseMenuItem = { 24 25 url: string; ··· 111 112 <FontPicker /> 112 113 <ColorToggle /> 113 114 </div> 115 + <ExternalLinksRow /> 114 116 </SidebarFooter> 115 117 <SidebarRail /> 116 118 </Sidebar>
+61
src/components/sidebarLinks.tsx
··· 1 + import { Coffee } from "lucide-react"; 2 + 3 + const 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] hover:brightness-[999] dark:hover:brightness-[8] 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 + 45 + export 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 + }