rn-vs-lb 1.0.52 → 1.0.54

package/dist/components/bottomsheet/DefaultSheet.js

@@ -0,0 +1,65 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var bottom_sheet_1 = __importStar(require("@gorhom/bottom-sheet"));
+var theme_1 = require("../../constants/theme");
+var SheetLong = function (_a) {
+    var sheetRef = _a.sheetRef, _b = _a.snapPoints, snapPoints = _b === void 0 ? ['50%'] : _b, onClose = _a.onClose, children = _a.children;
+    return (react_1.default.createElement(bottom_sheet_1.default, { ref: sheetRef, index: -1, snapPoints: snapPoints, enableDynamicSizing: false, enablePanDownToClose: true, onClose: onClose, handleStyle: [styles.defaultHandle], handleIndicatorStyle: [styles.defaultHandleIndicator], backgroundStyle: [styles.defaultBackground], backdropComponent: function (props) { return (react_1.default.createElement(bottom_sheet_1.BottomSheetBackdrop, __assign({}, props, { disappearsOnIndex: -1, onPress: onClose }))); } },
+        react_1.default.createElement(bottom_sheet_1.BottomSheetScrollView, { contentContainerStyle: styles.container }, children)));
+};
+var styles = react_native_1.StyleSheet.create({
+    container: {
+        padding: 16,
+        backgroundColor: theme_1.COLORS.white,
+    },
+    defaultHandle: {
+        top: 0,
+    },
+    defaultHandleIndicator: {
+        backgroundColor: theme_1.COLORS.border,
+        width: 92,
+    },
+    defaultBackground: {
+        backgroundColor: theme_1.COLORS.card,
+    },
+});
+exports.default = SheetLong;

package/dist/components/bottomsheet/DefaultSheetLong.js

@@ -0,0 +1,66 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var bottom_sheet_1 = __importStar(require("@gorhom/bottom-sheet"));
+var theme_1 = require("../../constants/theme");
+var Sheet = function (_a) {
+    var sheetRef = _a.sheetRef, _b = _a.snapPoints, snapPoints = _b === void 0 ? ['50%'] : _b, onClose = _a.onClose, children = _a.children;
+    return (react_1.default.createElement(bottom_sheet_1.default, { ref: sheetRef, index: -1, snapPoints: snapPoints, enablePanDownToClose: true, enableContentPanningGesture: true, animateOnMount: true, animationConfigs: {
+            duration: 250,
+        }, onClose: onClose, handleStyle: [styles.defaultHandle], handleIndicatorStyle: [styles.defaultHandleIndicator], backgroundStyle: [styles.defaultBackground], backdropComponent: function (props) { return (react_1.default.createElement(bottom_sheet_1.BottomSheetBackdrop, __assign({}, props, { disappearsOnIndex: -1, onPress: onClose }))); } }, children));
+};
+var styles = react_native_1.StyleSheet.create({
+    container: {
+        padding: 16,
+        backgroundColor: theme_1.COLORS.white,
+    },
+    defaultHandle: {
+        top: 0,
+    },
+    defaultHandleIndicator: {
+        backgroundColor: theme_1.COLORS.border,
+        width: 92,
+    },
+    defaultBackground: {
+        backgroundColor: theme_1.COLORS.card,
+    },
+});
+exports.default = Sheet;

package/dist/components/bottomsheet/PostOptionSheet copy.js

@@ -0,0 +1,67 @@
+"use strict";
+// import React, { FC, useMemo } from "react";
+// import { StyleSheet, View, Text, Image, TouchableOpacity, Dimensions } from "react-native";
+// import { GestureHandlerRootView } from 'react-native-gesture-handler';
+// import BottomSheet, { BottomSheetBackdrop } from "@gorhom/bottom-sheet";
+// import { GlobalStyleSheet } from "../../constants/styleSheet";
+// import { COLORS, IMAGES } from "../../constants/theme";
+// import { BottomSheetMethods } from "@gorhom/bottom-sheet/lib/typescript/types";
+// interface PostOptionSheetProps {
+//     sheetRef: React.RefObject<BottomSheetMethods>;
+//     onClose: () => void;
+// }
+// const PostOptionSheet: FC<PostOptionSheetProps> = ({ sheetRef, onClose }) => {
+//     const screenHeight = Dimensions.get("window").height;
+//     // Вычисляем snapPoints с минимальным значением 10% для первого рендера
+//     const snapPoints = useMemo(() => {
+//         const percentage = (180 / screenHeight) * 100;
+//         // const percentage = 100;
+//         return [`${Math.max(percentage, 10)}%`];
+//     }, [screenHeight]);
+//     return (
+//         // <GestureHandlerRootView style={styles.container}>
+//             <BottomSheet
+//                 ref={sheetRef}
+//                 index={-1}
+//                 snapPoints={snapPoints}
+//                 enableDynamicSizing={false}
+//                 enablePanDownToClose={true}
+//                 onClose={onClose}
+//                 handleStyle={{ top: 0 }}
+//                 handleIndicatorStyle={{ backgroundColor: COLORS.border, width: 92 }}
+//                 backgroundStyle={{ backgroundColor: COLORS.card }}
+//                 backdropComponent={(props) => (
+//                     <BottomSheetBackdrop {...props} disappearsOnIndex={-1} onPress={onClose}/>
+//                 )}
+//             >
+//                 <View style={GlobalStyleSheet.container}>
+//                     <TouchableOpacity style={GlobalStyleSheet.TouchableOpacity}>
+//                         <Image style={GlobalStyleSheet.image} source={IMAGES.info} />
+//                         <Text style={GlobalStyleSheet.text}>Report</Text>
+//                     </TouchableOpacity>
+//                     <TouchableOpacity style={GlobalStyleSheet.TouchableOpacity}>
+//                         <Image style={[GlobalStyleSheet.image, { tintColor: COLORS.title }]} source={IMAGES.share2} />
+//                         <Text style={[GlobalStyleSheet.text, { color: COLORS.title }]}>Share</Text>
+//                     </TouchableOpacity>
+//                     <TouchableOpacity style={GlobalStyleSheet.TouchableOpacity}>
+//                         <Image style={[GlobalStyleSheet.image, { tintColor: COLORS.title }]} source={IMAGES.copylink} />
+//                         <Text style={[GlobalStyleSheet.text, { color: COLORS.title }]}>Copy link</Text>
+//                     </TouchableOpacity>
+//                     <TouchableOpacity style={GlobalStyleSheet.TouchableOpacity}>
+//                         <Image style={[GlobalStyleSheet.image, { tintColor: COLORS.title }]} source={IMAGES.close} />
+//                         <Text style={[GlobalStyleSheet.text, { color: COLORS.title }]}>Hide post</Text>
+//                     </TouchableOpacity>
+//                 </View>
+//             </BottomSheet>
+//         // </GestureHandlerRootView>
+//     );
+// };
+// const styles = StyleSheet.create({
+//     container: {
+//         flex: 1,
+//     },
+//     bottomSheetBack: {
+//         top: -1000,
+//     }
+// });
+// export default PostOptionSheet;

package/dist/components/bottomsheet/PostOptionSheet.js

@@ -0,0 +1,116 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var bottom_sheet_1 = __importStar(require("@gorhom/bottom-sheet"));
+var theme_1 = require("../../constants/theme");
+var listItem_1 = require("../listItem");
+var PostOptionSheet = function (_a) {
+    var sheetRef = _a.sheetRef, onClose = _a.onClose;
+    var menuItems = [
+        { icon: 'exclamation-circle', label: 'Manage VK ID', subLabel: 'Account protection recommendations' },
+        { icon: 'bookmark', label: 'Bookmarks' },
+        { icon: 'folder-o', label: 'Files' },
+        { icon: 'money', label: 'VK Pay' },
+        { icon: 'crosshairs', label: 'Ads' },
+        { icon: 'support', label: 'Support' },
+        { icon: 'cog', label: 'Settings' },
+        { icon: 'plus-square', label: 'Add account' },
+        { icon: 'sign-in', label: 'Sign in with QR code' },
+    ];
+    return (react_1.default.createElement(bottom_sheet_1.default, { ref: sheetRef, index: -1, snapPoints: ['70%'], enableDynamicSizing: false, enablePanDownToClose: true, onClose: onClose, handleStyle: { top: 0 }, handleIndicatorStyle: { backgroundColor: theme_1.COLORS.border, width: 92 }, backgroundStyle: { backgroundColor: theme_1.COLORS.card }, backdropComponent: function (props) { return (react_1.default.createElement(bottom_sheet_1.BottomSheetBackdrop, __assign({}, props, { disappearsOnIndex: -1, onPress: onClose }))); } },
+        react_1.default.createElement(bottom_sheet_1.BottomSheetScrollView, { contentContainerStyle: styles.container }, menuItems.map(function (item, index) { return (react_1.default.createElement(listItem_1.ListItem, __assign({ key: index }, item, { hideArrow: true, hideBottomLine: true }))); }))));
+};
+var styles = react_native_1.StyleSheet.create({
+    container: {
+        padding: 16,
+        backgroundColor: '#fff',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 16,
+    },
+    headerTitle: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        flex: 1,
+    },
+    profileImage: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+    },
+    gridContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-around',
+        marginBottom: 20,
+    },
+    menuItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 16,
+        borderBottomWidth: 1,
+        borderBottomColor: theme_1.COLORS.background,
+    },
+    menuItemLast: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 16,
+    },
+    iconContainer: {
+        width: 40,
+        alignItems: 'center',
+    },
+    textContainer: {
+        flex: 1,
+        paddingLeft: 8,
+    },
+    label: {
+        fontSize: 16,
+        fontWeight: '500',
+    },
+    subLabel: {
+        fontSize: 12,
+        color: theme_1.COLORS.greyText,
+    },
+});
+exports.default = PostOptionSheet;

package/dist/components/bottomsheet/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultSheetLong = exports.DefaultSheet = exports.PostOptionSheet = void 0;
+var PostOptionSheet_1 = require("./PostOptionSheet");
+Object.defineProperty(exports, "PostOptionSheet", { enumerable: true, get: function () { return __importDefault(PostOptionSheet_1).default; } });
+var DefaultSheet_1 = require("./DefaultSheet");
+Object.defineProperty(exports, "DefaultSheet", { enumerable: true, get: function () { return __importDefault(DefaultSheet_1).default; } });
+var DefaultSheetLong_1 = require("./DefaultSheetLong");
+Object.defineProperty(exports, "DefaultSheetLong", { enumerable: true, get: function () { return __importDefault(DefaultSheetLong_1).default; } });

package/dist/components/buttons/Button.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var theme_1 = require("../../constants/theme");
+var Button = function (_a) {
+    var title = _a.title, onPress = _a.onPress, _b = _a.type, type = _b === void 0 ? 'primary' : _b, style = _a.style, textStyle = _a.textStyle;
+    var buttonStyles = [
+        styles.button,
+        type === 'primary' && styles.primaryButton,
+        type === 'gray' && styles.grayButton,
+        type === 'primary-outline' && styles.primaryOutlineButton,
+        type === 'gray-outline' && styles.grayOutlineButton,
+        style,
+    ];
+    var textStyles = [
+        styles.buttonText,
+        type === 'primary' && styles.primaryButtonText,
+        type === 'gray' && styles.grayButtonText,
+        type === 'primary-outline' && styles.primaryOutlineButtonText,
+        type === 'gray-outline' && styles.grayOutlineButtonText,
+        textStyle,
+    ];
+    return (react_1.default.createElement(react_native_1.TouchableOpacity, { style: buttonStyles, onPress: onPress },
+        react_1.default.createElement(react_native_1.Text, { style: textStyles }, title)));
+};
+var styles = react_native_1.StyleSheet.create({
+    button: {
+        height: 50,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 6,
+        paddingHorizontal: 16,
+        width: "100%",
+    },
+    primaryButton: {
+        backgroundColor: theme_1.COLORS.primary,
+    },
+    primaryOutlineButton: {
+        backgroundColor: theme_1.COLORS.white,
+        borderWidth: 1,
+        borderColor: theme_1.COLORS.primary,
+    },
+    grayButton: {
+        backgroundColor: '#f5f5f5',
+    },
+    buttonText: {
+        fontSize: 16,
+        fontWeight: '500',
+    },
+    primaryButtonText: {
+        color: theme_1.COLORS.white,
+    },
+    primaryOutlineButtonText: {
+        color: theme_1.COLORS.primary,
+    },
+    grayButtonText: {
+        color: '#333',
+    },
+    grayOutlineButton: {
+        backgroundColor: '#f5f5f5',
+        borderColor: theme_1.COLORS.border,
+        borderWidth: 1,
+    },
+    grayOutlineButtonText: {
+    // color: COLORS.
+    }
+});
+exports.default = Button;

package/dist/components/buttons/PostButton.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var MaterialIcons_1 = __importDefault(require("react-native-vector-icons/MaterialIcons"));
+var PostButton = function (_a) {
+    var title = _a.title, onPress = _a.onPress, buttonStyle = _a.buttonStyle, textStyle = _a.textStyle;
+    return (react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.button, buttonStyle], onPress: onPress },
+        react_1.default.createElement(MaterialIcons_1.default, { name: "add-circle-outline", size: 20, color: "#007AFF" }),
+        react_1.default.createElement(react_native_1.Text, { style: [styles.buttonText, textStyle] }, title)));
+};
+var styles = react_native_1.StyleSheet.create({
+    button: {
+        backgroundColor: '#f2f2f2', // light grey background
+        paddingVertical: 13,
+        paddingHorizontal: 20,
+        borderRadius: 8,
+        width: "100%",
+        alignItems: 'center',
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+    },
+    buttonText: {
+        color: '#007AFF', // iOS blue color
+        fontSize: 16,
+        fontWeight: '500',
+        marginLeft: 4,
+    },
+});
+exports.default = PostButton;

package/dist/components/buttons/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PostButton = exports.Button = void 0;
+var Button_1 = require("./Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
+var PostButton_1 = require("./PostButton");
+Object.defineProperty(exports, "PostButton", { enumerable: true, get: function () { return __importDefault(PostButton_1).default; } });

package/dist/components/eventCard/Tag.js

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var theme_1 = require("../../constants/theme");
+//@ts-ignore
+var Tag = function (_a) {
+    var label = _a.label, backgroundColor = _a.backgroundColor, textColor = _a.textColor, borderColor = _a.borderColor;
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.tagContainer, { backgroundColor: backgroundColor, borderColor: borderColor }] },
+        react_1.default.createElement(react_native_1.Text, { style: [styles.tagText, { color: textColor }] }, label)));
+};
+var styles = react_native_1.StyleSheet.create({
+    tagContainer: {
+        paddingHorizontal: theme_1.SIZES.xs,
+        paddingVertical: theme_1.SIZES.xxs,
+        borderRadius: theme_1.SIZES.xs,
+        borderWidth: 1,
+        marginLeft: theme_1.SIZES.xxs,
+    },
+    tagText: __assign(__assign({}, theme_1.FONTS.font), { fontWeight: 600 }),
+});
+exports.default = Tag;

package/dist/components/eventCard/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SocialStats = exports.Organizer = exports.EventCard = void 0;
+var EventCard_1 = require("./vsCard/EventCard");
+Object.defineProperty(exports, "EventCard", { enumerable: true, get: function () { return __importDefault(EventCard_1).default; } });
+var OrganizerContainer_1 = require("./vsCard/OrganizerContainer");
+Object.defineProperty(exports, "Organizer", { enumerable: true, get: function () { return __importDefault(OrganizerContainer_1).default; } });
+var Footer_1 = require("./vsCard/Footer");
+Object.defineProperty(exports, "SocialStats", { enumerable: true, get: function () { return __importDefault(Footer_1).default; } });

package/dist/components/eventCard/vsCard/EventCard.js

@@ -0,0 +1,76 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var Tag_1 = __importDefault(require("../Tag"));
+var OrganizerContainer_1 = __importDefault(require("./OrganizerContainer"));
+var Footer_1 = __importDefault(require("./Footer"));
+var theme_1 = require("../../../constants/theme");
+var EventCard = function (_a) {
+    var imageUri = _a.imageUri, date = _a.date, tags = _a.tags, title = _a.title, description = _a.description, organizerAvatarUri = _a.organizerAvatarUri, organizerName = _a.organizerName, organizerLink = _a.organizerLink, likes = _a.likes, views = _a.views;
+    return (react_1.default.createElement(react_native_1.View, { style: styles.container },
+        react_1.default.createElement(react_native_1.View, { style: styles.imageContainer },
+            react_1.default.createElement(react_native_1.Image, { source: { uri: imageUri }, style: styles.image, resizeMode: "cover" })),
+        react_1.default.createElement(react_native_1.View, { style: styles.content },
+            react_1.default.createElement(react_native_1.View, { style: styles.dateAndTags },
+                react_1.default.createElement(react_native_1.Text, { style: styles.date }, date),
+                tags.map(function (tag, index) { return (react_1.default.createElement(Tag_1.default, { key: index, label: tag.label, backgroundColor: tag.backgroundColor, textColor: tag.textColor, borderColor: tag.borderColor })); })),
+            react_1.default.createElement(react_native_1.Text, { style: styles.title, numberOfLines: 1, ellipsizeMode: "tail" }, title),
+            react_1.default.createElement(react_native_1.Text, { style: styles.description, numberOfLines: 2, ellipsizeMode: "tail" }, description),
+            react_1.default.createElement(react_native_1.View, { style: styles.organizerContainer },
+                react_1.default.createElement(OrganizerContainer_1.default, { avatarUri: organizerAvatarUri, organizerName: organizerName, organizerLink: organizerLink })),
+            react_1.default.createElement(Footer_1.default, { likes: likes, views: views }))));
+};
+var styles = react_native_1.StyleSheet.create({
+    container: {
+        backgroundColor: theme_1.COLORS.white,
+        overflow: 'hidden',
+        marginBottom: theme_1.SIZES.xs,
+        marginTop: theme_1.SIZES.xs,
+        elevation: 3, // For Android shadow
+        shadowColor: theme_1.COLORS.dark,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.3,
+        shadowRadius: 3,
+    },
+    imageContainer: {
+        width: '100%',
+        height: 270,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+    content: {
+        padding: theme_1.SIZES.sm,
+    },
+    dateAndTags: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: theme_1.SIZES.xxs,
+    },
+    date: __assign(__assign({}, theme_1.FONTS.font), { color: theme_1.COLORS.greyText, marginRight: theme_1.SIZES.sm }),
+    title: __assign({}, theme_1.FONTS.h4),
+    description: __assign(__assign({}, theme_1.FONTS.font), { marginTop: theme_1.SIZES.xxs }),
+    organizerContainer: {
+        marginTop: theme_1.SIZES.md,
+        marginBottom: theme_1.SIZES.md,
+    }
+});
+exports.default = EventCard;

package/dist/components/eventCard/vsCard/Footer.js

@@ -0,0 +1,81 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var Ionicons_1 = __importDefault(require("react-native-vector-icons/Ionicons"));
+var theme_1 = require("../../../constants/theme");
+var Footer = function (_a, hideBorder) {
+    var likes = _a.likes, views = _a.views, _b = _a.position, position = _b === void 0 ? "space-between" : _b;
+    if (hideBorder === void 0) { hideBorder = false; }
+    var _c = (0, react_1.useState)(false), isLiked = _c[0], setIsLiked = _c[1];
+    var handleLikePress = function () {
+        setIsLiked(!isLiked);
+    };
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.container, { justifyContent: position }, hideBorder && styles.hideBorder] },
+        react_1.default.createElement(react_native_1.TouchableOpacity, { onPress: handleLikePress, style: styles.item },
+            react_1.default.createElement(Ionicons_1.default, { name: isLiked ? "heart" : "heart-outline", size: 20, color: isLiked ? theme_1.COLORS.red : theme_1.COLORS.greyText }),
+            react_1.default.createElement(react_native_1.Text, { style: styles.text },
+                isLiked ? likes + 1 : likes,
+                " ",
+                likes + (isLiked ? 1 : 0) === 1 ? 'Like' : 'Likes')),
+        react_1.default.createElement(react_native_1.View, { style: styles.item },
+            react_1.default.createElement(Ionicons_1.default, { name: "eye-outline", size: 20, color: theme_1.COLORS.greyText }),
+            react_1.default.createElement(react_native_1.Text, { style: styles.text },
+                views,
+                " Views"))));
+};
+var styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        borderTopWidth: 1,
+        borderTopColor: theme_1.COLORS.border,
+        paddingTop: theme_1.SIZES.sm,
+        gap: theme_1.SIZES.md,
+    },
+    hideBorder: {
+        borderTopWidth: 0,
+    },
+    item: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    text: __assign(__assign({}, theme_1.FONTS.font), { color: theme_1.COLORS.greyText, marginLeft: theme_1.SIZES.xxs }),
+});
+exports.default = Footer;