Complete personal finance management application with: - Dashboard with financial metrics and alerts - Credit card management and payments - Fixed and variable debt tracking - Monthly budget planning - Intelligent alert system - Responsive design with Tailwind CSS Tech stack: Next.js 14, TypeScript, Zustand, Recharts 🤖 Generated with [Claude Code](https://claude.com/claude-code)
37 lines
720 B
TypeScript
37 lines
720 B
TypeScript
import { Wallet } from 'lucide-react';
|
|
|
|
interface LogoProps {
|
|
size?: 'sm' | 'md' | 'lg';
|
|
showText?: boolean;
|
|
}
|
|
|
|
const sizeMap = {
|
|
sm: {
|
|
icon: 24,
|
|
text: 'text-lg',
|
|
},
|
|
md: {
|
|
icon: 32,
|
|
text: 'text-xl',
|
|
},
|
|
lg: {
|
|
icon: 40,
|
|
text: 'text-2xl',
|
|
},
|
|
};
|
|
|
|
export function Logo({ size = 'md', showText = true }: LogoProps) {
|
|
const { icon, text } = sizeMap[size];
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex items-center justify-center">
|
|
<Wallet className="text-emerald-500" size={icon} strokeWidth={2} />
|
|
</div>
|
|
{showText && (
|
|
<span className={`font-bold text-slate-100 ${text}`}>Finanzas</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|