Co-authored-by: Damaj301damaj-lol <90093996+Damaj301damaj-lol@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot] 2026-05-19 15:12:50 +00:00
parent bd762556c7
commit 7a6ba998fc

View file

@ -1,10 +1,11 @@
import { useRef, useState, useEffect, useCallback } from 'react';
import { Link } from 'react-router-dom';
import { GlassCard } from '@/components/GlassCard';
import avatar from '@/assets/avatar.png';
import { Home, MessageCircle, Rss, GitBranch, Search, ExternalLink } from 'lucide-react';
import { MessageCircle, Rss, GitBranch, Search, ExternalLink, ArrowUpRight } from 'lucide-react';
const items = [
{ icon: MessageCircle, label: 'Who Am I?', href: 'https://damaj.tech/site/whoami', desc: 'About me' },
{ icon: MessageCircle, label: 'Who Am I?', href: '/whoami', desc: 'About me', internal: true },
{ icon: Rss, label: 'Blog', href: 'https://damaj.tech/site/blog', desc: 'My writings' },
{ icon: GitBranch, label: 'Git Server', href: 'https://git.damaj.tech/', desc: 'Self-hosted Forgejo' },
{ icon: Search, label: 'SearXNG', href: 'https://searxng.damaj.tech/', desc: 'Private search' },
@ -151,28 +152,36 @@ const Index = () => {
const cardW = isMobile ? 110 : 130;
const cardH = isMobile ? 80 : 90;
return (
<a
key={item.label}
ref={(el) => { cardRefs.current[i] = el; }}
href={item.href}
target="_blank"
rel="noopener noreferrer"
className="absolute"
style={{
left: `calc(50% + ${x}px - ${cardW / 2}px)`,
top: `calc(50% + ${y}px - ${cardH / 2}px)`,
width: cardW,
}}
>
const cardContent = (
<GlassCard className="p-3 md:p-4 link-arrow-parent cursor-pointer">
<div className="flex items-start justify-between">
<item.icon className="w-4 h-4 text-primary mb-1.5" />
<ExternalLink className="w-3 h-3 text-muted-foreground link-arrow" />
{item.internal
? <ArrowUpRight className="w-3 h-3 text-muted-foreground link-arrow" />
: <ExternalLink className="w-3 h-3 text-muted-foreground link-arrow" />}
</div>
<p className="font-heading font-semibold text-foreground text-xs md:text-sm leading-tight">{item.label}</p>
<p className="text-[10px] text-muted-foreground mt-0.5 leading-tight">{item.desc}</p>
</GlassCard>
);
const commonProps = {
ref: (el: HTMLAnchorElement | null) => { cardRefs.current[i] = el; },
className: 'absolute',
style: {
left: `calc(50% + ${x}px - ${cardW / 2}px)`,
top: `calc(50% + ${y}px - ${cardH / 2}px)`,
width: cardW,
},
};
return item.internal ? (
<Link key={item.label} to={item.href} {...commonProps}>
{cardContent}
</Link>
) : (
<a key={item.label} href={item.href} target="_blank" rel="noopener noreferrer" {...commonProps}>
{cardContent}
</a>
);
})}