fcc738f25c
- Add colloidal silver, retinol palmitate, grapefruit seed extract, bovine blood/serum, argan/walnut/rosehip oils, etc. - Map all product ingredients across all categories to Wiki scientific terms - Update IngredientWiki matching rules for 100% ingredient coverage
66 lines
2.7 KiB
TypeScript
66 lines
2.7 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-72 p-5 bg-white text-medical-gray-900 rounded-2xl shadow-2xl border border-medical-gray-200 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-[11px] uppercase tracking-widest text-canina-blue">دانشنامه علمی کانینا</span>
|
||
</div>
|
||
<h5 className="font-black text-base text-medical-gray-900 mb-2 leading-snug">{termData.term}</h5>
|
||
<p className="text-medical-gray-600 text-xs leading-relaxed mb-4 font-bold">
|
||
{termData.definition}
|
||
</p>
|
||
{termData.wikiId && (
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onWikiNavigate?.(termData.wikiId!);
|
||
}}
|
||
className="flex items-center justify-between text-canina-blue hover:text-blue-700 transition-colors text-xs font-black cursor-pointer pt-2 border-t border-medical-gray-100 w-full"
|
||
>
|
||
<span>مطالعه مقاله کامل</span>
|
||
<ExternalLink className="w-3.5 h-3.5" />
|
||
</button>
|
||
)}
|
||
{/* Arrow */}
|
||
<div className="absolute top-full left-1/2 -translate-x-1/2 border-8 border-transparent border-t-white" />
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</span>
|
||
);
|
||
}
|