394 lines
11 KiB
TypeScript
394 lines
11 KiB
TypeScript
import { IranianBank } from "~/utils/iranian-banks";
|
||
|
||
interface BankLogoProps {
|
||
bank: IranianBank;
|
||
size?: number;
|
||
className?: string;
|
||
}
|
||
|
||
export function BankLogo({ bank, size = 24, className = "" }: BankLogoProps) {
|
||
// Map of bank names to their logo image paths
|
||
const bankLogoPath: Record<string, string> = {
|
||
"ملی ایران": "/images/banks/melli.png",
|
||
ملت: "/images/banks/mellat.png",
|
||
سپه: "/images/banks/sepah.png",
|
||
پارسیان: "/images/banks/parsian.png",
|
||
پاسارگاد: "/images/banks/pasargad.png",
|
||
تجارت: "/images/banks/tejarat.png",
|
||
سامان: "/images/banks/saman.png",
|
||
کشاورزی: "/images/banks/keshavarzi.png",
|
||
"صادرات ایران": "/images/banks/saderat.png",
|
||
"رفاه کارگران": "/images/banks/refah.png",
|
||
"اقتصاد نوین": "/images/banks/eghtesad-novin.png",
|
||
"توسعه صادرات ایران": "/images/banks/edbi.png",
|
||
انصار: "/images/banks/ansar.png",
|
||
"ایران زمین": "/images/banks/iran-zamin.png",
|
||
شهر: "/images/banks/shahr.png",
|
||
"توسعه تعاون": "/images/banks/tosee-taavon.png",
|
||
کارآفرین: "/images/banks/karafarin.png",
|
||
دی: "/images/banks/dey.png",
|
||
گردشگری: "/images/banks/gardeshgari.png",
|
||
آینده: "/images/banks/ayandeh.png",
|
||
"موسسه اعتباری کوثر": "/images/banks/kosar.png",
|
||
"قرض الحسنه مهر ایران": "/images/banks/mehr-iran.png",
|
||
سرمایه: "/images/banks/sarmayeh.png",
|
||
سینا: "/images/banks/sina.png",
|
||
"صنعت و معدن": "/images/banks/sanat-madan.png",
|
||
قوامین: "/images/banks/ghavamin.png",
|
||
"پست ایران": "/images/banks/post-bank.png",
|
||
مسکن: "/images/banks/maskan.png",
|
||
"موسسه اعتباری توسعه": "/images/banks/tosee.png",
|
||
مرکزی: "/images/banks/markazi.png",
|
||
"حکمت ایرانیان": "/images/banks/hekmat.png",
|
||
"مهر اقتصاد": "/images/banks/mehr-eghtesad.png",
|
||
};
|
||
|
||
// Check if we have a logo image for this bank
|
||
const logoPath = bankLogoPath[bank.name];
|
||
|
||
if (logoPath) {
|
||
return (
|
||
<img
|
||
src={logoPath}
|
||
alt={`لوگوی بانک ${bank.name}`}
|
||
width={size}
|
||
height={size}
|
||
className={`rounded ${className}`}
|
||
onError={(e) => {
|
||
// If image fails to load, hide it and show fallback
|
||
e.currentTarget.style.display = "none";
|
||
const fallback = e.currentTarget.nextElementSibling as HTMLElement;
|
||
if (fallback) fallback.style.display = "block";
|
||
}}
|
||
/>
|
||
);
|
||
}
|
||
|
||
// Fallback: Use old SVG icons as backup
|
||
const bankIcons: Record<string, JSX.Element> = {
|
||
"ملی ایران": (
|
||
<svg
|
||
width={size}
|
||
height={size}
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
className={className}
|
||
>
|
||
<rect width="24" height="24" rx="4" fill="url(#melli-gradient)" />
|
||
<path
|
||
d="M12 6L6 10V18H10V14H14V18H18V10L12 6Z"
|
||
fill="white"
|
||
opacity="0.9"
|
||
/>
|
||
<defs>
|
||
<linearGradient
|
||
id="melli-gradient"
|
||
x1="0"
|
||
y1="0"
|
||
x2="24"
|
||
y2="24"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stopColor="#1e3a8a" />
|
||
<stop offset="1" stopColor="#60a5fa" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
),
|
||
ملت: (
|
||
<svg
|
||
width={size}
|
||
height={size}
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
className={className}
|
||
>
|
||
<rect width="24" height="24" rx="4" fill="url(#mellat-gradient)" />
|
||
<circle cx="12" cy="12" r="6" fill="white" opacity="0.9" />
|
||
<path d="M12 8L14 12L12 16L10 12L12 8Z" fill="url(#mellat-gradient)" />
|
||
<defs>
|
||
<linearGradient
|
||
id="mellat-gradient"
|
||
x1="0"
|
||
y1="0"
|
||
x2="24"
|
||
y2="24"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stopColor="#b91c1c" />
|
||
<stop offset="1" stopColor="#f87171" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
),
|
||
سپه: (
|
||
<svg
|
||
width={size}
|
||
height={size}
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
className={className}
|
||
>
|
||
<rect width="24" height="24" rx="4" fill="url(#sepah-gradient)" />
|
||
<path
|
||
d="M8 6H16V10H8V6Z M6 11H18V15H6V11Z M9 16H15V20H9V16Z"
|
||
fill="white"
|
||
opacity="0.9"
|
||
/>
|
||
<defs>
|
||
<linearGradient
|
||
id="sepah-gradient"
|
||
x1="0"
|
||
y1="0"
|
||
x2="24"
|
||
y2="24"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stopColor="#1e40af" />
|
||
<stop offset="1" stopColor="#3b82f6" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
),
|
||
پارسیان: (
|
||
<svg
|
||
width={size}
|
||
height={size}
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
className={className}
|
||
>
|
||
<rect width="24" height="24" rx="4" fill="url(#parsian-gradient)" />
|
||
<path
|
||
d="M12 5L17 9V19H7V9L12 5Z M10 12H14V16H10V12Z"
|
||
fill="white"
|
||
opacity="0.9"
|
||
/>
|
||
<defs>
|
||
<linearGradient
|
||
id="parsian-gradient"
|
||
x1="0"
|
||
y1="0"
|
||
x2="24"
|
||
y2="24"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stopColor="#1e40af" />
|
||
<stop offset="1" stopColor="#60a5fa" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
),
|
||
پاسارگاد: (
|
||
<svg
|
||
width={size}
|
||
height={size}
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
className={className}
|
||
>
|
||
<rect width="24" height="24" rx="4" fill="url(#pasargad-gradient)" />
|
||
<path
|
||
d="M12 4L6 8L12 12L18 8L12 4Z M6 10L12 14L18 10V16L12 20L6 16V10Z"
|
||
fill="white"
|
||
opacity="0.9"
|
||
/>
|
||
<defs>
|
||
<linearGradient
|
||
id="pasargad-gradient"
|
||
x1="0"
|
||
y1="0"
|
||
x2="24"
|
||
y2="24"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stopColor="#4c1d95" />
|
||
<stop offset="1" stopColor="#8b5cf6" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
),
|
||
تجارت: (
|
||
<svg
|
||
width={size}
|
||
height={size}
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
className={className}
|
||
>
|
||
<rect width="24" height="24" rx="4" fill="url(#tejarat-gradient)" />
|
||
<path
|
||
d="M6 8H18V11H6V8Z M8 12H16V15H8V12Z M10 16H14V19H10V16Z"
|
||
fill="white"
|
||
opacity="0.9"
|
||
/>
|
||
<defs>
|
||
<linearGradient
|
||
id="tejarat-gradient"
|
||
x1="0"
|
||
y1="0"
|
||
x2="24"
|
||
y2="24"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stopColor="#15803d" />
|
||
<stop offset="1" stopColor="#22c55e" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
),
|
||
سامان: (
|
||
<svg
|
||
width={size}
|
||
height={size}
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
className={className}
|
||
>
|
||
<rect width="24" height="24" rx="4" fill="url(#saman-gradient)" />
|
||
<circle cx="12" cy="9" r="3" fill="white" opacity="0.9" />
|
||
<path
|
||
d="M7 16C7 13.5 9 12 12 12C15 12 17 13.5 17 16V19H7V16Z"
|
||
fill="white"
|
||
opacity="0.9"
|
||
/>
|
||
<defs>
|
||
<linearGradient
|
||
id="saman-gradient"
|
||
x1="0"
|
||
y1="0"
|
||
x2="24"
|
||
y2="24"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stopColor="#1e40af" />
|
||
<stop offset="1" stopColor="#3b82f6" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
),
|
||
کشاورزی: (
|
||
<svg
|
||
width={size}
|
||
height={size}
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
className={className}
|
||
>
|
||
<rect width="24" height="24" rx="4" fill="url(#keshavarzi-gradient)" />
|
||
<path
|
||
d="M12 4C9 4 7 6 7 9C7 11 8 12 9 13L12 19L15 13C16 12 17 11 17 9C17 6 15 4 12 4Z"
|
||
fill="white"
|
||
opacity="0.9"
|
||
/>
|
||
<circle cx="12" cy="9" r="2" fill="url(#keshavarzi-gradient)" />
|
||
<defs>
|
||
<linearGradient
|
||
id="keshavarzi-gradient"
|
||
x1="0"
|
||
y1="0"
|
||
x2="24"
|
||
y2="24"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stopColor="#15803d" />
|
||
<stop offset="1" stopColor="#4ade80" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
),
|
||
"صادرات ایران": (
|
||
<svg
|
||
width={size}
|
||
height={size}
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
className={className}
|
||
>
|
||
<rect width="24" height="24" rx="4" fill="url(#saderat-gradient)" />
|
||
<path
|
||
d="M4 12L12 4L20 12L12 20L4 12Z M12 8L8 12L12 16L16 12L12 8Z"
|
||
fill="white"
|
||
opacity="0.9"
|
||
/>
|
||
<defs>
|
||
<linearGradient
|
||
id="saderat-gradient"
|
||
x1="0"
|
||
y1="0"
|
||
x2="24"
|
||
y2="24"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stopColor="#065f46" />
|
||
<stop offset="1" stopColor="#34d399" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
),
|
||
"رفاه کارگران": (
|
||
<svg
|
||
width={size}
|
||
height={size}
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
className={className}
|
||
>
|
||
<rect width="24" height="24" rx="4" fill="url(#refah-gradient)" />
|
||
<path d="M12 6L8 10H11V18H13V10H16L12 6Z" fill="white" opacity="0.9" />
|
||
<defs>
|
||
<linearGradient
|
||
id="refah-gradient"
|
||
x1="0"
|
||
y1="0"
|
||
x2="24"
|
||
y2="24"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stopColor="#9f1239" />
|
||
<stop offset="1" stopColor="#fb7185" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
),
|
||
};
|
||
|
||
// Get specific icon or use a generic one
|
||
const icon = bankIcons[bank.name] || (
|
||
<svg
|
||
width={size}
|
||
height={size}
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
className={className}
|
||
>
|
||
<rect
|
||
width="24"
|
||
height="24"
|
||
rx="4"
|
||
fill={`url(#generic-gradient-${bank.name})`}
|
||
/>
|
||
<path
|
||
d="M12 4L4 8V10H20V8L12 4Z M5 11H7V19H5V11Z M9 11H11V19H9V11Z M13 11H15V19H13V11Z M17 11H19V19H17V11Z M4 20H20V22H4V20Z"
|
||
fill="white"
|
||
opacity="0.9"
|
||
/>
|
||
<defs>
|
||
<linearGradient
|
||
id={`generic-gradient-${bank.name}`}
|
||
x1="0"
|
||
y1="0"
|
||
x2="24"
|
||
y2="24"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stopColor={bank.color.from} />
|
||
<stop offset="1" stopColor={bank.color.to} />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
);
|
||
|
||
return icon;
|
||
}
|