rn-vs-lb 1.0.22 → 1.0.23

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

@@ -0,0 +1,78 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var bottom_sheet_1 = __importStar(require("@gorhom/bottom-sheet"));
+var styleSheet_1 = require("../../constants/styleSheet");
+var theme_1 = require("../../constants/theme");
+var PostOptionSheet = function (_a) {
+    var sheetRef = _a.sheetRef, onClose = _a.onClose;
+    var screenHeight = react_native_1.Dimensions.get("window").height;
+    // Вычисляем snapPoints с минимальным значением 10% для первого рендера
+    var snapPoints = (0, react_1.useMemo)(function () {
+        var percentage = (180 / screenHeight) * 100;
+        // const percentage = 100;
+        return ["".concat(Math.max(percentage, 10), "%")];
+    }, [screenHeight]);
+    return (
+    // <GestureHandlerRootView style={styles.container}>
+    react_1.default.createElement(bottom_sheet_1.default, { ref: sheetRef, index: -1, snapPoints: snapPoints, 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(react_native_1.View, { style: styleSheet_1.GlobalStyleSheet.container },
+            react_1.default.createElement(react_native_1.TouchableOpacity, { style: styleSheet_1.GlobalStyleSheet.TouchableOpacity },
+                react_1.default.createElement(react_native_1.Image, { style: styleSheet_1.GlobalStyleSheet.image, source: theme_1.IMAGES.info }),
+                react_1.default.createElement(react_native_1.Text, { style: styleSheet_1.GlobalStyleSheet.text }, "Report")),
+            react_1.default.createElement(react_native_1.TouchableOpacity, { style: styleSheet_1.GlobalStyleSheet.TouchableOpacity },
+                react_1.default.createElement(react_native_1.Image, { style: [styleSheet_1.GlobalStyleSheet.image, { tintColor: theme_1.COLORS.title }], source: theme_1.IMAGES.share2 }),
+                react_1.default.createElement(react_native_1.Text, { style: [styleSheet_1.GlobalStyleSheet.text, { color: theme_1.COLORS.title }] }, "Share")),
+            react_1.default.createElement(react_native_1.TouchableOpacity, { style: styleSheet_1.GlobalStyleSheet.TouchableOpacity },
+                react_1.default.createElement(react_native_1.Image, { style: [styleSheet_1.GlobalStyleSheet.image, { tintColor: theme_1.COLORS.title }], source: theme_1.IMAGES.copylink }),
+                react_1.default.createElement(react_native_1.Text, { style: [styleSheet_1.GlobalStyleSheet.text, { color: theme_1.COLORS.title }] }, "Copy link")),
+            react_1.default.createElement(react_native_1.TouchableOpacity, { style: styleSheet_1.GlobalStyleSheet.TouchableOpacity },
+                react_1.default.createElement(react_native_1.Image, { style: [styleSheet_1.GlobalStyleSheet.image, { tintColor: theme_1.COLORS.title }], source: theme_1.IMAGES.close }),
+                react_1.default.createElement(react_native_1.Text, { style: [styleSheet_1.GlobalStyleSheet.text, { color: theme_1.COLORS.title }] }, "Hide post"))))
+    // </GestureHandlerRootView>
+    );
+};
+var styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    bottomSheetBack: {
+        top: -1000,
+    }
+});
+exports.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/buttons/Button.js

@@ -0,0 +1,61 @@
+"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,
+        style,
+    ];
+    var textStyles = [
+        styles.buttonText,
+        type === 'primary' && styles.primaryButtonText,
+        type === 'gray' && styles.grayButtonText,
+        type === 'primary-outline' && styles.primaryOutlineButtonText,
+        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,
+    },
+    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: 'bold',
+    },
+    primaryButtonText: {
+        color: theme_1.COLORS.white,
+    },
+    primaryOutlineButtonText: {
+        color: theme_1.COLORS.primary,
+    },
+    grayButtonText: {
+        color: '#333',
+    },
+});
+exports.default = Button;

package/dist/components/buttons/PostButton.js

@@ -0,0 +1,36 @@
+"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: 10,
+        paddingHorizontal: 20,
+        borderRadius: 8,
+        width: "100%",
+        alignItems: 'center',
+        marginVertical: 10,
+        marginTop: 24,
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        gap: 6,
+    },
+    buttonText: {
+        color: '#007AFF', // iOS blue color
+        fontSize: 16,
+        fontWeight: '600',
+    },
+});
+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,77 @@
+"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) {
+    var likes = _a.likes, views = _a.views, _b = _a.position, position = _b === void 0 ? "space-between" : _b;
+    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 }] },
+        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,
+    },
+    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;

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

@@ -0,0 +1,51 @@
+"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");
+var OrganizerContainer = function (_a) {
+    var avatarUri = _a.avatarUri, organizerName = _a.organizerName, organizerLink = _a.organizerLink;
+    var handlePress = function () {
+        if (organizerLink) {
+            react_native_1.Linking.openURL(organizerLink).catch(function (err) { return console.error("Couldn't load page", err); });
+        }
+    };
+    return (react_1.default.createElement(react_native_1.TouchableOpacity, { onPress: handlePress, style: styles.container },
+        react_1.default.createElement(react_native_1.Image, { source: { uri: avatarUri }, style: styles.avatar }),
+        react_1.default.createElement(react_native_1.View, { style: styles.organizerTextContainer },
+            react_1.default.createElement(react_native_1.Text, { style: styles.organizerTitle }, "Organizer"),
+            react_1.default.createElement(react_native_1.Text, { style: styles.organizerText, numberOfLines: 1, ellipsizeMode: "tail" }, organizerName))));
+};
+var styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    avatar: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        marginRight: theme_1.SIZES.sm,
+    },
+    organizerTextContainer: {
+        flex: 1,
+        paddingRight: theme_1.SIZES.sm,
+    },
+    organizerTitle: __assign(__assign({}, theme_1.FONTS.font), { color: theme_1.COLORS.dark }),
+    organizerText: __assign({}, theme_1.FONTS.h6),
+});
+exports.default = OrganizerContainer;