37 lines
1002 B
TypeScript
37 lines
1002 B
TypeScript
import React from 'react';
|
|
import { Info, Lightbulb, AlertCircle } from 'lucide-react';
|
|
|
|
interface HintProps {
|
|
children: React.ReactNode;
|
|
variant?: 'tip' | 'warning' | 'note';
|
|
}
|
|
|
|
const variantStyles = {
|
|
tip: {
|
|
container: 'bg-blue-50 text-blue-800 border-blue-200',
|
|
icon: <Lightbulb className="w-4 h-4 text-blue-600" />,
|
|
},
|
|
warning: {
|
|
container: 'bg-yellow-50 text-yellow-800 border-yellow-200',
|
|
icon: <AlertCircle className="w-4 h-4 text-yellow-600" />,
|
|
},
|
|
note: {
|
|
container: 'bg-zinc-50 text-zinc-800 border-zinc-200',
|
|
icon: <Info className="w-4 h-4 text-zinc-600" />,
|
|
},
|
|
};
|
|
|
|
export default function Hint({ children, variant = 'note' }: HintProps) {
|
|
const style = variantStyles[variant];
|
|
|
|
return (
|
|
<div className={`flex items-start gap-3 p-3 rounded-md border text-sm ${style.container}`}>
|
|
<div className="mt-0.5 shrink-0">
|
|
{style.icon}
|
|
</div>
|
|
<div className="leading-relaxed">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |