personal website
nekomimi.pet
1interface SocialLinkProps {
2 name: string
3 handle: string
4 url: string
5}
6
7export function SocialLink({ name, handle, url }: SocialLinkProps) {
8 return (
9 <a
10 href={url}
11 className="group p-4 border border-[oklch(0.48_0.015_255)] dark:border-border rounded-lg hover:border-[oklch(0.3_0.015_255)] dark:hover:border-muted-foreground/50 transition-all duration-300 hover:shadow-sm block"
12 target="_blank"
13 rel="noopener noreferrer"
14 >
15 <div className="space-y-2">
16 <div className="text-[oklch(0.2_0.02_255)] dark:text-foreground dark:group-hover:text-muted-foreground transition-colors duration-300">
17 {name}
18 </div>
19 <div className="text-sm text-[oklch(0.48_0.015_255)] dark:text-muted-foreground">
20 {handle}
21 </div>
22 </div>
23 </a>
24 )
25}