Changes
Co-authored-by: Damaj301damaj-lol <90093996+Damaj301damaj-lol@users.noreply.github.com>
This commit is contained in:
parent
bd762556c7
commit
7a6ba998fc
1 changed files with 33 additions and 24 deletions
|
|
@ -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,
|
||||
}}
|
||||
>
|
||||
<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" />
|
||||
</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 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" />
|
||||
{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>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue