react-bank-logo 0.1.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -19
- package/dist/index.d.mts +4 -11
- package/dist/index.d.ts +4 -11
- package/dist/index.js +25 -49
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +25 -49
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
# react-bank-logo
|
|
2
2
|
|
|
3
|
-
A beautiful, reusable, and optimized React component for displaying
|
|
3
|
+
A beautiful, reusable, and optimized React component for displaying bank & e-wallet logos. Perfect for wedding invitations, donation pages, or payment gateways.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/react-bank-logo)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
7
7
|
|
|
8
8
|
## Features
|
|
9
9
|
|
|
10
|
-
- **
|
|
11
|
-
- **
|
|
10
|
+
- **SVG First**: High-quality vector logos provided by default.
|
|
11
|
+
- **Custom Logo Support**: Easily use your own logos via the `src` prop (supports SVG, PNG, JPG).
|
|
12
12
|
- **Lazy Loading**: Built-in lazy loading for better performance.
|
|
13
13
|
- **TypeScript Ready**: Full type safety for bank names and props.
|
|
14
14
|
- **Customizable**: Easy to style with `className` and `style` props.
|
|
@@ -31,14 +31,14 @@ import { BankLogo } from "react-bank-logo";
|
|
|
31
31
|
function MyComponent() {
|
|
32
32
|
return (
|
|
33
33
|
<div>
|
|
34
|
-
{/* Basic usage using bank name */}
|
|
34
|
+
{/* Basic usage using bank name (renders SVG) */}
|
|
35
35
|
<BankLogo name="bca" width={100} />
|
|
36
36
|
|
|
37
37
|
{/* Using E-Wallet name */}
|
|
38
38
|
<BankLogo name="gopay" width={120} />
|
|
39
39
|
|
|
40
|
-
{/* Custom source
|
|
41
|
-
<BankLogo
|
|
40
|
+
{/* Custom source (supports PNG/JPG) */}
|
|
41
|
+
<BankLogo src="/my-custom-logo.png" />
|
|
42
42
|
</div>
|
|
43
43
|
);
|
|
44
44
|
}
|
|
@@ -48,22 +48,21 @@ function MyComponent() {
|
|
|
48
48
|
|
|
49
49
|
### `BankLogo` Props
|
|
50
50
|
|
|
51
|
-
| Prop | Type | Default
|
|
52
|
-
| :---------- | :------------------ |
|
|
53
|
-
| `name` | `BankName` | -
|
|
54
|
-
| `src` | `string` | -
|
|
55
|
-
| `width` | `number` | `120`
|
|
56
|
-
| `height` | `number` | `auto`
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `loading` | `'lazy' \| 'eager'` | `'lazy'` | Image loading strategy. |
|
|
51
|
+
| Prop | Type | Default | Description |
|
|
52
|
+
| :---------- | :------------------ | :--------------- | :---------------------------------------------------------- |
|
|
53
|
+
| `name` | `BankName` | - | The key of the bank (e.g., 'bca', 'mandiri', 'gopay'). |
|
|
54
|
+
| `src` | `string` | - | Custom image source. Overrides the `name` prop if provided. |
|
|
55
|
+
| `width` | `number` | `120` | Width of the logo in pixels. |
|
|
56
|
+
| `height` | `number` | `auto` | Height of the logo in pixels. |
|
|
57
|
+
| `className` | `string` | `""` | Additional CSS classes for the container/image. |
|
|
58
|
+
| `style` | `CSSProperties` | `{}` | Inline styles for the image. |
|
|
59
|
+
| `alt` | `string` | `Bank Name` | Alt text for the image. |
|
|
60
|
+
| `fallback` | `ReactNode` | `Bank Name Text` | Content to show if the logo fails to load. |
|
|
61
|
+
| `loading` | `'lazy' \| 'eager'` | `'lazy'` | Image loading strategy. |
|
|
63
62
|
|
|
64
63
|
## Supported Banks & E-Wallets
|
|
65
64
|
|
|
66
|
-
Below are some of the supported keys for the `name` prop:
|
|
65
|
+
Below are some of the supported keys for the `name` prop (including regional and international banks):
|
|
67
66
|
|
|
68
67
|
- **Banks**: `bca`, `mandiri`, `bni`, `bri`, `cimb`, `permata`, `danamon`, `maybank`, `ocbc`, `hsbc`, `citibank`, `standard-chartered`, `panin`, `btn`, `mega`, `mega-syariah`, `seabank`.
|
|
69
68
|
- **E-Wallets**: `gopay`, `ovo`, `dana`, `shopeepay`, `linkaja`.
|
package/dist/index.d.mts
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import React$1 from 'react';
|
|
2
2
|
|
|
3
3
|
type BankName = "bca" | "mandiri" | "bni" | "bri" | "cimb" | "permata" | "danamon" | "maybank" | "ocbc" | "hsbc" | "citibank" | "standard-chartered" | "panin" | "btn" | "mega" | "mega-syariah" | "seabank" | "gopay" | "ovo" | "dana" | "shopeepay" | "linkaja";
|
|
4
|
-
type LogoFormat = "svg" | "png";
|
|
5
4
|
interface BankLogoData {
|
|
6
5
|
name: BankName;
|
|
7
6
|
displayName: string;
|
|
8
7
|
svg?: string;
|
|
9
|
-
png?: string;
|
|
10
|
-
defaultFormat: LogoFormat;
|
|
11
8
|
}
|
|
12
9
|
interface BankLogoProps {
|
|
13
10
|
/**
|
|
@@ -15,7 +12,7 @@ interface BankLogoProps {
|
|
|
15
12
|
*/
|
|
16
13
|
name?: BankName;
|
|
17
14
|
/**
|
|
18
|
-
* Custom logo source (overrides name)
|
|
15
|
+
* Custom logo source (overrides name). Supports SVG, PNG, JPG.
|
|
19
16
|
*/
|
|
20
17
|
src?: string;
|
|
21
18
|
/**
|
|
@@ -26,10 +23,6 @@ interface BankLogoProps {
|
|
|
26
23
|
* Height in pixels (auto-calculated if not provided)
|
|
27
24
|
*/
|
|
28
25
|
height?: number;
|
|
29
|
-
/**
|
|
30
|
-
* Preferred format (defaults to registry default)
|
|
31
|
-
*/
|
|
32
|
-
format?: LogoFormat;
|
|
33
26
|
/**
|
|
34
27
|
* Additional CSS class
|
|
35
28
|
*/
|
|
@@ -81,12 +74,12 @@ declare function getBankLogo(name: BankName): BankLogoData | undefined;
|
|
|
81
74
|
declare function getAvailableBanks(): BankName[];
|
|
82
75
|
|
|
83
76
|
/**
|
|
84
|
-
* Resolve the correct logo path based on bank name
|
|
77
|
+
* Resolve the correct logo path based on bank name
|
|
85
78
|
*/
|
|
86
|
-
declare function resolveLogoPath(name: BankName
|
|
79
|
+
declare function resolveLogoPath(name: BankName): string | undefined;
|
|
87
80
|
/**
|
|
88
81
|
* Get display name for a bank
|
|
89
82
|
*/
|
|
90
83
|
declare function getBankDisplayName(name: BankName): string;
|
|
91
84
|
|
|
92
|
-
export { BANK_LOGO_REGISTRY, BankLogo, type BankLogoData, type BankLogoProps, type BankName,
|
|
85
|
+
export { BANK_LOGO_REGISTRY, BankLogo, type BankLogoData, type BankLogoProps, type BankName, getAvailableBanks, getBankDisplayName, getBankLogo, resolveLogoPath };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import React$1 from 'react';
|
|
2
2
|
|
|
3
3
|
type BankName = "bca" | "mandiri" | "bni" | "bri" | "cimb" | "permata" | "danamon" | "maybank" | "ocbc" | "hsbc" | "citibank" | "standard-chartered" | "panin" | "btn" | "mega" | "mega-syariah" | "seabank" | "gopay" | "ovo" | "dana" | "shopeepay" | "linkaja";
|
|
4
|
-
type LogoFormat = "svg" | "png";
|
|
5
4
|
interface BankLogoData {
|
|
6
5
|
name: BankName;
|
|
7
6
|
displayName: string;
|
|
8
7
|
svg?: string;
|
|
9
|
-
png?: string;
|
|
10
|
-
defaultFormat: LogoFormat;
|
|
11
8
|
}
|
|
12
9
|
interface BankLogoProps {
|
|
13
10
|
/**
|
|
@@ -15,7 +12,7 @@ interface BankLogoProps {
|
|
|
15
12
|
*/
|
|
16
13
|
name?: BankName;
|
|
17
14
|
/**
|
|
18
|
-
* Custom logo source (overrides name)
|
|
15
|
+
* Custom logo source (overrides name). Supports SVG, PNG, JPG.
|
|
19
16
|
*/
|
|
20
17
|
src?: string;
|
|
21
18
|
/**
|
|
@@ -26,10 +23,6 @@ interface BankLogoProps {
|
|
|
26
23
|
* Height in pixels (auto-calculated if not provided)
|
|
27
24
|
*/
|
|
28
25
|
height?: number;
|
|
29
|
-
/**
|
|
30
|
-
* Preferred format (defaults to registry default)
|
|
31
|
-
*/
|
|
32
|
-
format?: LogoFormat;
|
|
33
26
|
/**
|
|
34
27
|
* Additional CSS class
|
|
35
28
|
*/
|
|
@@ -81,12 +74,12 @@ declare function getBankLogo(name: BankName): BankLogoData | undefined;
|
|
|
81
74
|
declare function getAvailableBanks(): BankName[];
|
|
82
75
|
|
|
83
76
|
/**
|
|
84
|
-
* Resolve the correct logo path based on bank name
|
|
77
|
+
* Resolve the correct logo path based on bank name
|
|
85
78
|
*/
|
|
86
|
-
declare function resolveLogoPath(name: BankName
|
|
79
|
+
declare function resolveLogoPath(name: BankName): string | undefined;
|
|
87
80
|
/**
|
|
88
81
|
* Get display name for a bank
|
|
89
82
|
*/
|
|
90
83
|
declare function getBankDisplayName(name: BankName): string;
|
|
91
84
|
|
|
92
|
-
export { BANK_LOGO_REGISTRY, BankLogo, type BankLogoData, type BankLogoProps, type BankName,
|
|
85
|
+
export { BANK_LOGO_REGISTRY, BankLogo, type BankLogoData, type BankLogoProps, type BankName, getAvailableBanks, getBankDisplayName, getBankLogo, resolveLogoPath };
|
package/dist/index.js
CHANGED
|
@@ -73,134 +73,112 @@ var BANK_LOGO_REGISTRY = {
|
|
|
73
73
|
bca: {
|
|
74
74
|
name: "bca",
|
|
75
75
|
displayName: "BCA",
|
|
76
|
-
svg: bca_default
|
|
77
|
-
defaultFormat: "svg"
|
|
76
|
+
svg: bca_default
|
|
78
77
|
},
|
|
79
78
|
mandiri: {
|
|
80
79
|
name: "mandiri",
|
|
81
80
|
displayName: "Bank Mandiri",
|
|
82
|
-
svg: mandiri_default
|
|
83
|
-
defaultFormat: "svg"
|
|
81
|
+
svg: mandiri_default
|
|
84
82
|
},
|
|
85
83
|
bni: {
|
|
86
84
|
name: "bni",
|
|
87
85
|
displayName: "BNI",
|
|
88
|
-
svg: bni_default
|
|
89
|
-
defaultFormat: "svg"
|
|
86
|
+
svg: bni_default
|
|
90
87
|
},
|
|
91
88
|
bri: {
|
|
92
89
|
name: "bri",
|
|
93
90
|
displayName: "BRI",
|
|
94
|
-
svg: bri_default
|
|
95
|
-
defaultFormat: "svg"
|
|
91
|
+
svg: bri_default
|
|
96
92
|
},
|
|
97
93
|
cimb: {
|
|
98
94
|
name: "cimb",
|
|
99
95
|
displayName: "CIMB Niaga",
|
|
100
|
-
svg: cimb_default
|
|
101
|
-
defaultFormat: "svg"
|
|
96
|
+
svg: cimb_default
|
|
102
97
|
},
|
|
103
98
|
permata: {
|
|
104
99
|
name: "permata",
|
|
105
100
|
displayName: "Bank Permata",
|
|
106
|
-
svg: permata_default
|
|
107
|
-
defaultFormat: "svg"
|
|
101
|
+
svg: permata_default
|
|
108
102
|
},
|
|
109
103
|
danamon: {
|
|
110
104
|
name: "danamon",
|
|
111
105
|
displayName: "Bank Danamon",
|
|
112
|
-
svg: danamon_default
|
|
113
|
-
defaultFormat: "svg"
|
|
106
|
+
svg: danamon_default
|
|
114
107
|
},
|
|
115
108
|
maybank: {
|
|
116
109
|
name: "maybank",
|
|
117
110
|
displayName: "Maybank",
|
|
118
|
-
svg: maybank_default
|
|
119
|
-
defaultFormat: "svg"
|
|
111
|
+
svg: maybank_default
|
|
120
112
|
},
|
|
121
113
|
ocbc: {
|
|
122
114
|
name: "ocbc",
|
|
123
115
|
displayName: "OCBC NISP",
|
|
124
|
-
svg: ocbc_default
|
|
125
|
-
defaultFormat: "svg"
|
|
116
|
+
svg: ocbc_default
|
|
126
117
|
},
|
|
127
118
|
hsbc: {
|
|
128
119
|
name: "hsbc",
|
|
129
120
|
displayName: "HSBC",
|
|
130
|
-
svg: hsbc_default
|
|
131
|
-
defaultFormat: "svg"
|
|
121
|
+
svg: hsbc_default
|
|
132
122
|
},
|
|
133
123
|
citibank: {
|
|
134
124
|
name: "citibank",
|
|
135
125
|
displayName: "Citibank",
|
|
136
|
-
svg: citibank_default
|
|
137
|
-
defaultFormat: "svg"
|
|
126
|
+
svg: citibank_default
|
|
138
127
|
},
|
|
139
128
|
"standard-chartered": {
|
|
140
129
|
name: "standard-chartered",
|
|
141
130
|
displayName: "Standard Chartered",
|
|
142
|
-
svg: standard_chartered_default
|
|
143
|
-
defaultFormat: "svg"
|
|
131
|
+
svg: standard_chartered_default
|
|
144
132
|
},
|
|
145
133
|
panin: {
|
|
146
134
|
name: "panin",
|
|
147
135
|
displayName: "Bank Panin",
|
|
148
|
-
svg: panin_default
|
|
149
|
-
defaultFormat: "svg"
|
|
136
|
+
svg: panin_default
|
|
150
137
|
},
|
|
151
138
|
btn: {
|
|
152
139
|
name: "btn",
|
|
153
140
|
displayName: "BTN",
|
|
154
|
-
svg: btn_default
|
|
155
|
-
defaultFormat: "svg"
|
|
141
|
+
svg: btn_default
|
|
156
142
|
},
|
|
157
143
|
mega: {
|
|
158
144
|
name: "mega",
|
|
159
145
|
displayName: "Bank Mega",
|
|
160
|
-
svg: mega_default
|
|
161
|
-
defaultFormat: "svg"
|
|
146
|
+
svg: mega_default
|
|
162
147
|
},
|
|
163
148
|
"mega-syariah": {
|
|
164
149
|
name: "mega-syariah",
|
|
165
150
|
displayName: "Bank Mega Syariah",
|
|
166
|
-
svg: mega_syariah_default
|
|
167
|
-
defaultFormat: "svg"
|
|
151
|
+
svg: mega_syariah_default
|
|
168
152
|
},
|
|
169
153
|
seabank: {
|
|
170
154
|
name: "seabank",
|
|
171
155
|
displayName: "Bank Seabank",
|
|
172
|
-
svg: seabank_default
|
|
173
|
-
defaultFormat: "svg"
|
|
156
|
+
svg: seabank_default
|
|
174
157
|
},
|
|
175
158
|
gopay: {
|
|
176
159
|
name: "gopay",
|
|
177
160
|
displayName: "GoPay",
|
|
178
|
-
svg: gopay_default
|
|
179
|
-
defaultFormat: "svg"
|
|
161
|
+
svg: gopay_default
|
|
180
162
|
},
|
|
181
163
|
ovo: {
|
|
182
164
|
name: "ovo",
|
|
183
165
|
displayName: "OVO",
|
|
184
|
-
svg: ovo_default
|
|
185
|
-
defaultFormat: "svg"
|
|
166
|
+
svg: ovo_default
|
|
186
167
|
},
|
|
187
168
|
dana: {
|
|
188
169
|
name: "dana",
|
|
189
170
|
displayName: "DANA",
|
|
190
|
-
svg: dana_default
|
|
191
|
-
defaultFormat: "svg"
|
|
171
|
+
svg: dana_default
|
|
192
172
|
},
|
|
193
173
|
shopeepay: {
|
|
194
174
|
name: "shopeepay",
|
|
195
175
|
displayName: "ShopeePay",
|
|
196
|
-
svg: shopeepay_default
|
|
197
|
-
defaultFormat: "svg"
|
|
176
|
+
svg: shopeepay_default
|
|
198
177
|
},
|
|
199
178
|
linkaja: {
|
|
200
179
|
name: "linkaja",
|
|
201
180
|
displayName: "LinkAja",
|
|
202
|
-
svg: linkaja_default
|
|
203
|
-
defaultFormat: "svg"
|
|
181
|
+
svg: linkaja_default
|
|
204
182
|
}
|
|
205
183
|
};
|
|
206
184
|
function getBankLogo(name) {
|
|
@@ -211,11 +189,10 @@ function getAvailableBanks() {
|
|
|
211
189
|
}
|
|
212
190
|
|
|
213
191
|
// src/utils/logoResolver.ts
|
|
214
|
-
function resolveLogoPath(name
|
|
192
|
+
function resolveLogoPath(name) {
|
|
215
193
|
const logoData = getBankLogo(name);
|
|
216
194
|
if (!logoData) return void 0;
|
|
217
|
-
|
|
218
|
-
return selectedFormat === "svg" ? logoData.svg : logoData.png;
|
|
195
|
+
return logoData.svg;
|
|
219
196
|
}
|
|
220
197
|
function getBankDisplayName(name) {
|
|
221
198
|
const logoData = getBankLogo(name);
|
|
@@ -226,14 +203,13 @@ var BankLogo = ({
|
|
|
226
203
|
src,
|
|
227
204
|
width = 120,
|
|
228
205
|
height,
|
|
229
|
-
format,
|
|
230
206
|
className = "",
|
|
231
207
|
style = {},
|
|
232
208
|
alt,
|
|
233
209
|
fallback,
|
|
234
210
|
loading = "lazy"
|
|
235
211
|
}) => {
|
|
236
|
-
const logoSrc = src || (name ? resolveLogoPath(name
|
|
212
|
+
const logoSrc = src || (name ? resolveLogoPath(name) : void 0);
|
|
237
213
|
const displayName = name ? getBankDisplayName(name) : "Bank Logo";
|
|
238
214
|
const altText = alt || displayName;
|
|
239
215
|
if (!logoSrc) {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/registry/bankLogoMap.ts","../src/utils/logoResolver.ts","../src/components/BankLogo.tsx"],"names":["jsx"],"mappings":"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","file":"index.js","sourcesContent":["import bcaSvg from \"../assets/banks/bca.svg\";\r\nimport bniSvg from \"../assets/banks/bni.svg\";\r\nimport briSvg from \"../assets/banks/bri.svg\";\r\nimport btnSvg from \"../assets/banks/btn.svg\";\r\nimport cimbSvg from \"../assets/banks/cimb.svg\";\r\nimport citibankSvg from \"../assets/banks/citibank.svg\";\r\nimport danaSvg from \"../assets/banks/dana.svg\";\r\nimport danamonSvg from \"../assets/banks/danamon.svg\";\r\nimport gopaySvg from \"../assets/banks/gopay.svg\";\r\nimport hsbcSvg from \"../assets/banks/hsbc.svg\";\r\nimport linkajaSvg from \"../assets/banks/linkaja.svg\";\r\nimport mandiriSvg from \"../assets/banks/mandiri.svg\";\r\nimport maybankSvg from \"../assets/banks/maybank.svg\";\r\nimport megaSyariahSvg from \"../assets/banks/mega-syariah.svg\";\r\nimport megaSvg from \"../assets/banks/mega.svg\";\r\nimport ocbcSvg from \"../assets/banks/ocbc.svg\";\r\nimport ovoSvg from \"../assets/banks/ovo.svg\";\r\nimport paninSvg from \"../assets/banks/panin.svg\";\r\nimport permataSvg from \"../assets/banks/permata.svg\";\r\nimport seabankSvg from \"../assets/banks/seabank.svg\";\r\nimport shopeepaySvg from \"../assets/banks/shopeepay.svg\";\r\nimport standardCharteredSvg from \"../assets/banks/standard-chartered.svg\";\r\nimport { BankLogoData, BankName } from \"../types\";\r\n\r\n/**\r\n * Central registry of all bank logos\r\n * Add new banks here - logo files should match the key names\r\n */\r\nexport const BANK_LOGO_REGISTRY: Record<BankName, BankLogoData> = {\r\n bca: {\r\n name: \"bca\",\r\n displayName: \"BCA\",\r\n svg: bcaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n mandiri: {\r\n name: \"mandiri\",\r\n displayName: \"Bank Mandiri\",\r\n svg: mandiriSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n bni: {\r\n name: \"bni\",\r\n displayName: \"BNI\",\r\n svg: bniSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n bri: {\r\n name: \"bri\",\r\n displayName: \"BRI\",\r\n svg: briSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n cimb: {\r\n name: \"cimb\",\r\n displayName: \"CIMB Niaga\",\r\n svg: cimbSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n permata: {\r\n name: \"permata\",\r\n displayName: \"Bank Permata\",\r\n svg: permataSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n danamon: {\r\n name: \"danamon\",\r\n displayName: \"Bank Danamon\",\r\n svg: danamonSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n maybank: {\r\n name: \"maybank\",\r\n displayName: \"Maybank\",\r\n svg: maybankSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n ocbc: {\r\n name: \"ocbc\",\r\n displayName: \"OCBC NISP\",\r\n svg: ocbcSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n hsbc: {\r\n name: \"hsbc\",\r\n displayName: \"HSBC\",\r\n svg: hsbcSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n citibank: {\r\n name: \"citibank\",\r\n displayName: \"Citibank\",\r\n svg: citibankSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n \"standard-chartered\": {\r\n name: \"standard-chartered\",\r\n displayName: \"Standard Chartered\",\r\n svg: standardCharteredSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n panin: {\r\n name: \"panin\",\r\n displayName: \"Bank Panin\",\r\n svg: paninSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n btn: {\r\n name: \"btn\",\r\n displayName: \"BTN\",\r\n svg: btnSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n mega: {\r\n name: \"mega\",\r\n displayName: \"Bank Mega\",\r\n svg: megaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n \"mega-syariah\": {\r\n name: \"mega-syariah\",\r\n displayName: \"Bank Mega Syariah\",\r\n svg: megaSyariahSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n seabank: {\r\n name: \"seabank\",\r\n displayName: \"Bank Seabank\",\r\n svg: seabankSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n gopay: {\r\n name: \"gopay\",\r\n displayName: \"GoPay\",\r\n svg: gopaySvg,\r\n defaultFormat: \"svg\",\r\n },\r\n ovo: {\r\n name: \"ovo\",\r\n displayName: \"OVO\",\r\n svg: ovoSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n dana: {\r\n name: \"dana\",\r\n displayName: \"DANA\",\r\n svg: danaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n shopeepay: {\r\n name: \"shopeepay\",\r\n displayName: \"ShopeePay\",\r\n svg: shopeepaySvg,\r\n defaultFormat: \"svg\",\r\n },\r\n linkaja: {\r\n name: \"linkaja\",\r\n displayName: \"LinkAja\",\r\n svg: linkajaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n};\r\n\r\n/**\r\n * Get logo data by bank name\r\n */\r\nexport function getBankLogo(name: BankName): BankLogoData | undefined {\r\n return BANK_LOGO_REGISTRY[name];\r\n}\r\n\r\n/**\r\n * Get all available bank names\r\n */\r\nexport function getAvailableBanks(): BankName[] {\r\n return Object.keys(BANK_LOGO_REGISTRY) as BankName[];\r\n}\r\n","import { getBankLogo } from \"../registry/bankLogoMap\";\r\nimport { BankName, LogoFormat } from \"../types\";\r\n\r\n/**\r\n * Resolve the correct logo path based on bank name and format\r\n */\r\nexport function resolveLogoPath(\r\n name: BankName,\r\n format?: LogoFormat,\r\n): string | undefined {\r\n const logoData = getBankLogo(name);\r\n if (!logoData) return undefined;\r\n\r\n const selectedFormat = format || logoData.defaultFormat;\r\n return selectedFormat === \"svg\" ? logoData.svg : logoData.png;\r\n}\r\n\r\n/**\r\n * Get display name for a bank\r\n */\r\nexport function getBankDisplayName(name: BankName): string {\r\n const logoData = getBankLogo(name);\r\n return logoData?.displayName || name;\r\n}\r\n","import React from \"react\";\r\nimport { BankLogoProps } from \"../types\";\r\nimport { getBankDisplayName, resolveLogoPath } from \"../utils/logoResolver\";\r\n\r\n/**\r\n * BankLogo Component\r\n *\r\n * Displays bank logos with automatic format detection and fallback handling.\r\n * Optimized for wedding invitation gift/payment sections.\r\n *\r\n * @example\r\n * ```tsx\r\n * <BankLogo name=\"bca\" width={120} />\r\n * <BankLogo src=\"/custom/logo.png\" width={100} />\r\n * ```\r\n */\r\nexport const BankLogo: React.FC<BankLogoProps> = ({\r\n name,\r\n src,\r\n width = 120,\r\n height,\r\n format,\r\n className = \"\",\r\n style = {},\r\n alt,\r\n fallback,\r\n loading = \"lazy\",\r\n}) => {\r\n // Resolve logo source\r\n const logoSrc = src || (name ? resolveLogoPath(name, format) : undefined);\r\n const displayName = name ? getBankDisplayName(name) : \"Bank Logo\";\r\n const altText = alt || displayName;\r\n\r\n // Fallback if logo not found\r\n if (!logoSrc) {\r\n if (fallback) {\r\n return <>{fallback}</>;\r\n }\r\n return (\r\n <div\r\n className={`bank-logo-fallback ${className}`}\r\n style={{\r\n width,\r\n height: height || \"auto\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n backgroundColor: \"#f3f4f6\",\r\n borderRadius: \"4px\",\r\n color: \"#6b7280\",\r\n fontSize: \"12px\",\r\n fontWeight: 500,\r\n ...style,\r\n }}\r\n >\r\n {displayName}\r\n </div>\r\n );\r\n }\r\n\r\n // Calculate height if not provided (maintain aspect ratio)\r\n const imgHeight = height || \"auto\";\r\n\r\n // Base styles\r\n const imgStyle: React.CSSProperties = {\r\n width,\r\n height: imgHeight,\r\n objectFit: \"contain\",\r\n ...style,\r\n };\r\n\r\n return (\r\n <img\r\n src={logoSrc}\r\n alt={altText}\r\n className={`bank-logo ${className}`}\r\n style={imgStyle}\r\n loading={loading}\r\n />\r\n );\r\n};\r\n\r\nBankLogo.displayName = \"BankLogo\";\r\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/registry/bankLogoMap.ts","../src/utils/logoResolver.ts","../src/components/BankLogo.tsx"],"names":["jsx"],"mappings":"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","file":"index.js","sourcesContent":["import bcaSvg from \"../assets/banks/bca.svg\";\nimport bniSvg from \"../assets/banks/bni.svg\";\nimport briSvg from \"../assets/banks/bri.svg\";\nimport btnSvg from \"../assets/banks/btn.svg\";\nimport cimbSvg from \"../assets/banks/cimb.svg\";\nimport citibankSvg from \"../assets/banks/citibank.svg\";\nimport danaSvg from \"../assets/banks/dana.svg\";\nimport danamonSvg from \"../assets/banks/danamon.svg\";\nimport gopaySvg from \"../assets/banks/gopay.svg\";\nimport hsbcSvg from \"../assets/banks/hsbc.svg\";\nimport linkajaSvg from \"../assets/banks/linkaja.svg\";\nimport mandiriSvg from \"../assets/banks/mandiri.svg\";\nimport maybankSvg from \"../assets/banks/maybank.svg\";\nimport megaSyariahSvg from \"../assets/banks/mega-syariah.svg\";\nimport megaSvg from \"../assets/banks/mega.svg\";\nimport ocbcSvg from \"../assets/banks/ocbc.svg\";\nimport ovoSvg from \"../assets/banks/ovo.svg\";\nimport paninSvg from \"../assets/banks/panin.svg\";\nimport permataSvg from \"../assets/banks/permata.svg\";\nimport seabankSvg from \"../assets/banks/seabank.svg\";\nimport shopeepaySvg from \"../assets/banks/shopeepay.svg\";\nimport standardCharteredSvg from \"../assets/banks/standard-chartered.svg\";\nimport { BankLogoData, BankName } from \"../types\";\n\n/**\n * Central registry of all bank logos\n * Add new banks here - logo files should match the key names\n */\nexport const BANK_LOGO_REGISTRY: Record<BankName, BankLogoData> = {\n bca: {\n name: \"bca\",\n displayName: \"BCA\",\n svg: bcaSvg,\n },\n mandiri: {\n name: \"mandiri\",\n displayName: \"Bank Mandiri\",\n svg: mandiriSvg,\n },\n bni: {\n name: \"bni\",\n displayName: \"BNI\",\n svg: bniSvg,\n },\n bri: {\n name: \"bri\",\n displayName: \"BRI\",\n svg: briSvg,\n },\n cimb: {\n name: \"cimb\",\n displayName: \"CIMB Niaga\",\n svg: cimbSvg,\n },\n permata: {\n name: \"permata\",\n displayName: \"Bank Permata\",\n svg: permataSvg,\n },\n danamon: {\n name: \"danamon\",\n displayName: \"Bank Danamon\",\n svg: danamonSvg,\n },\n maybank: {\n name: \"maybank\",\n displayName: \"Maybank\",\n svg: maybankSvg,\n },\n ocbc: {\n name: \"ocbc\",\n displayName: \"OCBC NISP\",\n svg: ocbcSvg,\n },\n hsbc: {\n name: \"hsbc\",\n displayName: \"HSBC\",\n svg: hsbcSvg,\n },\n citibank: {\n name: \"citibank\",\n displayName: \"Citibank\",\n svg: citibankSvg,\n },\n \"standard-chartered\": {\n name: \"standard-chartered\",\n displayName: \"Standard Chartered\",\n svg: standardCharteredSvg,\n },\n panin: {\n name: \"panin\",\n displayName: \"Bank Panin\",\n svg: paninSvg,\n },\n btn: {\n name: \"btn\",\n displayName: \"BTN\",\n svg: btnSvg,\n },\n mega: {\n name: \"mega\",\n displayName: \"Bank Mega\",\n svg: megaSvg,\n },\n \"mega-syariah\": {\n name: \"mega-syariah\",\n displayName: \"Bank Mega Syariah\",\n svg: megaSyariahSvg,\n },\n seabank: {\n name: \"seabank\",\n displayName: \"Bank Seabank\",\n svg: seabankSvg,\n },\n gopay: {\n name: \"gopay\",\n displayName: \"GoPay\",\n svg: gopaySvg,\n },\n ovo: {\n name: \"ovo\",\n displayName: \"OVO\",\n svg: ovoSvg,\n },\n dana: {\n name: \"dana\",\n displayName: \"DANA\",\n svg: danaSvg,\n },\n shopeepay: {\n name: \"shopeepay\",\n displayName: \"ShopeePay\",\n svg: shopeepaySvg,\n },\n linkaja: {\n name: \"linkaja\",\n displayName: \"LinkAja\",\n svg: linkajaSvg,\n },\n};\n\n/**\n * Get logo data by bank name\n */\nexport function getBankLogo(name: BankName): BankLogoData | undefined {\n return BANK_LOGO_REGISTRY[name];\n}\n\n/**\n * Get all available bank names\n */\nexport function getAvailableBanks(): BankName[] {\n return Object.keys(BANK_LOGO_REGISTRY) as BankName[];\n}\n","import { getBankLogo } from \"../registry/bankLogoMap\";\r\nimport { BankName } from \"../types\";\r\n\r\n/**\r\n * Resolve the correct logo path based on bank name\r\n */\r\nexport function resolveLogoPath(name: BankName): string | undefined {\r\n const logoData = getBankLogo(name);\r\n if (!logoData) return undefined;\r\n\r\n return logoData.svg;\r\n}\r\n\r\n/**\r\n * Get display name for a bank\r\n */\r\nexport function getBankDisplayName(name: BankName): string {\r\n const logoData = getBankLogo(name);\r\n return logoData?.displayName || name;\r\n}\r\n","import React from \"react\";\r\nimport { BankLogoProps } from \"../types\";\r\nimport { getBankDisplayName, resolveLogoPath } from \"../utils/logoResolver\";\r\n\r\n/**\r\n * BankLogo Component\r\n *\r\n * Displays bank logos with automatic format detection and fallback handling.\r\n * Optimized for wedding invitation gift/payment sections.\r\n *\r\n * @example\r\n * ```tsx\r\n * <BankLogo name=\"bca\" width={120} />\r\n * <BankLogo src=\"/custom/logo.png\" width={100} />\r\n * ```\r\n */\r\nexport const BankLogo: React.FC<BankLogoProps> = ({\r\n name,\r\n src,\r\n width = 120,\r\n height,\r\n className = \"\",\r\n style = {},\r\n alt,\r\n fallback,\r\n loading = \"lazy\",\r\n}) => {\r\n // Resolve logo source\r\n const logoSrc = src || (name ? resolveLogoPath(name) : undefined);\r\n const displayName = name ? getBankDisplayName(name) : \"Bank Logo\";\r\n const altText = alt || displayName;\r\n\r\n // Fallback if logo not found\r\n if (!logoSrc) {\r\n if (fallback) {\r\n return <>{fallback}</>;\r\n }\r\n return (\r\n <div\r\n className={`bank-logo-fallback ${className}`}\r\n style={{\r\n width,\r\n height: height || \"auto\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n backgroundColor: \"#f3f4f6\",\r\n borderRadius: \"4px\",\r\n color: \"#6b7280\",\r\n fontSize: \"12px\",\r\n fontWeight: 500,\r\n ...style,\r\n }}\r\n >\r\n {displayName}\r\n </div>\r\n );\r\n }\r\n\r\n // Calculate height if not provided (maintain aspect ratio)\r\n const imgHeight = height || \"auto\";\r\n\r\n // Base styles\r\n const imgStyle: React.CSSProperties = {\r\n width,\r\n height: imgHeight,\r\n objectFit: \"contain\",\r\n ...style,\r\n };\r\n\r\n return (\r\n <img\r\n src={logoSrc}\r\n alt={altText}\r\n className={`bank-logo ${className}`}\r\n style={imgStyle}\r\n loading={loading}\r\n />\r\n );\r\n};\r\n\r\nBankLogo.displayName = \"BankLogo\";\r\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -71,134 +71,112 @@ var BANK_LOGO_REGISTRY = {
|
|
|
71
71
|
bca: {
|
|
72
72
|
name: "bca",
|
|
73
73
|
displayName: "BCA",
|
|
74
|
-
svg: bca_default
|
|
75
|
-
defaultFormat: "svg"
|
|
74
|
+
svg: bca_default
|
|
76
75
|
},
|
|
77
76
|
mandiri: {
|
|
78
77
|
name: "mandiri",
|
|
79
78
|
displayName: "Bank Mandiri",
|
|
80
|
-
svg: mandiri_default
|
|
81
|
-
defaultFormat: "svg"
|
|
79
|
+
svg: mandiri_default
|
|
82
80
|
},
|
|
83
81
|
bni: {
|
|
84
82
|
name: "bni",
|
|
85
83
|
displayName: "BNI",
|
|
86
|
-
svg: bni_default
|
|
87
|
-
defaultFormat: "svg"
|
|
84
|
+
svg: bni_default
|
|
88
85
|
},
|
|
89
86
|
bri: {
|
|
90
87
|
name: "bri",
|
|
91
88
|
displayName: "BRI",
|
|
92
|
-
svg: bri_default
|
|
93
|
-
defaultFormat: "svg"
|
|
89
|
+
svg: bri_default
|
|
94
90
|
},
|
|
95
91
|
cimb: {
|
|
96
92
|
name: "cimb",
|
|
97
93
|
displayName: "CIMB Niaga",
|
|
98
|
-
svg: cimb_default
|
|
99
|
-
defaultFormat: "svg"
|
|
94
|
+
svg: cimb_default
|
|
100
95
|
},
|
|
101
96
|
permata: {
|
|
102
97
|
name: "permata",
|
|
103
98
|
displayName: "Bank Permata",
|
|
104
|
-
svg: permata_default
|
|
105
|
-
defaultFormat: "svg"
|
|
99
|
+
svg: permata_default
|
|
106
100
|
},
|
|
107
101
|
danamon: {
|
|
108
102
|
name: "danamon",
|
|
109
103
|
displayName: "Bank Danamon",
|
|
110
|
-
svg: danamon_default
|
|
111
|
-
defaultFormat: "svg"
|
|
104
|
+
svg: danamon_default
|
|
112
105
|
},
|
|
113
106
|
maybank: {
|
|
114
107
|
name: "maybank",
|
|
115
108
|
displayName: "Maybank",
|
|
116
|
-
svg: maybank_default
|
|
117
|
-
defaultFormat: "svg"
|
|
109
|
+
svg: maybank_default
|
|
118
110
|
},
|
|
119
111
|
ocbc: {
|
|
120
112
|
name: "ocbc",
|
|
121
113
|
displayName: "OCBC NISP",
|
|
122
|
-
svg: ocbc_default
|
|
123
|
-
defaultFormat: "svg"
|
|
114
|
+
svg: ocbc_default
|
|
124
115
|
},
|
|
125
116
|
hsbc: {
|
|
126
117
|
name: "hsbc",
|
|
127
118
|
displayName: "HSBC",
|
|
128
|
-
svg: hsbc_default
|
|
129
|
-
defaultFormat: "svg"
|
|
119
|
+
svg: hsbc_default
|
|
130
120
|
},
|
|
131
121
|
citibank: {
|
|
132
122
|
name: "citibank",
|
|
133
123
|
displayName: "Citibank",
|
|
134
|
-
svg: citibank_default
|
|
135
|
-
defaultFormat: "svg"
|
|
124
|
+
svg: citibank_default
|
|
136
125
|
},
|
|
137
126
|
"standard-chartered": {
|
|
138
127
|
name: "standard-chartered",
|
|
139
128
|
displayName: "Standard Chartered",
|
|
140
|
-
svg: standard_chartered_default
|
|
141
|
-
defaultFormat: "svg"
|
|
129
|
+
svg: standard_chartered_default
|
|
142
130
|
},
|
|
143
131
|
panin: {
|
|
144
132
|
name: "panin",
|
|
145
133
|
displayName: "Bank Panin",
|
|
146
|
-
svg: panin_default
|
|
147
|
-
defaultFormat: "svg"
|
|
134
|
+
svg: panin_default
|
|
148
135
|
},
|
|
149
136
|
btn: {
|
|
150
137
|
name: "btn",
|
|
151
138
|
displayName: "BTN",
|
|
152
|
-
svg: btn_default
|
|
153
|
-
defaultFormat: "svg"
|
|
139
|
+
svg: btn_default
|
|
154
140
|
},
|
|
155
141
|
mega: {
|
|
156
142
|
name: "mega",
|
|
157
143
|
displayName: "Bank Mega",
|
|
158
|
-
svg: mega_default
|
|
159
|
-
defaultFormat: "svg"
|
|
144
|
+
svg: mega_default
|
|
160
145
|
},
|
|
161
146
|
"mega-syariah": {
|
|
162
147
|
name: "mega-syariah",
|
|
163
148
|
displayName: "Bank Mega Syariah",
|
|
164
|
-
svg: mega_syariah_default
|
|
165
|
-
defaultFormat: "svg"
|
|
149
|
+
svg: mega_syariah_default
|
|
166
150
|
},
|
|
167
151
|
seabank: {
|
|
168
152
|
name: "seabank",
|
|
169
153
|
displayName: "Bank Seabank",
|
|
170
|
-
svg: seabank_default
|
|
171
|
-
defaultFormat: "svg"
|
|
154
|
+
svg: seabank_default
|
|
172
155
|
},
|
|
173
156
|
gopay: {
|
|
174
157
|
name: "gopay",
|
|
175
158
|
displayName: "GoPay",
|
|
176
|
-
svg: gopay_default
|
|
177
|
-
defaultFormat: "svg"
|
|
159
|
+
svg: gopay_default
|
|
178
160
|
},
|
|
179
161
|
ovo: {
|
|
180
162
|
name: "ovo",
|
|
181
163
|
displayName: "OVO",
|
|
182
|
-
svg: ovo_default
|
|
183
|
-
defaultFormat: "svg"
|
|
164
|
+
svg: ovo_default
|
|
184
165
|
},
|
|
185
166
|
dana: {
|
|
186
167
|
name: "dana",
|
|
187
168
|
displayName: "DANA",
|
|
188
|
-
svg: dana_default
|
|
189
|
-
defaultFormat: "svg"
|
|
169
|
+
svg: dana_default
|
|
190
170
|
},
|
|
191
171
|
shopeepay: {
|
|
192
172
|
name: "shopeepay",
|
|
193
173
|
displayName: "ShopeePay",
|
|
194
|
-
svg: shopeepay_default
|
|
195
|
-
defaultFormat: "svg"
|
|
174
|
+
svg: shopeepay_default
|
|
196
175
|
},
|
|
197
176
|
linkaja: {
|
|
198
177
|
name: "linkaja",
|
|
199
178
|
displayName: "LinkAja",
|
|
200
|
-
svg: linkaja_default
|
|
201
|
-
defaultFormat: "svg"
|
|
179
|
+
svg: linkaja_default
|
|
202
180
|
}
|
|
203
181
|
};
|
|
204
182
|
function getBankLogo(name) {
|
|
@@ -209,11 +187,10 @@ function getAvailableBanks() {
|
|
|
209
187
|
}
|
|
210
188
|
|
|
211
189
|
// src/utils/logoResolver.ts
|
|
212
|
-
function resolveLogoPath(name
|
|
190
|
+
function resolveLogoPath(name) {
|
|
213
191
|
const logoData = getBankLogo(name);
|
|
214
192
|
if (!logoData) return void 0;
|
|
215
|
-
|
|
216
|
-
return selectedFormat === "svg" ? logoData.svg : logoData.png;
|
|
193
|
+
return logoData.svg;
|
|
217
194
|
}
|
|
218
195
|
function getBankDisplayName(name) {
|
|
219
196
|
const logoData = getBankLogo(name);
|
|
@@ -224,14 +201,13 @@ var BankLogo = ({
|
|
|
224
201
|
src,
|
|
225
202
|
width = 120,
|
|
226
203
|
height,
|
|
227
|
-
format,
|
|
228
204
|
className = "",
|
|
229
205
|
style = {},
|
|
230
206
|
alt,
|
|
231
207
|
fallback,
|
|
232
208
|
loading = "lazy"
|
|
233
209
|
}) => {
|
|
234
|
-
const logoSrc = src || (name ? resolveLogoPath(name
|
|
210
|
+
const logoSrc = src || (name ? resolveLogoPath(name) : void 0);
|
|
235
211
|
const displayName = name ? getBankDisplayName(name) : "Bank Logo";
|
|
236
212
|
const altText = alt || displayName;
|
|
237
213
|
if (!logoSrc) {
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/registry/bankLogoMap.ts","../src/utils/logoResolver.ts","../src/components/BankLogo.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,IAAM,kBAAA,GAAqD;AAAA,EAChE,GAAA,EAAK;AAAA,IACH,IAAA,EAAM,KAAA;AAAA,IACN,WAAA,EAAa,KAAA;AAAA,IACb,GAAA,EAAK,WAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,cAAA;AAAA,IACb,GAAA,EAAK,eAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,GAAA,EAAK;AAAA,IACH,IAAA,EAAM,KAAA;AAAA,IACN,WAAA,EAAa,KAAA;AAAA,IACb,GAAA,EAAK,WAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,GAAA,EAAK;AAAA,IACH,IAAA,EAAM,KAAA;AAAA,IACN,WAAA,EAAa,KAAA;AAAA,IACb,GAAA,EAAK,WAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa,YAAA;AAAA,IACb,GAAA,EAAK,YAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,cAAA;AAAA,IACb,GAAA,EAAK,eAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,cAAA;AAAA,IACb,GAAA,EAAK,eAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,SAAA;AAAA,IACb,GAAA,EAAK,eAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa,WAAA;AAAA,IACb,GAAA,EAAK,YAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,GAAA,EAAK,YAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,UAAA;AAAA,IACN,WAAA,EAAa,UAAA;AAAA,IACb,GAAA,EAAK,gBAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,oBAAA,EAAsB;AAAA,IACpB,IAAA,EAAM,oBAAA;AAAA,IACN,WAAA,EAAa,oBAAA;AAAA,IACb,GAAA,EAAK,0BAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA,IACN,WAAA,EAAa,YAAA;AAAA,IACb,GAAA,EAAK,aAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,GAAA,EAAK;AAAA,IACH,IAAA,EAAM,KAAA;AAAA,IACN,WAAA,EAAa,KAAA;AAAA,IACb,GAAA,EAAK,WAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa,WAAA;AAAA,IACb,GAAA,EAAK,YAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,IAAA,EAAM,cAAA;AAAA,IACN,WAAA,EAAa,mBAAA;AAAA,IACb,GAAA,EAAK,oBAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,cAAA;AAAA,IACb,GAAA,EAAK,eAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,OAAA;AAAA,IACN,WAAA,EAAa,OAAA;AAAA,IACb,GAAA,EAAK,aAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,GAAA,EAAK;AAAA,IACH,IAAA,EAAM,KAAA;AAAA,IACN,WAAA,EAAa,KAAA;AAAA,IACb,GAAA,EAAK,WAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,MAAA;AAAA,IACN,WAAA,EAAa,MAAA;AAAA,IACb,GAAA,EAAK,YAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,SAAA,EAAW;AAAA,IACT,IAAA,EAAM,WAAA;AAAA,IACN,WAAA,EAAa,WAAA;AAAA,IACb,GAAA,EAAK,iBAAA;AAAA,IACL,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,SAAA;AAAA,IACb,GAAA,EAAK,eAAA;AAAA,IACL,aAAA,EAAe;AAAA;AAEnB;AAKO,SAAS,YAAY,IAAA,EAA0C;AACpE,EAAA,OAAO,mBAAmB,IAAI,CAAA;AAChC;AAKO,SAAS,iBAAA,GAAgC;AAC9C,EAAA,OAAO,MAAA,CAAO,KAAK,kBAAkB,CAAA;AACvC;;;ACzKO,SAAS,eAAA,CACd,MACA,MAAA,EACoB;AACpB,EAAA,MAAM,QAAA,GAAW,YAAY,IAAI,CAAA;AACjC,EAAA,IAAI,CAAC,UAAU,OAAO,MAAA;AAEtB,EAAA,MAAM,cAAA,GAAiB,UAAU,QAAA,CAAS,aAAA;AAC1C,EAAA,OAAO,cAAA,KAAmB,KAAA,GAAQ,QAAA,CAAS,GAAA,GAAM,QAAA,CAAS,GAAA;AAC5D;AAKO,SAAS,mBAAmB,IAAA,EAAwB;AACzD,EAAA,MAAM,QAAA,GAAW,YAAY,IAAI,CAAA;AACjC,EAAA,OAAO,UAAU,WAAA,IAAe,IAAA;AAClC;ACPO,IAAM,WAAoC,CAAC;AAAA,EAChD,IAAA;AAAA,EACA,GAAA;AAAA,EACA,KAAA,GAAQ,GAAA;AAAA,EACR,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAQ,EAAC;AAAA,EACT,GAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,GAAU;AACZ,CAAA,KAAM;AAEJ,EAAA,MAAM,UAAU,GAAA,KAAQ,IAAA,GAAO,eAAA,CAAgB,IAAA,EAAM,MAAM,CAAA,GAAI,MAAA,CAAA;AAC/D,EAAA,MAAM,WAAA,GAAc,IAAA,GAAO,kBAAA,CAAmB,IAAI,CAAA,GAAI,WAAA;AACtD,EAAA,MAAM,UAAU,GAAA,IAAO,WAAA;AAGvB,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA,uCAAU,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,IACrB;AACA,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,sBAAsB,SAAS,CAAA,CAAA;AAAA,QAC1C,KAAA,EAAO;AAAA,UACL,KAAA;AAAA,UACA,QAAQ,MAAA,IAAU,MAAA;AAAA,UAClB,OAAA,EAAS,MAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,cAAA,EAAgB,QAAA;AAAA,UAChB,eAAA,EAAiB,SAAA;AAAA,UACjB,YAAA,EAAc,KAAA;AAAA,UACd,KAAA,EAAO,SAAA;AAAA,UACP,QAAA,EAAU,MAAA;AAAA,UACV,UAAA,EAAY,GAAA;AAAA,UACZ,GAAG;AAAA,SACL;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAGA,EAAA,MAAM,YAAY,MAAA,IAAU,MAAA;AAG5B,EAAA,MAAM,QAAA,GAAgC;AAAA,IACpC,KAAA;AAAA,IACA,MAAA,EAAQ,SAAA;AAAA,IACR,SAAA,EAAW,SAAA;AAAA,IACX,GAAG;AAAA,GACL;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,OAAA;AAAA,MACL,GAAA,EAAK,OAAA;AAAA,MACL,SAAA,EAAW,aAAa,SAAS,CAAA,CAAA;AAAA,MACjC,KAAA,EAAO,QAAA;AAAA,MACP;AAAA;AAAA,GACF;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"index.mjs","sourcesContent":["import bcaSvg from \"../assets/banks/bca.svg\";\r\nimport bniSvg from \"../assets/banks/bni.svg\";\r\nimport briSvg from \"../assets/banks/bri.svg\";\r\nimport btnSvg from \"../assets/banks/btn.svg\";\r\nimport cimbSvg from \"../assets/banks/cimb.svg\";\r\nimport citibankSvg from \"../assets/banks/citibank.svg\";\r\nimport danaSvg from \"../assets/banks/dana.svg\";\r\nimport danamonSvg from \"../assets/banks/danamon.svg\";\r\nimport gopaySvg from \"../assets/banks/gopay.svg\";\r\nimport hsbcSvg from \"../assets/banks/hsbc.svg\";\r\nimport linkajaSvg from \"../assets/banks/linkaja.svg\";\r\nimport mandiriSvg from \"../assets/banks/mandiri.svg\";\r\nimport maybankSvg from \"../assets/banks/maybank.svg\";\r\nimport megaSyariahSvg from \"../assets/banks/mega-syariah.svg\";\r\nimport megaSvg from \"../assets/banks/mega.svg\";\r\nimport ocbcSvg from \"../assets/banks/ocbc.svg\";\r\nimport ovoSvg from \"../assets/banks/ovo.svg\";\r\nimport paninSvg from \"../assets/banks/panin.svg\";\r\nimport permataSvg from \"../assets/banks/permata.svg\";\r\nimport seabankSvg from \"../assets/banks/seabank.svg\";\r\nimport shopeepaySvg from \"../assets/banks/shopeepay.svg\";\r\nimport standardCharteredSvg from \"../assets/banks/standard-chartered.svg\";\r\nimport { BankLogoData, BankName } from \"../types\";\r\n\r\n/**\r\n * Central registry of all bank logos\r\n * Add new banks here - logo files should match the key names\r\n */\r\nexport const BANK_LOGO_REGISTRY: Record<BankName, BankLogoData> = {\r\n bca: {\r\n name: \"bca\",\r\n displayName: \"BCA\",\r\n svg: bcaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n mandiri: {\r\n name: \"mandiri\",\r\n displayName: \"Bank Mandiri\",\r\n svg: mandiriSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n bni: {\r\n name: \"bni\",\r\n displayName: \"BNI\",\r\n svg: bniSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n bri: {\r\n name: \"bri\",\r\n displayName: \"BRI\",\r\n svg: briSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n cimb: {\r\n name: \"cimb\",\r\n displayName: \"CIMB Niaga\",\r\n svg: cimbSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n permata: {\r\n name: \"permata\",\r\n displayName: \"Bank Permata\",\r\n svg: permataSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n danamon: {\r\n name: \"danamon\",\r\n displayName: \"Bank Danamon\",\r\n svg: danamonSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n maybank: {\r\n name: \"maybank\",\r\n displayName: \"Maybank\",\r\n svg: maybankSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n ocbc: {\r\n name: \"ocbc\",\r\n displayName: \"OCBC NISP\",\r\n svg: ocbcSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n hsbc: {\r\n name: \"hsbc\",\r\n displayName: \"HSBC\",\r\n svg: hsbcSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n citibank: {\r\n name: \"citibank\",\r\n displayName: \"Citibank\",\r\n svg: citibankSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n \"standard-chartered\": {\r\n name: \"standard-chartered\",\r\n displayName: \"Standard Chartered\",\r\n svg: standardCharteredSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n panin: {\r\n name: \"panin\",\r\n displayName: \"Bank Panin\",\r\n svg: paninSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n btn: {\r\n name: \"btn\",\r\n displayName: \"BTN\",\r\n svg: btnSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n mega: {\r\n name: \"mega\",\r\n displayName: \"Bank Mega\",\r\n svg: megaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n \"mega-syariah\": {\r\n name: \"mega-syariah\",\r\n displayName: \"Bank Mega Syariah\",\r\n svg: megaSyariahSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n seabank: {\r\n name: \"seabank\",\r\n displayName: \"Bank Seabank\",\r\n svg: seabankSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n gopay: {\r\n name: \"gopay\",\r\n displayName: \"GoPay\",\r\n svg: gopaySvg,\r\n defaultFormat: \"svg\",\r\n },\r\n ovo: {\r\n name: \"ovo\",\r\n displayName: \"OVO\",\r\n svg: ovoSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n dana: {\r\n name: \"dana\",\r\n displayName: \"DANA\",\r\n svg: danaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n shopeepay: {\r\n name: \"shopeepay\",\r\n displayName: \"ShopeePay\",\r\n svg: shopeepaySvg,\r\n defaultFormat: \"svg\",\r\n },\r\n linkaja: {\r\n name: \"linkaja\",\r\n displayName: \"LinkAja\",\r\n svg: linkajaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n};\r\n\r\n/**\r\n * Get logo data by bank name\r\n */\r\nexport function getBankLogo(name: BankName): BankLogoData | undefined {\r\n return BANK_LOGO_REGISTRY[name];\r\n}\r\n\r\n/**\r\n * Get all available bank names\r\n */\r\nexport function getAvailableBanks(): BankName[] {\r\n return Object.keys(BANK_LOGO_REGISTRY) as BankName[];\r\n}\r\n","import { getBankLogo } from \"../registry/bankLogoMap\";\r\nimport { BankName, LogoFormat } from \"../types\";\r\n\r\n/**\r\n * Resolve the correct logo path based on bank name and format\r\n */\r\nexport function resolveLogoPath(\r\n name: BankName,\r\n format?: LogoFormat,\r\n): string | undefined {\r\n const logoData = getBankLogo(name);\r\n if (!logoData) return undefined;\r\n\r\n const selectedFormat = format || logoData.defaultFormat;\r\n return selectedFormat === \"svg\" ? logoData.svg : logoData.png;\r\n}\r\n\r\n/**\r\n * Get display name for a bank\r\n */\r\nexport function getBankDisplayName(name: BankName): string {\r\n const logoData = getBankLogo(name);\r\n return logoData?.displayName || name;\r\n}\r\n","import React from \"react\";\r\nimport { BankLogoProps } from \"../types\";\r\nimport { getBankDisplayName, resolveLogoPath } from \"../utils/logoResolver\";\r\n\r\n/**\r\n * BankLogo Component\r\n *\r\n * Displays bank logos with automatic format detection and fallback handling.\r\n * Optimized for wedding invitation gift/payment sections.\r\n *\r\n * @example\r\n * ```tsx\r\n * <BankLogo name=\"bca\" width={120} />\r\n * <BankLogo src=\"/custom/logo.png\" width={100} />\r\n * ```\r\n */\r\nexport const BankLogo: React.FC<BankLogoProps> = ({\r\n name,\r\n src,\r\n width = 120,\r\n height,\r\n format,\r\n className = \"\",\r\n style = {},\r\n alt,\r\n fallback,\r\n loading = \"lazy\",\r\n}) => {\r\n // Resolve logo source\r\n const logoSrc = src || (name ? resolveLogoPath(name, format) : undefined);\r\n const displayName = name ? getBankDisplayName(name) : \"Bank Logo\";\r\n const altText = alt || displayName;\r\n\r\n // Fallback if logo not found\r\n if (!logoSrc) {\r\n if (fallback) {\r\n return <>{fallback}</>;\r\n }\r\n return (\r\n <div\r\n className={`bank-logo-fallback ${className}`}\r\n style={{\r\n width,\r\n height: height || \"auto\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n backgroundColor: \"#f3f4f6\",\r\n borderRadius: \"4px\",\r\n color: \"#6b7280\",\r\n fontSize: \"12px\",\r\n fontWeight: 500,\r\n ...style,\r\n }}\r\n >\r\n {displayName}\r\n </div>\r\n );\r\n }\r\n\r\n // Calculate height if not provided (maintain aspect ratio)\r\n const imgHeight = height || \"auto\";\r\n\r\n // Base styles\r\n const imgStyle: React.CSSProperties = {\r\n width,\r\n height: imgHeight,\r\n objectFit: \"contain\",\r\n ...style,\r\n };\r\n\r\n return (\r\n <img\r\n src={logoSrc}\r\n alt={altText}\r\n className={`bank-logo ${className}`}\r\n style={imgStyle}\r\n loading={loading}\r\n />\r\n );\r\n};\r\n\r\nBankLogo.displayName = \"BankLogo\";\r\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/registry/bankLogoMap.ts","../src/utils/logoResolver.ts","../src/components/BankLogo.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import bcaSvg from \"../assets/banks/bca.svg\";\nimport bniSvg from \"../assets/banks/bni.svg\";\nimport briSvg from \"../assets/banks/bri.svg\";\nimport btnSvg from \"../assets/banks/btn.svg\";\nimport cimbSvg from \"../assets/banks/cimb.svg\";\nimport citibankSvg from \"../assets/banks/citibank.svg\";\nimport danaSvg from \"../assets/banks/dana.svg\";\nimport danamonSvg from \"../assets/banks/danamon.svg\";\nimport gopaySvg from \"../assets/banks/gopay.svg\";\nimport hsbcSvg from \"../assets/banks/hsbc.svg\";\nimport linkajaSvg from \"../assets/banks/linkaja.svg\";\nimport mandiriSvg from \"../assets/banks/mandiri.svg\";\nimport maybankSvg from \"../assets/banks/maybank.svg\";\nimport megaSyariahSvg from \"../assets/banks/mega-syariah.svg\";\nimport megaSvg from \"../assets/banks/mega.svg\";\nimport ocbcSvg from \"../assets/banks/ocbc.svg\";\nimport ovoSvg from \"../assets/banks/ovo.svg\";\nimport paninSvg from \"../assets/banks/panin.svg\";\nimport permataSvg from \"../assets/banks/permata.svg\";\nimport seabankSvg from \"../assets/banks/seabank.svg\";\nimport shopeepaySvg from \"../assets/banks/shopeepay.svg\";\nimport standardCharteredSvg from \"../assets/banks/standard-chartered.svg\";\nimport { BankLogoData, BankName } from \"../types\";\n\n/**\n * Central registry of all bank logos\n * Add new banks here - logo files should match the key names\n */\nexport const BANK_LOGO_REGISTRY: Record<BankName, BankLogoData> = {\n bca: {\n name: \"bca\",\n displayName: \"BCA\",\n svg: bcaSvg,\n },\n mandiri: {\n name: \"mandiri\",\n displayName: \"Bank Mandiri\",\n svg: mandiriSvg,\n },\n bni: {\n name: \"bni\",\n displayName: \"BNI\",\n svg: bniSvg,\n },\n bri: {\n name: \"bri\",\n displayName: \"BRI\",\n svg: briSvg,\n },\n cimb: {\n name: \"cimb\",\n displayName: \"CIMB Niaga\",\n svg: cimbSvg,\n },\n permata: {\n name: \"permata\",\n displayName: \"Bank Permata\",\n svg: permataSvg,\n },\n danamon: {\n name: \"danamon\",\n displayName: \"Bank Danamon\",\n svg: danamonSvg,\n },\n maybank: {\n name: \"maybank\",\n displayName: \"Maybank\",\n svg: maybankSvg,\n },\n ocbc: {\n name: \"ocbc\",\n displayName: \"OCBC NISP\",\n svg: ocbcSvg,\n },\n hsbc: {\n name: \"hsbc\",\n displayName: \"HSBC\",\n svg: hsbcSvg,\n },\n citibank: {\n name: \"citibank\",\n displayName: \"Citibank\",\n svg: citibankSvg,\n },\n \"standard-chartered\": {\n name: \"standard-chartered\",\n displayName: \"Standard Chartered\",\n svg: standardCharteredSvg,\n },\n panin: {\n name: \"panin\",\n displayName: \"Bank Panin\",\n svg: paninSvg,\n },\n btn: {\n name: \"btn\",\n displayName: \"BTN\",\n svg: btnSvg,\n },\n mega: {\n name: \"mega\",\n displayName: \"Bank Mega\",\n svg: megaSvg,\n },\n \"mega-syariah\": {\n name: \"mega-syariah\",\n displayName: \"Bank Mega Syariah\",\n svg: megaSyariahSvg,\n },\n seabank: {\n name: \"seabank\",\n displayName: \"Bank Seabank\",\n svg: seabankSvg,\n },\n gopay: {\n name: \"gopay\",\n displayName: \"GoPay\",\n svg: gopaySvg,\n },\n ovo: {\n name: \"ovo\",\n displayName: \"OVO\",\n svg: ovoSvg,\n },\n dana: {\n name: \"dana\",\n displayName: \"DANA\",\n svg: danaSvg,\n },\n shopeepay: {\n name: \"shopeepay\",\n displayName: \"ShopeePay\",\n svg: shopeepaySvg,\n },\n linkaja: {\n name: \"linkaja\",\n displayName: \"LinkAja\",\n svg: linkajaSvg,\n },\n};\n\n/**\n * Get logo data by bank name\n */\nexport function getBankLogo(name: BankName): BankLogoData | undefined {\n return BANK_LOGO_REGISTRY[name];\n}\n\n/**\n * Get all available bank names\n */\nexport function getAvailableBanks(): BankName[] {\n return Object.keys(BANK_LOGO_REGISTRY) as BankName[];\n}\n","import { getBankLogo } from \"../registry/bankLogoMap\";\r\nimport { BankName } from \"../types\";\r\n\r\n/**\r\n * Resolve the correct logo path based on bank name\r\n */\r\nexport function resolveLogoPath(name: BankName): string | undefined {\r\n const logoData = getBankLogo(name);\r\n if (!logoData) return undefined;\r\n\r\n return logoData.svg;\r\n}\r\n\r\n/**\r\n * Get display name for a bank\r\n */\r\nexport function getBankDisplayName(name: BankName): string {\r\n const logoData = getBankLogo(name);\r\n return logoData?.displayName || name;\r\n}\r\n","import React from \"react\";\r\nimport { BankLogoProps } from \"../types\";\r\nimport { getBankDisplayName, resolveLogoPath } from \"../utils/logoResolver\";\r\n\r\n/**\r\n * BankLogo Component\r\n *\r\n * Displays bank logos with automatic format detection and fallback handling.\r\n * Optimized for wedding invitation gift/payment sections.\r\n *\r\n * @example\r\n * ```tsx\r\n * <BankLogo name=\"bca\" width={120} />\r\n * <BankLogo src=\"/custom/logo.png\" width={100} />\r\n * ```\r\n */\r\nexport const BankLogo: React.FC<BankLogoProps> = ({\r\n name,\r\n src,\r\n width = 120,\r\n height,\r\n className = \"\",\r\n style = {},\r\n alt,\r\n fallback,\r\n loading = \"lazy\",\r\n}) => {\r\n // Resolve logo source\r\n const logoSrc = src || (name ? resolveLogoPath(name) : undefined);\r\n const displayName = name ? getBankDisplayName(name) : \"Bank Logo\";\r\n const altText = alt || displayName;\r\n\r\n // Fallback if logo not found\r\n if (!logoSrc) {\r\n if (fallback) {\r\n return <>{fallback}</>;\r\n }\r\n return (\r\n <div\r\n className={`bank-logo-fallback ${className}`}\r\n style={{\r\n width,\r\n height: height || \"auto\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n backgroundColor: \"#f3f4f6\",\r\n borderRadius: \"4px\",\r\n color: \"#6b7280\",\r\n fontSize: \"12px\",\r\n fontWeight: 500,\r\n ...style,\r\n }}\r\n >\r\n {displayName}\r\n </div>\r\n );\r\n }\r\n\r\n // Calculate height if not provided (maintain aspect ratio)\r\n const imgHeight = height || \"auto\";\r\n\r\n // Base styles\r\n const imgStyle: React.CSSProperties = {\r\n width,\r\n height: imgHeight,\r\n objectFit: \"contain\",\r\n ...style,\r\n };\r\n\r\n return (\r\n <img\r\n src={logoSrc}\r\n alt={altText}\r\n className={`bank-logo ${className}`}\r\n style={imgStyle}\r\n loading={loading}\r\n />\r\n );\r\n};\r\n\r\nBankLogo.displayName = \"BankLogo\";\r\n"]}
|