67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import { Icon } from '@iconify-icon/react';
|
|
import { useRef, type MouseEvent } from 'react';
|
|
|
|
interface Item {
|
|
name: string;
|
|
icon: string;
|
|
level: 'primary' | 'secondary';
|
|
}
|
|
|
|
interface Props {
|
|
label: string;
|
|
items: Item[];
|
|
accent?: 'cyan' | 'magenta';
|
|
}
|
|
|
|
export default function SkillCard({ label, items, accent = 'cyan' }: Props) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
function onMove(e: MouseEvent<HTMLDivElement>) {
|
|
if (!ref.current) return;
|
|
const rect = ref.current.getBoundingClientRect();
|
|
const x = (e.clientX - rect.left) / rect.width - 0.5;
|
|
const y = (e.clientY - rect.top) / rect.height - 0.5;
|
|
ref.current.style.transform = `perspective(1000px) rotateX(${-y * 6}deg) rotateY(${x * 6}deg) translateZ(0)`;
|
|
}
|
|
|
|
function onLeave() {
|
|
if (!ref.current) return;
|
|
ref.current.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
|
|
}
|
|
|
|
const accentColor = accent === 'cyan' ? 'var(--color-cyan)' : 'var(--color-magenta)';
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
onMouseMove={onMove}
|
|
onMouseLeave={onLeave}
|
|
className="card-neon h-full flex flex-col transition-transform duration-300 ease-out will-change-transform"
|
|
style={{ borderColor: `${accentColor}33` }}
|
|
>
|
|
<h3
|
|
className="font-display uppercase text-xs tracking-[0.2em] mb-5"
|
|
style={{ color: accentColor, textShadow: `0 0 10px ${accentColor}66` }}
|
|
>
|
|
{label}
|
|
</h3>
|
|
<div className="grid grid-cols-4 gap-x-3 gap-y-5 flex-1 content-start">
|
|
{items.map((item) => (
|
|
<div
|
|
key={item.name}
|
|
className="flex flex-col items-center text-center group"
|
|
title={item.name}
|
|
>
|
|
<div className="w-11 h-11 flex items-center justify-center rounded-md bg-[color:var(--color-bg)] border border-[color:var(--color-border)] group-hover:border-[color:var(--color-cyan)] transition-all group-hover:glow-cyan">
|
|
<Icon icon={item.icon} width="22" height="22" />
|
|
</div>
|
|
<span className="mt-1.5 text-[10px] font-mono text-[color:var(--color-text-muted)] group-hover:text-[color:var(--color-text)] transition-colors truncate max-w-full">
|
|
{item.name}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|