John Remillard
a7a8c661b7
Introduces a new `UserSettings` interface and default settings. This allows users to customize voice preferences (name, style, gender) and persona characteristics within the application. This enhances personalization and user experience by tailoring interactions to individual needs and preferences.
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
|
|
import React, { useState } from 'react';
|
|
|
|
interface TooltipProps {
|
|
content: string;
|
|
children: React.ReactNode;
|
|
position?: 'top' | 'bottom' | 'left' | 'right';
|
|
}
|
|
|
|
const Tooltip: React.FC<TooltipProps> = ({ content, children, position = 'top' }) => {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
const positionClasses = {
|
|
top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
|
|
bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
|
|
left: 'right-full top-1/2 -translate-y-1/2 mr-2',
|
|
right: 'left-full top-1/2 -translate-y-1/2 ml-2',
|
|
};
|
|
|
|
const arrowClasses = {
|
|
top: 'top-full left-1/2 -translate-x-1/2 border-t-slate-800',
|
|
bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-slate-800',
|
|
left: 'left-full top-1/2 -translate-y-1/2 border-l-slate-800',
|
|
right: 'right-full top-1/2 -translate-y-1/2 border-r-slate-800',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="relative inline-block group"
|
|
onMouseEnter={() => setIsVisible(true)}
|
|
onMouseLeave={() => setIsVisible(false)}
|
|
onFocus={() => setIsVisible(true)}
|
|
onBlur={() => setIsVisible(false)}
|
|
>
|
|
{children}
|
|
{isVisible && (
|
|
<div className={`absolute z-[100] w-max max-w-xs px-3 py-2 text-[11px] font-medium text-white bg-slate-800 rounded-lg shadow-xl animate-in fade-in zoom-in-95 duration-200 pointer-events-none ${positionClasses[position]}`}>
|
|
{content}
|
|
<div className={`absolute border-4 border-transparent ${arrowClasses[position]}`} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(Tooltip);
|