63 lines
2.6 KiB
TypeScript
63 lines
2.6 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { ExternalLink } from 'lucide-react';
|
|
|
|
interface WikiTooltipProps {
|
|
children: ReactNode;
|
|
summary?: string;
|
|
imagePath?: string;
|
|
wikiUrl?: string;
|
|
name: string;
|
|
}
|
|
|
|
export function WikiTooltip({ children, summary, imagePath, wikiUrl, name }: WikiTooltipProps) {
|
|
if (!summary && !imagePath) {
|
|
return <span className="text-gray-900">{children}</span>;
|
|
}
|
|
|
|
return (
|
|
<div className="relative group inline-block">
|
|
<span className="cursor-help underline decoration-dotted decoration-gray-400 underline-offset-4 text-primary-700 font-medium">
|
|
{children}
|
|
</span>
|
|
|
|
<div className="absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-2 w-72 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 ease-out pointer-events-none group-hover:pointer-events-auto origin-bottom transform scale-95 group-hover:scale-100">
|
|
<div className="bg-white rounded-xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)] border border-gray-100 overflow-hidden text-left flex flex-col">
|
|
{imagePath && (
|
|
<div className="w-full h-44 bg-gray-100 overflow-hidden relative border-b border-gray-100">
|
|
<img
|
|
src={imagePath}
|
|
alt={name}
|
|
className="w-full h-full object-cover"
|
|
onError={(e) => {
|
|
(e.target as HTMLImageElement).style.display = 'none';
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="p-4 w-full">
|
|
<h4 className="font-bold text-gray-900 text-base mb-1">{name}</h4>
|
|
{summary && (
|
|
<p className="text-sm text-gray-600 line-clamp-4 leading-relaxed">
|
|
{summary}
|
|
</p>
|
|
)}
|
|
{wikiUrl && (
|
|
<a
|
|
href={wikiUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="mt-3 inline-flex items-center gap-1 text-xs font-semibold text-primary-600 hover:text-primary-800 transition-colors"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
Ver en Wikipedia <ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{/* Triangle arrow */}
|
|
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-[1px] border-8 border-transparent border-t-white z-10"></div>
|
|
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-[0px] border-8 border-transparent border-t-gray-100 -z-10 blur-[1px]"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|