63 lines
2.5 KiB
TypeScript
63 lines
2.5 KiB
TypeScript
"use client";
|
||
import React, { useState } from 'react';
|
||
import { motion, AnimatePresence } from 'motion/react';
|
||
import { Info, ExternalLink } from 'lucide-react';
|
||
import { SCIENTIFIC_TERMS } from '../lib/data/scientificTerms';
|
||
import { useSettingsStore } from '../lib/store/settingsStore';
|
||
|
||
interface TooltipProps {
|
||
termKey: string;
|
||
children: React.ReactNode;
|
||
onWikiNavigate?: (id: string) => void;
|
||
}
|
||
|
||
export default function Tooltip({ termKey, children, onWikiNavigate }: TooltipProps) {
|
||
const [isVisible, setIsVisible] = useState(false);
|
||
const scientificTerms = useSettingsStore(state => state.scientificTerms);
|
||
const termData = scientificTerms[termKey] || SCIENTIFIC_TERMS[termKey];
|
||
|
||
if (!termData) return <>{children}</>;
|
||
|
||
return (
|
||
<span
|
||
className="relative inline-block group cursor-help border-b border-dotted border-canina-blue/40"
|
||
onMouseEnter={() => setIsVisible(true)}
|
||
onMouseLeave={() => setIsVisible(false)}
|
||
>
|
||
{children}
|
||
|
||
<AnimatePresence>
|
||
{isVisible && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10, scale: 0.95 }}
|
||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||
exit={{ opacity: 0, y: 10, scale: 0.95 }}
|
||
className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-64 p-4 bg-medical-gray-900 text-white rounded-2xl shadow-2xl z-[100] text-sm"
|
||
dir="rtl"
|
||
>
|
||
<div className="flex items-center gap-2 mb-2 text-canina-blue">
|
||
<Info className="w-4 h-4" />
|
||
<span className="font-black text-[10px] uppercase tracking-widest">دانشنامه علمی کانینا</span>
|
||
</div>
|
||
<h5 className="font-black mb-1">{termData.term}</h5>
|
||
<p className="text-white/70 text-xs leading-relaxed mb-3">
|
||
{termData.definition}
|
||
</p>
|
||
{termData.wikiId && (
|
||
<button
|
||
onClick={() => onWikiNavigate?.(termData.wikiId!)}
|
||
className="flex items-center gap-1.5 text-canina-blue hover:text-white transition-colors text-[10px] font-bold"
|
||
>
|
||
<span>مطالعه مقاله کامل</span>
|
||
<ExternalLink className="w-3 h-3" />
|
||
</button>
|
||
)}
|
||
{/* Arrow */}
|
||
<div className="absolute top-full left-1/2 -translate-x-1/2 border-8 border-transparent border-t-medical-gray-900" />
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</span>
|
||
);
|
||
}
|