related-ui-components 1.9.9 → 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/lib/module/app.js +42 -40
- package/lib/module/app.js.map +1 -1
- package/lib/module/components/Card/templates/SelaDealCard.js +233 -0
- package/lib/module/components/Card/templates/SelaDealCard.js.map +1 -0
- package/lib/module/index.js +4 -7
- package/lib/module/index.js.map +1 -1
- package/lib/module/theme/ThemeContext.js +1 -1
- package/lib/module/theme/ThemeContext.js.map +1 -1
- package/lib/typescript/src/app.d.ts.map +1 -1
- package/lib/typescript/src/components/Card/templates/SelaDealCard.d.ts +30 -0
- package/lib/typescript/src/components/Card/templates/SelaDealCard.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +1 -0
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/app.tsx +3 -1
- package/src/components/Card/templates/SelaDealCard.tsx +286 -0
- package/src/index.ts +4 -4
- package/src/theme/ThemeContext.tsx +1 -1
package/lib/module/app.js
CHANGED
|
@@ -4,7 +4,7 @@ import React, { useState } from "react";
|
|
|
4
4
|
import { Text } from "react-native";
|
|
5
5
|
import { Popup, ScratchCard, ScratchCardContent } from "./components/index.js";
|
|
6
6
|
import { Ionicons } from "@expo/vector-icons";
|
|
7
|
-
import { useTheme } from "./theme/index.js";
|
|
7
|
+
import { RelatedProvider, useTheme } from "./theme/index.js";
|
|
8
8
|
import { GestureHandlerRootView } from "react-native-gesture-handler";
|
|
9
9
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
10
10
|
const MyScreen = () => {
|
|
@@ -104,48 +104,50 @@ const MyScreen = () => {
|
|
|
104
104
|
}];
|
|
105
105
|
return /*#__PURE__*/_jsx(_Fragment, {
|
|
106
106
|
children: /*#__PURE__*/_jsx(GestureHandlerRootView, {
|
|
107
|
-
children: /*#__PURE__*/_jsx(
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
end: {
|
|
126
|
-
x: 300,
|
|
127
|
-
y: 300
|
|
128
|
-
}
|
|
129
|
-
},
|
|
130
|
-
onScratched: () => alert("Congratulations! You won a prize!"),
|
|
131
|
-
children: /*#__PURE__*/_jsxs(ScratchCardContent, {
|
|
132
|
-
style: {
|
|
133
|
-
backgroundColor: "#FFD700"
|
|
134
|
-
},
|
|
135
|
-
children: [/*#__PURE__*/_jsx(Text, {
|
|
136
|
-
style: {
|
|
137
|
-
fontSize: 24,
|
|
138
|
-
fontWeight: "bold",
|
|
139
|
-
color: "#000"
|
|
107
|
+
children: /*#__PURE__*/_jsx(RelatedProvider, {
|
|
108
|
+
children: /*#__PURE__*/_jsx(Popup, {
|
|
109
|
+
visible: true,
|
|
110
|
+
onClose: () => {},
|
|
111
|
+
children: /*#__PURE__*/_jsx(ScratchCard, {
|
|
112
|
+
backgroundColor: "#8A2BE2",
|
|
113
|
+
text: "Scratch to reveal your prize!",
|
|
114
|
+
textFontColor: "#FFFFFF",
|
|
115
|
+
textFontSize: 18
|
|
116
|
+
// textFont={require("@/assets/fonts/SpaceMono-Regular.ttf")}
|
|
117
|
+
,
|
|
118
|
+
width: 300,
|
|
119
|
+
height: 150,
|
|
120
|
+
gradient: {
|
|
121
|
+
colors: ["#ff0000", "#00ff00", "#0000ff"],
|
|
122
|
+
start: {
|
|
123
|
+
x: 0,
|
|
124
|
+
y: 0
|
|
140
125
|
},
|
|
141
|
-
|
|
142
|
-
|
|
126
|
+
end: {
|
|
127
|
+
x: 300,
|
|
128
|
+
y: 300
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
onScratched: () => alert("Congratulations! You won a prize!"),
|
|
132
|
+
children: /*#__PURE__*/_jsxs(ScratchCardContent, {
|
|
143
133
|
style: {
|
|
144
|
-
|
|
145
|
-
color: "#333"
|
|
134
|
+
backgroundColor: "#FFD700"
|
|
146
135
|
},
|
|
147
|
-
children:
|
|
148
|
-
|
|
136
|
+
children: [/*#__PURE__*/_jsx(Text, {
|
|
137
|
+
style: {
|
|
138
|
+
fontSize: 24,
|
|
139
|
+
fontWeight: "bold",
|
|
140
|
+
color: "#000"
|
|
141
|
+
},
|
|
142
|
+
children: "50% OFF COUPON"
|
|
143
|
+
}), /*#__PURE__*/_jsx(Text, {
|
|
144
|
+
style: {
|
|
145
|
+
marginTop: 8,
|
|
146
|
+
color: "#333"
|
|
147
|
+
},
|
|
148
|
+
children: "Use code: SCRATCH50"
|
|
149
|
+
})]
|
|
150
|
+
})
|
|
149
151
|
})
|
|
150
152
|
})
|
|
151
153
|
})
|
package/lib/module/app.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","Text","Popup","ScratchCard","ScratchCardContent","Ionicons","useTheme","GestureHandlerRootView","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","MyScreen","isFilterVisible","setIsFilterVisible","theme","handleApplyFilters","result","console","log","rewardsData","icon","name","size","color","primary","activeIcon","onPrimary","title","description","isActive","status","statusBackgroundColor","statusTextColor","helper","disabled","text","background","children","visible","onClose","backgroundColor","textFontColor","textFontSize","width","height","gradient","colors","start","x","y","end","onScratched","alert","style","fontSize","fontWeight","marginTop"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAAuBC,IAAI,QAAQ,cAAc;AACjD,SAGEC,KAAK,EACLC,WAAW,EACXC,kBAAkB,QAEb,uBAAc;AAErB,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,QAAQ,QAAQ,kBAAS;
|
|
1
|
+
{"version":3,"names":["React","useState","Text","Popup","ScratchCard","ScratchCardContent","Ionicons","RelatedProvider","useTheme","GestureHandlerRootView","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","MyScreen","isFilterVisible","setIsFilterVisible","theme","handleApplyFilters","result","console","log","rewardsData","icon","name","size","color","primary","activeIcon","onPrimary","title","description","isActive","status","statusBackgroundColor","statusTextColor","helper","disabled","text","background","children","visible","onClose","backgroundColor","textFontColor","textFontSize","width","height","gradient","colors","start","x","y","end","onScratched","alert","style","fontSize","fontWeight","marginTop"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// src/components/SelaDealCard/SelaDealCard.tsx
|
|
4
|
+
import React from "react";
|
|
5
|
+
import { View, Text, StyleSheet } from "react-native";
|
|
6
|
+
import Card from "../Card.js"; // Adjust path to your Card component
|
|
7
|
+
import { useTheme } from "../../../theme/ThemeContext.js"; // Adjust path
|
|
8
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
+
const SelaDealCard = ({
|
|
10
|
+
variant,
|
|
11
|
+
backgroundImage,
|
|
12
|
+
label,
|
|
13
|
+
labelStyle,
|
|
14
|
+
labelContainerStyle,
|
|
15
|
+
providerName,
|
|
16
|
+
providerNameStyle,
|
|
17
|
+
description,
|
|
18
|
+
descriptionStyle,
|
|
19
|
+
price,
|
|
20
|
+
priceStyle,
|
|
21
|
+
priceContainerStyle,
|
|
22
|
+
onPress,
|
|
23
|
+
style,
|
|
24
|
+
width = "100%",
|
|
25
|
+
height = variant === "horizontal" ? 180 : 280,
|
|
26
|
+
// Different default heights
|
|
27
|
+
isRTL: propIsRTL,
|
|
28
|
+
borderRadius = 12,
|
|
29
|
+
// Default based on images
|
|
30
|
+
contentColor,
|
|
31
|
+
labelBackgroundColor,
|
|
32
|
+
labelTextColor,
|
|
33
|
+
priceBackgroundColor,
|
|
34
|
+
priceTextColor
|
|
35
|
+
}) => {
|
|
36
|
+
const {
|
|
37
|
+
theme,
|
|
38
|
+
isRTL: themeIsRTL
|
|
39
|
+
} = useTheme();
|
|
40
|
+
const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
|
|
41
|
+
|
|
42
|
+
// Default color for text directly on the image (e.g., provider name, description)
|
|
43
|
+
// Provider name in images is often yellow, description white.
|
|
44
|
+
// Consumers can override with providerNameStyle/descriptionStyle.
|
|
45
|
+
const mainImageTextColor = contentColor || "#FFFFFF"; // Default to white
|
|
46
|
+
|
|
47
|
+
// --- Label Styles ---
|
|
48
|
+
// Image 1 (Horizontal "Offer"): White background, dark text.
|
|
49
|
+
// Image 2 (Vertical "Booking"): Appears to be a light text on image, no distinct bg.
|
|
50
|
+
// For consistency, let's assume label has a background.
|
|
51
|
+
const actualLabelBgColor = labelBackgroundColor || theme.surface;
|
|
52
|
+
const actualLabelTxtColor = labelTextColor || theme.onSurface;
|
|
53
|
+
const finalLabelContainerStyle = [styles.labelContainerBase, {
|
|
54
|
+
backgroundColor: actualLabelBgColor
|
|
55
|
+
}, labelContainerStyle];
|
|
56
|
+
const finalLabelStyle = [styles.labelTextBase, {
|
|
57
|
+
color: actualLabelTxtColor
|
|
58
|
+
}, labelStyle];
|
|
59
|
+
|
|
60
|
+
// --- Price Container Styles ---
|
|
61
|
+
// Horizontal (Image 1): Bright cyan/teal background, dark text.
|
|
62
|
+
const defaultHorizontalPriceBg = priceBackgroundColor || "#17D4C6";
|
|
63
|
+
const defaultHorizontalPriceText = priceTextColor || "#000000";
|
|
64
|
+
// Vertical (Image 2): Semi-transparent dark background, white text.
|
|
65
|
+
const defaultVerticalPriceBg = priceBackgroundColor || "rgba(0, 0, 0, 0.5)";
|
|
66
|
+
const defaultVerticalPriceText = priceTextColor || "#FFFFFF";
|
|
67
|
+
const actualPriceBgColor = variant === "horizontal" ? defaultHorizontalPriceBg : defaultVerticalPriceBg;
|
|
68
|
+
const actualPriceTxtColor = variant === "horizontal" ? defaultHorizontalPriceText : defaultVerticalPriceText;
|
|
69
|
+
const finalPriceContainerStyle = [styles.priceContainerBase, {
|
|
70
|
+
backgroundColor: actualPriceBgColor
|
|
71
|
+
}, variant === "horizontal" ? styles.priceContainerHorizontal : styles.priceContainerVertical, priceContainerStyle];
|
|
72
|
+
const finalPriceStyle = [styles.priceTextBase, {
|
|
73
|
+
color: actualPriceTxtColor
|
|
74
|
+
}, priceStyle];
|
|
75
|
+
|
|
76
|
+
// --- Text Styles for Content on Image ---
|
|
77
|
+
const providerTextStyle = [styles.providerNameBase,
|
|
78
|
+
// In images, provider name is often yellow. This can be set via providerNameStyle.
|
|
79
|
+
{
|
|
80
|
+
color: mainImageTextColor,
|
|
81
|
+
textAlign: isRTL ? "right" : "left"
|
|
82
|
+
}, providerNameStyle];
|
|
83
|
+
const descriptionTextStyle = [styles.descriptionBase, {
|
|
84
|
+
color: mainImageTextColor,
|
|
85
|
+
textAlign: isRTL ? "right" : "left"
|
|
86
|
+
}, descriptionStyle];
|
|
87
|
+
return /*#__PURE__*/_jsx(Card, {
|
|
88
|
+
onPress: onPress,
|
|
89
|
+
style: [styles.cardBase, {
|
|
90
|
+
borderRadius,
|
|
91
|
+
width,
|
|
92
|
+
height
|
|
93
|
+
}, style],
|
|
94
|
+
backgroundImage: {
|
|
95
|
+
source: backgroundImage,
|
|
96
|
+
resizeMode: "cover"
|
|
97
|
+
},
|
|
98
|
+
children: /*#__PURE__*/_jsxs(View, {
|
|
99
|
+
style: styles.overlayContainer,
|
|
100
|
+
children: [/*#__PURE__*/_jsx(View, {
|
|
101
|
+
style: [styles.topSection,
|
|
102
|
+
// Horizontal: LTR=left, RTL=right
|
|
103
|
+
// Vertical: LTR=right, RTL=left
|
|
104
|
+
{
|
|
105
|
+
alignItems: variant === "horizontal" ? isRTL ? "flex-end" : "flex-start" : isRTL ? "flex-start" : "flex-end"
|
|
106
|
+
}],
|
|
107
|
+
children: label && /*#__PURE__*/_jsx(View, {
|
|
108
|
+
style: finalLabelContainerStyle,
|
|
109
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
110
|
+
style: finalLabelStyle,
|
|
111
|
+
children: label
|
|
112
|
+
})
|
|
113
|
+
})
|
|
114
|
+
}), variant === "horizontal" ? /*#__PURE__*/_jsxs(View, {
|
|
115
|
+
style: styles.bottomContentHorizontal,
|
|
116
|
+
children: [/*#__PURE__*/_jsxs(View, {
|
|
117
|
+
style: styles.textBlockHorizontal,
|
|
118
|
+
children: [providerName && /*#__PURE__*/_jsx(Text, {
|
|
119
|
+
style: providerTextStyle,
|
|
120
|
+
children: providerName
|
|
121
|
+
}), description && /*#__PURE__*/_jsx(Text, {
|
|
122
|
+
style: descriptionTextStyle,
|
|
123
|
+
children: description
|
|
124
|
+
})]
|
|
125
|
+
}), price && /*#__PURE__*/_jsx(View, {
|
|
126
|
+
style: finalPriceContainerStyle,
|
|
127
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
128
|
+
style: finalPriceStyle,
|
|
129
|
+
children: price
|
|
130
|
+
})
|
|
131
|
+
})]
|
|
132
|
+
}) :
|
|
133
|
+
/*#__PURE__*/
|
|
134
|
+
// Vertical Variant
|
|
135
|
+
_jsxs(View, {
|
|
136
|
+
style: styles.bottomContentVertical,
|
|
137
|
+
children: [/*#__PURE__*/_jsxs(View, {
|
|
138
|
+
style: styles.textBlockVertical,
|
|
139
|
+
children: [providerName && /*#__PURE__*/_jsx(Text, {
|
|
140
|
+
style: providerTextStyle,
|
|
141
|
+
children: providerName
|
|
142
|
+
}), description && /*#__PURE__*/_jsx(Text, {
|
|
143
|
+
style: descriptionTextStyle,
|
|
144
|
+
children: description
|
|
145
|
+
})]
|
|
146
|
+
}), price && /*#__PURE__*/_jsx(View, {
|
|
147
|
+
style: finalPriceContainerStyle,
|
|
148
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
149
|
+
style: finalPriceStyle,
|
|
150
|
+
children: price
|
|
151
|
+
})
|
|
152
|
+
})]
|
|
153
|
+
})]
|
|
154
|
+
})
|
|
155
|
+
});
|
|
156
|
+
};
|
|
157
|
+
const styles = StyleSheet.create({
|
|
158
|
+
cardBase: {
|
|
159
|
+
overflow: "hidden",
|
|
160
|
+
// Ensures content respects borderRadius
|
|
161
|
+
position: "relative"
|
|
162
|
+
},
|
|
163
|
+
overlayContainer: {
|
|
164
|
+
flex: 1,
|
|
165
|
+
padding: 16,
|
|
166
|
+
// General padding for content from edges
|
|
167
|
+
justifyContent: "space-between" // Pushes top and bottom sections apart
|
|
168
|
+
// Optional: Add a LinearGradient here for a scrim if text readability is an issue
|
|
169
|
+
},
|
|
170
|
+
topSection: {
|
|
171
|
+
// This view ensures the label is positioned correctly (start/end)
|
|
172
|
+
// It will be at the top due to justifyContent: 'space-between' on overlayContainer
|
|
173
|
+
},
|
|
174
|
+
labelContainerBase: {
|
|
175
|
+
paddingVertical: 6,
|
|
176
|
+
paddingHorizontal: 12,
|
|
177
|
+
borderRadius: 16 // Pill shape
|
|
178
|
+
// alignSelf is determined by parent's alignItems in topSection
|
|
179
|
+
},
|
|
180
|
+
labelTextBase: {
|
|
181
|
+
fontWeight: "600",
|
|
182
|
+
fontSize: 13
|
|
183
|
+
},
|
|
184
|
+
providerNameBase: {
|
|
185
|
+
// Example: Yellow text in images "Altanfeethi", "Riva Jeddah Yacht Club"
|
|
186
|
+
fontSize: 20,
|
|
187
|
+
fontWeight: "bold",
|
|
188
|
+
marginBottom: 2 // Space between provider name and description
|
|
189
|
+
},
|
|
190
|
+
descriptionBase: {
|
|
191
|
+
// Example: White text in images "1 Year Membership", "2 hours Boat Trip"
|
|
192
|
+
fontSize: 14
|
|
193
|
+
},
|
|
194
|
+
priceContainerBase: {
|
|
195
|
+
paddingVertical: 8,
|
|
196
|
+
paddingHorizontal: 16,
|
|
197
|
+
borderRadius: 10 // Rounded corners for the price box
|
|
198
|
+
},
|
|
199
|
+
priceTextBase: {
|
|
200
|
+
fontWeight: "bold",
|
|
201
|
+
fontSize: 16
|
|
202
|
+
},
|
|
203
|
+
// --- Horizontal Variant Layout ---
|
|
204
|
+
bottomContentHorizontal: {
|
|
205
|
+
flexDirection: "row",
|
|
206
|
+
justifyContent: "space-between",
|
|
207
|
+
alignItems: "flex-end" // Aligns text block and price box to their bottom
|
|
208
|
+
},
|
|
209
|
+
textBlockHorizontal: {
|
|
210
|
+
flex: 1,
|
|
211
|
+
// Allows text to take available space, pushing price to the side
|
|
212
|
+
marginRight: 10 // Space between text content and price box
|
|
213
|
+
},
|
|
214
|
+
priceContainerHorizontal: {
|
|
215
|
+
// Specific styling for horizontal price box if needed (e.g., fixed width)
|
|
216
|
+
// Default is to wrap content.
|
|
217
|
+
},
|
|
218
|
+
// --- Vertical Variant Layout ---
|
|
219
|
+
bottomContentVertical: {
|
|
220
|
+
flexDirection: "column" // Stacks text block and price box vertically
|
|
221
|
+
},
|
|
222
|
+
textBlockVertical: {
|
|
223
|
+
marginBottom: 12 // Space between text content and price box
|
|
224
|
+
// Text inside will align start/end based on isRTL and individual text styles
|
|
225
|
+
},
|
|
226
|
+
priceContainerVertical: {
|
|
227
|
+
alignSelf: "stretch",
|
|
228
|
+
// Makes the price box take the full width
|
|
229
|
+
alignItems: "center" // Centers the price text within the wide box
|
|
230
|
+
}
|
|
231
|
+
});
|
|
232
|
+
export default SelaDealCard;
|
|
233
|
+
//# sourceMappingURL=SelaDealCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","View","Text","StyleSheet","Card","useTheme","jsx","_jsx","jsxs","_jsxs","SelaDealCard","variant","backgroundImage","label","labelStyle","labelContainerStyle","providerName","providerNameStyle","description","descriptionStyle","price","priceStyle","priceContainerStyle","onPress","style","width","height","isRTL","propIsRTL","borderRadius","contentColor","labelBackgroundColor","labelTextColor","priceBackgroundColor","priceTextColor","theme","themeIsRTL","undefined","mainImageTextColor","actualLabelBgColor","surface","actualLabelTxtColor","onSurface","finalLabelContainerStyle","styles","labelContainerBase","backgroundColor","finalLabelStyle","labelTextBase","color","defaultHorizontalPriceBg","defaultHorizontalPriceText","defaultVerticalPriceBg","defaultVerticalPriceText","actualPriceBgColor","actualPriceTxtColor","finalPriceContainerStyle","priceContainerBase","priceContainerHorizontal","priceContainerVertical","finalPriceStyle","priceTextBase","providerTextStyle","providerNameBase","textAlign","descriptionTextStyle","descriptionBase","cardBase","source","resizeMode","children","overlayContainer","topSection","alignItems","bottomContentHorizontal","textBlockHorizontal","bottomContentVertical","textBlockVertical","create","overflow","position","flex","padding","justifyContent","paddingVertical","paddingHorizontal","fontWeight","fontSize","marginBottom","flexDirection","marginRight","alignSelf"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/SelaDealCard.tsx"],"mappings":"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","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
// registerRootComponent(App);
|
|
9
|
-
|
|
3
|
+
import { registerRootComponent } from 'expo';
|
|
4
|
+
import "react-native-reanimated";
|
|
5
|
+
import App from "./app.js";
|
|
6
|
+
registerRootComponent(App);
|
|
10
7
|
export * from "./theme/index.js";
|
|
11
8
|
export * from "./components/index.js";
|
|
12
9
|
//# sourceMappingURL=index.js.map
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"..\\..\\src","sources":["index.ts"],"mappings":";;AAAA;
|
|
1
|
+
{"version":3,"names":["registerRootComponent","App"],"sourceRoot":"..\\..\\src","sources":["index.ts"],"mappings":";;AAAA,SAASA,qBAAqB,QAAQ,MAAM;AAC5C,OAAO,yBAAyB;AAGhC,OAAOC,GAAG,MAAM,UAAO;AAEvBD,qBAAqB,CAACC,GAAG,CAAC;AAE1B,cAAc,kBAAS;AACvB,cAAc,uBAAc","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","createContext","useContext","useState","I18nManager","useColorScheme","lightTheme","darkTheme","jsx","_jsx","ThemeContext","theme","isRTL","isDark","toggleTheme","RelatedProvider","children","customLightTheme","customDarkTheme","dark","forceRTL","setIsDark","currentIsRTL","themes","setThemes","light","prev","currentTheme","contextValue","Provider","value","useTheme"],"sourceRoot":"..\\..\\..\\src","sources":["theme/ThemeContext.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IACVC,aAAa,EACbC,UAAU,EACVC,QAAQ,QAGH,OAAO;AAEd,SAASC,WAAW,EAAEC,cAAc,QAAQ,cAAc;AAC1D,SAASC,UAAU,EAAaC,SAAS,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQ5D,OAAO,MAAMC,YAAY,gBAAGT,aAAa,CAAiB;EACxDU,KAAK,EAAEL,UAAU;EACjBM,KAAK,EAAER,WAAW,CAACQ,KAAK;EACxBC,MAAM,
|
|
1
|
+
{"version":3,"names":["React","createContext","useContext","useState","I18nManager","useColorScheme","lightTheme","darkTheme","jsx","_jsx","ThemeContext","theme","isRTL","isDark","toggleTheme","RelatedProvider","children","customLightTheme","customDarkTheme","dark","forceRTL","setIsDark","currentIsRTL","themes","setThemes","light","prev","currentTheme","contextValue","Provider","value","useTheme"],"sourceRoot":"..\\..\\..\\src","sources":["theme/ThemeContext.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IACVC,aAAa,EACbC,UAAU,EACVC,QAAQ,QAGH,OAAO;AAEd,SAASC,WAAW,EAAEC,cAAc,QAAQ,cAAc;AAC1D,SAASC,UAAU,EAAaC,SAAS,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQ5D,OAAO,MAAMC,YAAY,gBAAGT,aAAa,CAAiB;EACxDU,KAAK,EAAEL,UAAU;EACjBM,KAAK,EAAER,WAAW,CAACQ,KAAK;EACxBC,MAAM,EAAE,KAAK;EACbC,WAAW,EAAEA,CAAA,KAAM,CAAC;AACtB,CAAC,CAAC;;AAEF;;AASA;AACA,OAAO,MAAMC,eAA+C,GAAGA,CAAC;EAC9DC,QAAQ;EACRC,gBAAgB;EAChBC,eAAe;EACfC,IAAI;EACJC;AACF,CAAC,KAAK;EACJ,MAAM,CAACP,MAAM,EAAEQ,SAAS,CAAC,GAAGlB,QAAQ,CAClCgB,IAAI,IAAId,cAAc,CAAC,CAAC,KAAK,MAC/B,CAAC;EACD,MAAMiB,YAAY,GAAG,OAAOF,QAAQ,KAAK,SAAS,GAAGA,QAAQ,GAAG,KAAK;;EAErE;EACA,MAAM,CAACG,MAAM,EAAEC,SAAS,CAAC,GAAGrB,QAAQ,CAAC;IACnCsB,KAAK,EAAE;MAAE,GAAGnB,UAAU;MAAE,GAAGW;IAAiB,CAAc;IAC1DE,IAAI,EAAE;MAAE,GAAGZ,SAAS;MAAE,GAAGW;IAAgB;EAC3C,CAAC,CAAC;EAEF,MAAMJ,WAAW,GAAGA,CAAA,KAAMO,SAAS,CAAEK,IAAI,IAAK,CAACA,IAAI,CAAC;EAEpD,MAAMC,YAAY,GAAGd,MAAM,GAAGU,MAAM,CAACJ,IAAI,GAAGI,MAAM,CAACE,KAAK;EAExD,MAAMG,YAA4B,GAAG;IACnCjB,KAAK,EAAEgB,YAAY;IACnBf,KAAK,EAAEU,YAAY;IACnBT,MAAM;IACNC;EACF,CAAC;EAED,oBACEL,IAAA,CAACC,YAAY,CAACmB,QAAQ;IAACC,KAAK,EAAEF,YAAa;IAAAZ,QAAA,EACxCA;EAAQ,CACY,CAAC;AAE5B,CAAC;;AAED;AACA,OAAO,MAAMe,QAAQ,GAAGA,CAAA,KAAM7B,UAAU,CAACQ,YAAY,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAgBxC,QAAA,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAgBxC,QAAA,MAAM,QAAQ,yBA8Gb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ImageSourcePropType, StyleProp, ViewStyle, TextStyle, DimensionValue } from "react-native";
|
|
3
|
+
interface SelaDealCardProps {
|
|
4
|
+
variant: "horizontal" | "vertical";
|
|
5
|
+
backgroundImage: ImageSourcePropType;
|
|
6
|
+
label?: string;
|
|
7
|
+
labelStyle?: StyleProp<TextStyle>;
|
|
8
|
+
labelContainerStyle?: StyleProp<ViewStyle>;
|
|
9
|
+
providerName?: string;
|
|
10
|
+
providerNameStyle?: StyleProp<TextStyle>;
|
|
11
|
+
description?: string;
|
|
12
|
+
descriptionStyle?: StyleProp<TextStyle>;
|
|
13
|
+
price?: string;
|
|
14
|
+
priceStyle?: StyleProp<TextStyle>;
|
|
15
|
+
priceContainerStyle?: StyleProp<ViewStyle>;
|
|
16
|
+
onPress?: () => void;
|
|
17
|
+
style?: StyleProp<ViewStyle>;
|
|
18
|
+
width?: DimensionValue;
|
|
19
|
+
height?: DimensionValue;
|
|
20
|
+
isRTL?: boolean;
|
|
21
|
+
borderRadius?: number;
|
|
22
|
+
contentColor?: string;
|
|
23
|
+
labelBackgroundColor?: string;
|
|
24
|
+
labelTextColor?: string;
|
|
25
|
+
priceBackgroundColor?: string;
|
|
26
|
+
priceTextColor?: string;
|
|
27
|
+
}
|
|
28
|
+
declare const SelaDealCard: React.FC<SelaDealCardProps>;
|
|
29
|
+
export default SelaDealCard;
|
|
30
|
+
//# sourceMappingURL=SelaDealCard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,mBAAmB,EACnB,SAAS,EACT,SAAS,EAGT,SAAS,EACT,cAAc,EAEf,MAAM,cAAc,CAAC;AAItB,UAAU,iBAAiB;IACzB,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,eAAe,EAAE,mBAAmB,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0K7C,CAAC;AA0EF,eAAe,YAAY,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAC;AAOjC,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAC"}
|
package/package.json
CHANGED
package/src/app.tsx
CHANGED
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
} from "./components";
|
|
11
11
|
import BRANDS from "./constants/BRANDS";
|
|
12
12
|
import { Ionicons } from "@expo/vector-icons";
|
|
13
|
-
import { useTheme } from "./theme";
|
|
13
|
+
import { RelatedProvider, useTheme } from "./theme";
|
|
14
14
|
import RedeemedVoucherSheet from "./components/RedeemedVoucher/RedeemedVoucherSheet";
|
|
15
15
|
import { GestureHandlerRootView } from "react-native-gesture-handler";
|
|
16
16
|
|
|
@@ -93,6 +93,7 @@ const MyScreen = () => {
|
|
|
93
93
|
return (
|
|
94
94
|
<>
|
|
95
95
|
<GestureHandlerRootView>
|
|
96
|
+
<RelatedProvider>
|
|
96
97
|
<Popup visible={true} onClose={()=>{}}>
|
|
97
98
|
<ScratchCard
|
|
98
99
|
backgroundColor="#8A2BE2"
|
|
@@ -119,6 +120,7 @@ const MyScreen = () => {
|
|
|
119
120
|
</ScratchCardContent>
|
|
120
121
|
</ScratchCard>
|
|
121
122
|
</Popup>
|
|
123
|
+
</RelatedProvider>
|
|
122
124
|
</GestureHandlerRootView>
|
|
123
125
|
</>
|
|
124
126
|
);
|
|
@@ -0,0 +1,286 @@
|
|
|
1
|
+
// src/components/SelaDealCard/SelaDealCard.tsx
|
|
2
|
+
import React from "react";
|
|
3
|
+
import {
|
|
4
|
+
ImageSourcePropType,
|
|
5
|
+
StyleProp,
|
|
6
|
+
ViewStyle,
|
|
7
|
+
View,
|
|
8
|
+
Text,
|
|
9
|
+
TextStyle,
|
|
10
|
+
DimensionValue,
|
|
11
|
+
StyleSheet,
|
|
12
|
+
} from "react-native";
|
|
13
|
+
import Card from "../Card"; // Adjust path to your Card component
|
|
14
|
+
import { useTheme } from "../../../theme/ThemeContext"; // Adjust path
|
|
15
|
+
|
|
16
|
+
interface SelaDealCardProps {
|
|
17
|
+
variant: "horizontal" | "vertical";
|
|
18
|
+
backgroundImage: ImageSourcePropType;
|
|
19
|
+
label?: string;
|
|
20
|
+
labelStyle?: StyleProp<TextStyle>;
|
|
21
|
+
labelContainerStyle?: StyleProp<ViewStyle>;
|
|
22
|
+
providerName?: string;
|
|
23
|
+
providerNameStyle?: StyleProp<TextStyle>;
|
|
24
|
+
description?: string;
|
|
25
|
+
descriptionStyle?: StyleProp<TextStyle>;
|
|
26
|
+
price?: string;
|
|
27
|
+
priceStyle?: StyleProp<TextStyle>;
|
|
28
|
+
priceContainerStyle?: StyleProp<ViewStyle>;
|
|
29
|
+
onPress?: () => void;
|
|
30
|
+
style?: StyleProp<ViewStyle>; // Overall card style
|
|
31
|
+
width?: DimensionValue;
|
|
32
|
+
height?: DimensionValue;
|
|
33
|
+
isRTL?: boolean;
|
|
34
|
+
borderRadius?: number;
|
|
35
|
+
contentColor?: string; // For text like providerName, description on the image
|
|
36
|
+
labelBackgroundColor?: string;
|
|
37
|
+
labelTextColor?: string;
|
|
38
|
+
priceBackgroundColor?: string;
|
|
39
|
+
priceTextColor?: string;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const SelaDealCard: React.FC<SelaDealCardProps> = ({
|
|
43
|
+
variant,
|
|
44
|
+
backgroundImage,
|
|
45
|
+
label,
|
|
46
|
+
labelStyle,
|
|
47
|
+
labelContainerStyle,
|
|
48
|
+
providerName,
|
|
49
|
+
providerNameStyle,
|
|
50
|
+
description,
|
|
51
|
+
descriptionStyle,
|
|
52
|
+
price,
|
|
53
|
+
priceStyle,
|
|
54
|
+
priceContainerStyle,
|
|
55
|
+
onPress,
|
|
56
|
+
style,
|
|
57
|
+
width = "100%",
|
|
58
|
+
height = variant === "horizontal" ? 180 : 280, // Different default heights
|
|
59
|
+
isRTL: propIsRTL,
|
|
60
|
+
borderRadius = 12, // Default based on images
|
|
61
|
+
contentColor,
|
|
62
|
+
labelBackgroundColor,
|
|
63
|
+
labelTextColor,
|
|
64
|
+
priceBackgroundColor,
|
|
65
|
+
priceTextColor,
|
|
66
|
+
}) => {
|
|
67
|
+
const { theme, isRTL: themeIsRTL } = useTheme();
|
|
68
|
+
const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
|
|
69
|
+
|
|
70
|
+
// Default color for text directly on the image (e.g., provider name, description)
|
|
71
|
+
// Provider name in images is often yellow, description white.
|
|
72
|
+
// Consumers can override with providerNameStyle/descriptionStyle.
|
|
73
|
+
const mainImageTextColor = contentColor || "#FFFFFF"; // Default to white
|
|
74
|
+
|
|
75
|
+
// --- Label Styles ---
|
|
76
|
+
// Image 1 (Horizontal "Offer"): White background, dark text.
|
|
77
|
+
// Image 2 (Vertical "Booking"): Appears to be a light text on image, no distinct bg.
|
|
78
|
+
// For consistency, let's assume label has a background.
|
|
79
|
+
const actualLabelBgColor = labelBackgroundColor || theme.surface;
|
|
80
|
+
const actualLabelTxtColor = labelTextColor || theme.onSurface;
|
|
81
|
+
|
|
82
|
+
const finalLabelContainerStyle: StyleProp<ViewStyle> = [
|
|
83
|
+
styles.labelContainerBase,
|
|
84
|
+
{ backgroundColor: actualLabelBgColor },
|
|
85
|
+
labelContainerStyle,
|
|
86
|
+
];
|
|
87
|
+
const finalLabelStyle: StyleProp<TextStyle> = [
|
|
88
|
+
styles.labelTextBase,
|
|
89
|
+
{ color: actualLabelTxtColor },
|
|
90
|
+
labelStyle,
|
|
91
|
+
];
|
|
92
|
+
|
|
93
|
+
// --- Price Container Styles ---
|
|
94
|
+
// Horizontal (Image 1): Bright cyan/teal background, dark text.
|
|
95
|
+
const defaultHorizontalPriceBg = priceBackgroundColor || "#17D4C6";
|
|
96
|
+
const defaultHorizontalPriceText = priceTextColor || "#000000";
|
|
97
|
+
// Vertical (Image 2): Semi-transparent dark background, white text.
|
|
98
|
+
const defaultVerticalPriceBg =
|
|
99
|
+
priceBackgroundColor || "rgba(0, 0, 0, 0.5)";
|
|
100
|
+
const defaultVerticalPriceText = priceTextColor || "#FFFFFF";
|
|
101
|
+
|
|
102
|
+
const actualPriceBgColor =
|
|
103
|
+
variant === "horizontal"
|
|
104
|
+
? defaultHorizontalPriceBg
|
|
105
|
+
: defaultVerticalPriceBg;
|
|
106
|
+
const actualPriceTxtColor =
|
|
107
|
+
variant === "horizontal"
|
|
108
|
+
? defaultHorizontalPriceText
|
|
109
|
+
: defaultVerticalPriceText;
|
|
110
|
+
|
|
111
|
+
const finalPriceContainerStyle: StyleProp<ViewStyle> = [
|
|
112
|
+
styles.priceContainerBase,
|
|
113
|
+
{ backgroundColor: actualPriceBgColor },
|
|
114
|
+
variant === "horizontal"
|
|
115
|
+
? styles.priceContainerHorizontal
|
|
116
|
+
: styles.priceContainerVertical,
|
|
117
|
+
priceContainerStyle,
|
|
118
|
+
];
|
|
119
|
+
const finalPriceStyle: StyleProp<TextStyle> = [
|
|
120
|
+
styles.priceTextBase,
|
|
121
|
+
{ color: actualPriceTxtColor },
|
|
122
|
+
priceStyle,
|
|
123
|
+
];
|
|
124
|
+
|
|
125
|
+
// --- Text Styles for Content on Image ---
|
|
126
|
+
const providerTextStyle: StyleProp<TextStyle> = [
|
|
127
|
+
styles.providerNameBase,
|
|
128
|
+
// In images, provider name is often yellow. This can be set via providerNameStyle.
|
|
129
|
+
{ color: mainImageTextColor, textAlign: isRTL ? "right" : "left" },
|
|
130
|
+
providerNameStyle,
|
|
131
|
+
];
|
|
132
|
+
|
|
133
|
+
const descriptionTextStyle: StyleProp<TextStyle> = [
|
|
134
|
+
styles.descriptionBase,
|
|
135
|
+
{ color: mainImageTextColor, textAlign: isRTL ? "right" : "left" },
|
|
136
|
+
descriptionStyle,
|
|
137
|
+
];
|
|
138
|
+
|
|
139
|
+
return (
|
|
140
|
+
<Card
|
|
141
|
+
onPress={onPress}
|
|
142
|
+
style={[styles.cardBase, { borderRadius, width, height }, style]}
|
|
143
|
+
backgroundImage={{
|
|
144
|
+
source: backgroundImage,
|
|
145
|
+
resizeMode: "cover",
|
|
146
|
+
}}
|
|
147
|
+
>
|
|
148
|
+
<View style={styles.overlayContainer}>
|
|
149
|
+
{/* Top Section (for Label) */}
|
|
150
|
+
<View
|
|
151
|
+
style={[
|
|
152
|
+
styles.topSection,
|
|
153
|
+
// Horizontal: LTR=left, RTL=right
|
|
154
|
+
// Vertical: LTR=right, RTL=left
|
|
155
|
+
{
|
|
156
|
+
alignItems:
|
|
157
|
+
variant === "horizontal"
|
|
158
|
+
? isRTL
|
|
159
|
+
? "flex-end"
|
|
160
|
+
: "flex-start"
|
|
161
|
+
: isRTL
|
|
162
|
+
? "flex-start"
|
|
163
|
+
: "flex-end",
|
|
164
|
+
},
|
|
165
|
+
]}
|
|
166
|
+
>
|
|
167
|
+
{label && (
|
|
168
|
+
<View style={finalLabelContainerStyle}>
|
|
169
|
+
<Text style={finalLabelStyle}>{label}</Text>
|
|
170
|
+
</View>
|
|
171
|
+
)}
|
|
172
|
+
</View>
|
|
173
|
+
|
|
174
|
+
{/* Bottom Section (Provider, Description, Price) */}
|
|
175
|
+
{variant === "horizontal" ? (
|
|
176
|
+
<View style={styles.bottomContentHorizontal}>
|
|
177
|
+
<View style={styles.textBlockHorizontal}>
|
|
178
|
+
{providerName && (
|
|
179
|
+
<Text style={providerTextStyle}>{providerName}</Text>
|
|
180
|
+
)}
|
|
181
|
+
{description && (
|
|
182
|
+
<Text style={descriptionTextStyle}>{description}</Text>
|
|
183
|
+
)}
|
|
184
|
+
</View>
|
|
185
|
+
{price && (
|
|
186
|
+
<View style={finalPriceContainerStyle}>
|
|
187
|
+
<Text style={finalPriceStyle}>{price}</Text>
|
|
188
|
+
</View>
|
|
189
|
+
)}
|
|
190
|
+
</View>
|
|
191
|
+
) : (
|
|
192
|
+
// Vertical Variant
|
|
193
|
+
<View style={styles.bottomContentVertical}>
|
|
194
|
+
<View style={styles.textBlockVertical}>
|
|
195
|
+
{providerName && (
|
|
196
|
+
<Text style={providerTextStyle}>{providerName}</Text>
|
|
197
|
+
)}
|
|
198
|
+
{description && (
|
|
199
|
+
<Text style={descriptionTextStyle}>{description}</Text>
|
|
200
|
+
)}
|
|
201
|
+
</View>
|
|
202
|
+
{price && (
|
|
203
|
+
<View style={finalPriceContainerStyle}>
|
|
204
|
+
<Text style={finalPriceStyle}>{price}</Text>
|
|
205
|
+
</View>
|
|
206
|
+
)}
|
|
207
|
+
</View>
|
|
208
|
+
)}
|
|
209
|
+
</View>
|
|
210
|
+
</Card>
|
|
211
|
+
);
|
|
212
|
+
};
|
|
213
|
+
|
|
214
|
+
const styles = StyleSheet.create({
|
|
215
|
+
cardBase: {
|
|
216
|
+
overflow: "hidden", // Ensures content respects borderRadius
|
|
217
|
+
position: "relative",
|
|
218
|
+
},
|
|
219
|
+
overlayContainer: {
|
|
220
|
+
flex: 1,
|
|
221
|
+
padding: 16, // General padding for content from edges
|
|
222
|
+
justifyContent: "space-between", // Pushes top and bottom sections apart
|
|
223
|
+
// Optional: Add a LinearGradient here for a scrim if text readability is an issue
|
|
224
|
+
},
|
|
225
|
+
topSection: {
|
|
226
|
+
// This view ensures the label is positioned correctly (start/end)
|
|
227
|
+
// It will be at the top due to justifyContent: 'space-between' on overlayContainer
|
|
228
|
+
},
|
|
229
|
+
labelContainerBase: {
|
|
230
|
+
paddingVertical: 6,
|
|
231
|
+
paddingHorizontal: 12,
|
|
232
|
+
borderRadius: 16, // Pill shape
|
|
233
|
+
// alignSelf is determined by parent's alignItems in topSection
|
|
234
|
+
},
|
|
235
|
+
labelTextBase: {
|
|
236
|
+
fontWeight: "600",
|
|
237
|
+
fontSize: 13,
|
|
238
|
+
},
|
|
239
|
+
providerNameBase: {
|
|
240
|
+
// Example: Yellow text in images "Altanfeethi", "Riva Jeddah Yacht Club"
|
|
241
|
+
fontSize: 20,
|
|
242
|
+
fontWeight: "bold",
|
|
243
|
+
marginBottom: 2, // Space between provider name and description
|
|
244
|
+
},
|
|
245
|
+
descriptionBase: {
|
|
246
|
+
// Example: White text in images "1 Year Membership", "2 hours Boat Trip"
|
|
247
|
+
fontSize: 14,
|
|
248
|
+
},
|
|
249
|
+
priceContainerBase: {
|
|
250
|
+
paddingVertical: 8,
|
|
251
|
+
paddingHorizontal: 16,
|
|
252
|
+
borderRadius: 10, // Rounded corners for the price box
|
|
253
|
+
},
|
|
254
|
+
priceTextBase: {
|
|
255
|
+
fontWeight: "bold",
|
|
256
|
+
fontSize: 16,
|
|
257
|
+
},
|
|
258
|
+
// --- Horizontal Variant Layout ---
|
|
259
|
+
bottomContentHorizontal: {
|
|
260
|
+
flexDirection: "row",
|
|
261
|
+
justifyContent: "space-between",
|
|
262
|
+
alignItems: "flex-end", // Aligns text block and price box to their bottom
|
|
263
|
+
},
|
|
264
|
+
textBlockHorizontal: {
|
|
265
|
+
flex: 1, // Allows text to take available space, pushing price to the side
|
|
266
|
+
marginRight: 10, // Space between text content and price box
|
|
267
|
+
},
|
|
268
|
+
priceContainerHorizontal: {
|
|
269
|
+
// Specific styling for horizontal price box if needed (e.g., fixed width)
|
|
270
|
+
// Default is to wrap content.
|
|
271
|
+
},
|
|
272
|
+
// --- Vertical Variant Layout ---
|
|
273
|
+
bottomContentVertical: {
|
|
274
|
+
flexDirection: "column", // Stacks text block and price box vertically
|
|
275
|
+
},
|
|
276
|
+
textBlockVertical: {
|
|
277
|
+
marginBottom: 12, // Space between text content and price box
|
|
278
|
+
// Text inside will align start/end based on isRTL and individual text styles
|
|
279
|
+
},
|
|
280
|
+
priceContainerVertical: {
|
|
281
|
+
alignSelf: "stretch", // Makes the price box take the full width
|
|
282
|
+
alignItems: "center", // Centers the price text within the wide box
|
|
283
|
+
},
|
|
284
|
+
});
|
|
285
|
+
|
|
286
|
+
export default SelaDealCard;
|
package/src/index.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { registerRootComponent } from 'expo';
|
|
2
|
+
import "react-native-reanimated";
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
import App from "./app";
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
registerRootComponent(App);
|
|
8
8
|
|
|
9
9
|
export * from "./theme"
|
|
10
10
|
export * from "./components";
|