101 lines
2.6 KiB
TypeScript
101 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
|
|
interface CaStADLogoProps {
|
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
showText?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const sizeClasses = {
|
|
sm: { icon: 'w-8 h-8', text: 'text-lg' },
|
|
md: { icon: 'w-12 h-12', text: 'text-xl' },
|
|
lg: { icon: 'w-16 h-16', text: 'text-2xl' },
|
|
xl: { icon: 'w-24 h-24', text: 'text-4xl' },
|
|
};
|
|
|
|
// Main CaStAD Logo with custard pudding icon
|
|
export const CaStADLogo: React.FC<CaStADLogoProps> = ({
|
|
size = 'md',
|
|
showText = true,
|
|
className
|
|
}) => {
|
|
const { icon, text } = sizeClasses[size];
|
|
|
|
return (
|
|
<div className={`flex items-center gap-2 ${className || ''}`}>
|
|
{/* Custard Pudding SVG Icon */}
|
|
<div className={`${icon} relative`}>
|
|
<img
|
|
src="/images/castad-logo.svg"
|
|
alt="CaStAD"
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
{showText && (
|
|
<div className="flex flex-col">
|
|
<span className={`${text} font-bold bg-gradient-to-r from-amber-600 via-amber-500 to-yellow-600 bg-clip-text text-transparent`}>
|
|
CaStAD
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground tracking-wide">
|
|
카스타드
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Inline version with custard cream colors
|
|
export const CaStADLogoInline: React.FC<CaStADLogoProps> = ({
|
|
size = 'md',
|
|
className
|
|
}) => {
|
|
const { icon, text } = sizeClasses[size];
|
|
|
|
return (
|
|
<div className={`flex items-center gap-2 ${className || ''}`}>
|
|
{/* Custard emoji as simple icon */}
|
|
<span className={`${icon} flex items-center justify-center`}>
|
|
<span className="text-2xl">🍮</span>
|
|
</span>
|
|
<span className={`${text} font-bold bg-gradient-to-r from-amber-600 via-amber-500 to-yellow-600 bg-clip-text text-transparent`}>
|
|
CaStAD
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Icon only version
|
|
export const CaStADIcon: React.FC<{ size?: 'sm' | 'md' | 'lg' | 'xl'; className?: string }> = ({
|
|
size = 'md',
|
|
className
|
|
}) => {
|
|
const { icon } = sizeClasses[size];
|
|
|
|
return (
|
|
<div className={`${icon} ${className || ''}`}>
|
|
<img
|
|
src="/images/castad-logo.svg"
|
|
alt="CaStAD"
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Text only gradient version
|
|
export const CaStADText: React.FC<{ size?: 'sm' | 'md' | 'lg' | 'xl'; className?: string }> = ({
|
|
size = 'md',
|
|
className
|
|
}) => {
|
|
const { text } = sizeClasses[size];
|
|
|
|
return (
|
|
<span className={`${text} font-bold bg-gradient-to-r from-amber-600 via-amber-500 to-yellow-600 bg-clip-text text-transparent ${className || ''}`}>
|
|
CaStAD
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export default CaStADLogo;
|