@wereform/pkgm-shared 1.0.2 → 1.0.3

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@wereform/pkgm-shared",
-  "version": "1.0.2",
+  "version": "1.0.3",
+  "source": "src/index.js",
   "main": "dist/index.js",
+  "react-native": "src/index.js",
   "files": [
     "dist",
+    "src",
     "README.md"
   ],
   "publishConfig": {

package/src/components/buttons/CustomizableButton.jsx

@@ -0,0 +1,69 @@
+import { Text, TouchableOpacity, View } from "react-native";
+import { customizableButtonStyles } from "../../styles/customizableButtonStyles";
+import { useState } from "react";
+
+export function CustomizedButton({
+  label,
+  onPress,
+  onPressStyle,
+  textColor,
+  fontSize,
+  fontFamily,
+  fontWeight,
+  customIcon,
+  style,
+  isDisabled,
+}) {
+  if (!label) {
+    console.warn("CustomizedButton: 'label' prop is missing.");
+  }
+
+  const [pressed, setPressed] = useState(false);
+
+  return (
+    <TouchableOpacity
+      onPress={
+        onPress ||
+        (() => console.warn("CustomizedButton: onPress not provided"))
+      }
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={[
+        customizableButtonStyles.buttonContainer,
+        style,
+        pressed && onPressStyle,
+      ]}
+      activeOpacity={1}
+      disabled={isDisabled}
+    >
+      <View
+        style={
+          customIcon
+            ? {
+                flexDirection: "row",
+                width: "100%",
+                justifyContent: "space-between",
+                alignItems: "center",
+                paddingRight: 12,
+              }
+            : {}
+        }
+      >
+        <Text
+          style={[
+            customizableButtonStyles.buttonText,
+            {
+              color: textColor || "#fff",
+              fontSize: fontSize || 16,
+              fontFamily: fontFamily,
+              fontWeight: fontWeight,
+            },
+          ]}
+        >
+          {label || "Default Button"}
+        </Text>
+        <View>{customIcon && customIcon}</View>
+      </View>
+    </TouchableOpacity>
+  );
+}

package/src/components/dropdowns/DropDown.jsx

@@ -0,0 +1,44 @@
+import { Text, View } from "react-native";
+import ModalSelector from "react-native-modal-selector";
+import { useState } from "react";
+import { dropDownStyles } from "../../styles/dropDownStyles";
+import { Ionicons } from "@expo/vector-icons";
+
+export function DropDown({ selectText, data, styles, iconStyles }) {
+  const [selected, setSelected] = useState(selectText);
+  return (
+    <View style={[dropDownStyles.container, styles]}>
+      <ModalSelector
+        data={data}
+        initValue={selectText || "Select Option"}
+        onChange={option => {
+          console.log("Selected option:", option); // <-- key + label!
+          setSelected(option);
+        }}
+        overlayStyle={dropDownStyles.overlayStyle}
+        optionTextStyle={{ color: "#fff", fontWeight: "500" }}
+        optionContainerStyle={dropDownStyles.optionContainerStyle}
+        cancelTextStyle={{
+          color: "#000",
+          fontFamily: "Inter",
+          fontWeight: "800",
+        }}
+        cancelStyle={dropDownStyles.cancelContainerStyle}
+      >
+        <View style={dropDownStyles.dropDownContainer}>
+          <Text style={dropDownStyles.dropDownText}>
+            {typeof selected === "string"
+              ? selected // shows default selectText
+              : selected?.label || "Select Option"}
+          </Text>
+          <Ionicons
+            name="caret-down"
+            size={16}
+            color={"white"}
+            style={iconStyles}
+          />
+        </View>
+      </ModalSelector>
+    </View>
+  );
+}

package/src/components/headers/HeaderGlobal.jsx

@@ -0,0 +1,26 @@
+import { Image, TouchableOpacity, View } from "react-native";
+import { headerGlobalStyles } from "../../styles/headerGlobalStyles";
+
+export function HeaderGlobal({ aiIcon, notificationIcon, searchIcon }) {
+  return (
+    <View style={headerGlobalStyles.container}>
+      <Image
+        source={{
+          uri: "https://begenone-images.s3.us-east-1.amazonaws.com/begenone-white-transparent-logo-beta-min.png",
+        }}
+        style={headerGlobalStyles.image}
+      />
+      <View style={headerGlobalStyles.iconsContainer}>
+        <TouchableOpacity style={headerGlobalStyles.icons}>
+          {aiIcon}
+        </TouchableOpacity>
+        <TouchableOpacity style={headerGlobalStyles.icons}>
+          {notificationIcon}
+        </TouchableOpacity>
+        <TouchableOpacity style={headerGlobalStyles.icons}>
+          {searchIcon}
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}

package/src/components/inputs/InputComment.jsx

@@ -0,0 +1,16 @@
+import { Pressable, TextInput, View } from "react-native";
+import { commentInputStyles } from "../../styles/commentInputStyles";
+
+export function InputComment({ placeholder, submitIcon, props }) {
+  return (
+    <View style={commentInputStyles.container}>
+      <TextInput
+        placeholder={placeholder}
+        placeholderTextColor="#999"
+        style={[commentInputStyles.input]}
+        {...props}
+      />
+      <Pressable>{submitIcon}</Pressable>
+    </View>
+  );
+}

package/src/components/inputs/InputField.jsx

@@ -0,0 +1,85 @@
+// packages/begenone-pkgm-shared/src/components/inputs/InputField.jsx
+import React, { useState } from "react";
+import {
+  View,
+  TextInput,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
+import { inputStyles } from "../../styles/inputStyles";
+import {
+  useFonts,
+  Inter_400Regular,
+  Inter_700Bold,
+} from "@expo-google-fonts/inter";
+import { Ionicons } from "@expo/vector-icons";
+
+export function InputField({
+  placeholder,
+  error,
+  iconLeft,
+  iconRight,
+  onIconPress,
+  iconRightColor,
+  inputStyle,
+  inputWrapper,
+  multiline,
+  onChangeText,
+  isEditable,
+  secureTextEntry,
+  Children,
+  // onPressFunction,
+  ...props
+}) {
+  const [fontsLoaded] = useFonts({
+    Inter_400Regular,
+    Inter_700Bold,
+  });
+
+  if (!fontsLoaded) {
+    return null; // or <AppLoading />
+  }
+
+  // console.log(`Multi Line CHECK`, multiline);
+
+  const isMultiline = multiline || false;
+
+  return (
+    <View>
+      <View style={[inputStyles.inputWrapper, inputWrapper]}>
+        {iconLeft && <View style={inputStyles.icon}>{iconLeft}</View>}
+        <TextInput
+          editable={isEditable}
+          placeholder={placeholder}
+          placeholderTextColor="#999"
+          multiline={isMultiline}
+          style={[
+            inputStyles.input,
+            inputStyle,
+            isMultiline && { textAlignVertical: "top" },
+          ]}
+          onChangeText={onChangeText}
+          secureTextEntry={secureTextEntry}
+          {...props}
+        />
+        {iconRight && (
+          <TouchableOpacity
+            style={inputStyles.icon}
+            onPress={onIconPress}
+            disabled={!onIconPress}
+          >
+            <Ionicons
+              name={iconRight}
+              size={18}
+              color={iconRightColor || "#fff"}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+      {error && <Text style={customErrorStyle}>{error}</Text>}
+    </View>
+  );
+}
+// ~2.28.0
+// ~4.16.0

package/src/components/menus/MenuChannelMeta.jsx

@@ -0,0 +1,94 @@
+import {
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+} from "react-native";
+import { MenuChannelMetaStyles } from "../../styles/MenuChannelMetaStyles";
+import { Ionicons } from "@expo/vector-icons";
+import { useEffect } from "react";
+
+let calcWidth;
+let calcHeight;
+
+export const MenuChannelMeta = ({
+  timeAgo,
+  viewsText,
+  channelLogo,
+  userName,
+  subscribersCount,
+  containerStyles,
+  channelContainerStyles,
+}) => {
+  return (
+    <View style={[MenuChannelMetaStyles.container, containerStyles]}>
+      <View style={MenuChannelMetaStyles.dateViewsContainer}>
+        <View style={MenuChannelMetaStyles.dateContainer}>
+          <View style={MenuChannelMetaStyles.dateIcon}>
+            <Ionicons name="calendar" size={16} color="white" />
+          </View>
+          <Text style={MenuChannelMetaStyles.dateText}>
+            {timeAgo || "14 Hours Ago"}
+          </Text>
+        </View>
+        {/* <View style={MenuChannelMetaStyles.viewsContainer}>
+          <Text style={MenuChannelMetaStyles.viewsText}>
+            {viewsText || "0"}
+          </Text>
+          <View style={MenuChannelMetaStyles.eyeIcon}>
+            <Ionicons name="eye" size={16} color="white" />
+          </View>
+        </View> */}
+      </View>
+      <View style={MenuChannelMetaStyles.channelMetaContainer}>
+        <View style={MenuChannelMetaStyles.channelMetaContainer_ColumnOne}>
+          <Image
+            source={{
+              uri:
+                channelLogo ||
+                "https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg",
+            }}
+            style={MenuChannelMetaStyles.userImage}
+          />
+          <View style={MenuChannelMetaStyles.nameSubcountContainer}>
+            <Text
+              style={[MenuChannelMetaStyles.userName, inlineStyles.userName]}
+            >
+              {userName || "Default Username"}
+            </Text>
+            <View style={MenuChannelMetaStyles.subCountContainer}>
+              <Text style={MenuChannelMetaStyles.subCount}>
+                {subscribersCount || "0"}
+              </Text>
+              <Text style={MenuChannelMetaStyles.subText}>Subscribers</Text>
+            </View>
+          </View>
+        </View>
+        <Pressable
+          style={[
+            MenuChannelMetaStyles.subscribeButtonContainer,
+            { backgroundColor: "#303030" },
+          ]}
+        >
+          <Text
+            style={[
+              MenuChannelMetaStyles.subscribeButtonText,
+              { color: "#7f7f7f" },
+            ]}
+          >
+            Subscribe
+          </Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
+const inlineStyles = StyleSheet.create({
+  userName: {
+    width: "",
+  },
+});

package/src/components/menus/MenuInteraction.jsx

@@ -0,0 +1,52 @@
+import { TouchableOpacity, View } from "react-native";
+import { MenuInteractionStyles } from "../../styles/MenuInteractionStyles";
+import { Ionicons } from "@expo/vector-icons";
+import { useState } from "react";
+
+export const MenuInteraction = ({
+  containerStyles,
+  columnMainIconStyles,
+  pressed,
+}) => {
+  return (
+    <View style={[MenuInteractionStyles.container, containerStyles]}>
+      <View
+        style={[MenuInteractionStyles.column_mainIcons, columnMainIconStyles]}
+      >
+        <TouchableOpacity>
+          <View style={MenuInteractionStyles.icon}>
+            <Ionicons name="arrow-redo" size={24} color="white" />
+          </View>
+        </TouchableOpacity>
+
+        <TouchableOpacity>
+          <View style={MenuInteractionStyles.icon}>
+            <Ionicons name="chatbubble-ellipses" size={24} color="white" />
+          </View>
+        </TouchableOpacity>
+
+        <TouchableOpacity>
+          <View style={MenuInteractionStyles.icon}>
+            <Ionicons name="repeat-outline" size={24} color="white" />
+          </View>
+        </TouchableOpacity>
+
+        <TouchableOpacity>
+          <View style={MenuInteractionStyles.icon}>
+            <Ionicons name="thumbs-up-outline" size={24} color="white" />
+          </View>
+        </TouchableOpacity>
+
+        <TouchableOpacity>
+          <View style={MenuInteractionStyles.icon}>
+            <Ionicons name="thumbs-down-outline" size={24} color="white" />
+          </View>
+        </TouchableOpacity>
+      </View>
+
+      <TouchableOpacity onPress={() => pressed(true)}>
+        <Ionicons name="ellipsis-vertical-outline" size={24} color="white" />
+      </TouchableOpacity>
+    </View>
+  );
+};

package/src/components/menus/MenuNav.jsx

@@ -0,0 +1,33 @@
+import { TouchableOpacity, View } from "react-native";
+import { menuNavStyles } from "../../styles/menuNavStyles";
+import { Ionicons } from "@expo/vector-icons";
+
+export function MenuNav({
+  homeIcon,
+  wireIcon,
+  uploadIcon,
+  channelIcon,
+  profileIcon,
+
+  onPressHome,
+  onPressWire,
+  onPressUpload,
+  onPressChannel,
+  onPressProfile,
+}) {
+  return (
+    <View style={menuNavStyles.container}>
+      <TouchableOpacity onPress={onPressHome}>{homeIcon}</TouchableOpacity>
+      <TouchableOpacity onPress={onPressWire}>{wireIcon}</TouchableOpacity>
+      <TouchableOpacity onPress={onPressUpload}>{uploadIcon}</TouchableOpacity>
+      <TouchableOpacity onPress={onPressChannel}>
+        {channelIcon}
+      </TouchableOpacity>
+      <TouchableOpacity onPress={onPressProfile}>
+        {profileIcon || (
+          <Ionicons name="person-outline" size={24} color="white" />
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+}

package/src/components/titles/CustomizedTitle.jsx

@@ -0,0 +1,36 @@
+import { Text, View } from "react-native";
+
+export function CustomizedTitle({
+  title,
+  fontSize,
+  fontFamily,
+  textColor,
+  style,
+  textStyle,
+  dateTextStyles,
+}) {
+  const displayTitle =
+    title && title.length > 75
+      ? title.slice(0, 75) + "…" // adds an ellipsis when truncated
+      : title || "Here is your default Title!";
+
+  return (
+    <View style={[{ width: "100%" }, style]}>
+      <Text
+        style={[
+          {
+            flexShrink: 1,
+            fontFamily: fontFamily,
+            fontSize: fontSize,
+            color: textColor,
+            flexWrap: "wrap",
+          },
+          textStyle,
+        ]}
+        numberOfLines={2}
+      >
+        {displayTitle}
+      </Text>
+    </View>
+  );
+}

package/src/index.js

@@ -0,0 +1,11 @@
+export { InputField } from "./components/inputs/InputField";
+export { MenuNav } from "./components/menus/MenuNav";
+export { HeaderGlobal } from "./components/headers/HeaderGlobal";
+export { MenuInteraction } from "./components/menus/MenuInteraction";
+export { MenuChannelMeta } from "./components/menus/MenuChannelMeta";
+export { InputComment } from "./components/inputs/InputComment.jsx";
+export { DropDown } from "./components/dropdowns/DropDown.jsx";
+export { CustomizedTitle } from "./components/titles/CustomizedTitle.jsx";
+export { CustomizedButton } from "./components/buttons/CustomizableButton.jsx";
+export { DateViews } from "./utils/DateViews.jsx";
+export { default as normalizeUrl } from "./utils/normalizeUrl.js";

package/src/styles/MenuChannelMetaStyles.js

@@ -0,0 +1,114 @@
+import { Platform, StyleSheet, useWindowDimensions } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const checkDimensions = () => {};
+
+// checkDimensions();
+
+export const MenuChannelMetaStyles = StyleSheet.create({
+  container: {
+    width: "auto",
+    marginRight: 12,
+    marginLeft: 12,
+  },
+
+  dateViewsContainer: {
+    width: "100%",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 12,
+    paddingRight: 6,
+    paddingLeft: 6,
+  },
+
+  dateContainer: {
+    flexDirection: "row",
+    rowGap: 20,
+  },
+
+  dateIcon: {
+    marginRight: 8,
+  },
+
+  viewsContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+
+  eyeIcon: {
+    marginRight: 8,
+    marginLeft: 8,
+  },
+
+  dateText: {
+    color: globalStyles.colors.colorPrimary600,
+  },
+
+  viewsText: {
+    color: globalStyles.colors.colorPrimary600,
+  },
+
+  channelMetaContainer: {
+    flexDirection: "row",
+    backgroundColor: globalStyles.colors.colorPrimary200,
+    // width: "100%",
+    // margin: 12,
+    padding: 12,
+    marginBottom: 6,
+    marginTop: 12,
+    borderRadius: globalStyles.borders.borderPrimary100,
+    justifyContent: "space-between",
+  },
+
+  channelMetaContainer_ColumnOne: {
+    flexDirection: "row",
+  },
+
+  userImage: {
+    width: 40,
+    height: 40,
+    borderRadius: globalStyles.borders.borderPrimary50,
+  },
+
+  nameSubcountContainer: {
+    flexDirection: "column",
+    paddingLeft: 12,
+  },
+
+  userName: {
+    color: "#fff",
+    fontSize: Platform.OS === "ios" ? 16 : 14,
+    paddingBottom: 4,
+    fontWeight: "bold",
+  },
+
+  subCountContainer: {
+    flexDirection: "row",
+  },
+
+  subCount: {
+    color: globalStyles.colors.colorPrimary600,
+    paddingRight: 6,
+    fontSize: 12,
+    fontWeight: "bold",
+  },
+
+  subText: {
+    color: "#fff",
+    fontSize: 12,
+  },
+
+  subscribeButtonContainer: {
+    backgroundColor: globalStyles.colors.colorPrimary600,
+    width: Platform.OS === "ios" ? 100 : 80,
+    borderRadius: globalStyles.borders.borderPrimary400,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  subscribeButtonText: {
+    color: "#fff",
+    fontWeight: "bold",
+    fontSize: Platform === "ios" ? 18 : 12,
+  },
+});

package/src/styles/MenuInteractionStyles.js

@@ -0,0 +1,21 @@
+export const MenuInteractionStyles = {
+  container: {
+    width: "100%",
+    height: 40,
+    // backgroundColor: "#be2e2eff",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingRight: 16,
+  },
+
+  column_mainIcons: {
+    flexDirection: "row",
+    // width: "100%",
+    justifyContent: "space-evenly",
+  },
+
+  icon: {
+    paddingLeft: 18,
+  },
+};

package/src/styles/commentInputStyles.js

@@ -0,0 +1,30 @@
+import { globalStyles } from "./globalStyles";
+
+export const commentInputStyles = {
+  container: {
+    flexDirection: "row",
+    width: "auto",
+    backgroundColor: globalStyles.colors.colorPrimary350,
+    borderRadius: globalStyles.borders.borderPrimary200,
+    height: 50,
+
+    justifyContent: "space-between",
+    alignItems: "center",
+
+    justifySelf: "center",
+
+    marginRight: 12,
+    marginLeft: 12,
+
+    paddingLeft: 12,
+    paddingRight: 24,
+  },
+
+  input: {
+    // width: "100%",
+
+    paddingLeft: 8,
+    paddingRight: 8,
+    color: "#fff",
+  },
+};

package/src/styles/customizableButtonStyles.js

@@ -0,0 +1,25 @@
+import { StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const customizableButtonStyles = StyleSheet.create({
+  container: {},
+
+  buttonContainer: {
+    height: 50,
+    width: "auto",
+    flexGrow: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: globalStyles.borders.borderPrimary100,
+    backgroundColor: "#fff",
+  },
+
+  buttonText: {
+    flexDirection: "row",
+    color: "#000",
+    fontSize: 16,
+    textAlign: "center",
+    textAlignVertical: "center",
+    alignItems: "center",
+  },
+});

package/src/styles/dropDownStyles.js

@@ -0,0 +1,54 @@
+import { globalStyles } from "./globalStyles";
+
+export const dropDownStyles = {
+  container: {
+    width: "auto",
+    // marginLeft: 16,
+    // marginRight: 16,
+    // justifyContent: "start",
+  },
+
+  picker: {
+    height: 40,
+    flex: 1,
+
+    // color: "#151515",
+  },
+
+  overlayStyle: {
+    backgroundColor: globalStyles.colors.colorPrimary50,
+  },
+
+  optionTextStyle: {
+    color: "#fff",
+  },
+
+  optionContainerStyle: {
+    backgroundColor: globalStyles.colors.colorPrimary200,
+    borderWidth: 1,
+    borderRadius: globalStyles.borders.borderPrimary200,
+    justifyContent: "space-between",
+  },
+
+  cancelContainerStyle: {
+    backgroundColor: "#fff",
+  },
+
+  dropDownContainer: {
+    flexDirection: "row",
+    width: "100%",
+    justifyContent: "space-between",
+    // borderWidth: 1,
+    borderRadius: globalStyles.borders.borderPrimary200,
+    height: 50,
+    alignItems: "center",
+    paddingRight: 12,
+    paddingLeft: 12,
+    backgroundColor: globalStyles.colors.colorPrimary200,
+  },
+
+  dropDownText: {
+    color: "#fff",
+    paddingLeft: 12,
+  },
+};

package/src/styles/globalStyles.js

@@ -0,0 +1,27 @@
+export const globalStyles = {
+  colors: {
+    colorPrimary50: "rgba(21, 21, 21, .7)",
+    colorPrimary100: "#151515",
+
+    colorPrimary200: "#252525",
+    colorPrimary250: "rgba(37, 37, 37, .9)",
+
+    colorPrimary300: "#3C3C3C",
+    colorPrimary350: "rgba(60,60,60,.2)",
+
+    colorPrimary400: "#7F7F7F",
+
+    colorPrimary500: "#D3D3D3",
+
+    colorPrimary600: "#ff6600ff",
+
+    colorPrimary700: "#FF8800",
+  },
+  borders: {
+    borderPrimary50: 8,
+    borderPrimary100: 10,
+    borderPrimary200: 12,
+    borderPrimary300: 15,
+    borderPrimary400: 30,
+  },
+};

package/src/styles/headerGlobalStyles.js

@@ -0,0 +1,26 @@
+export const headerGlobalStyles = {
+  container: {
+    height: 75,
+    width: "100%",
+    // backgroundColor: "#fffffff",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: -5,
+  },
+
+  iconsContainer: {
+    flexDirection: "row",
+  },
+
+  icons: {
+    paddingRight: 20,
+  },
+
+  image: {
+    width: 120,
+    height: 120,
+    resizeMode: "contain",
+    marginLeft: 24,
+  },
+};

package/src/styles/inputStyles.js

@@ -0,0 +1,36 @@
+export const inputStyles = {
+  label: {
+    fontSize: 14,
+    marginBottom: 5,
+    color: "#333",
+  },
+  inputWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "rgba(37, 37, 37, 0)",
+    // backgroundColor: "#fff",
+    // width: 320,
+    overflow: "hidden", // necessary for clipping children
+  },
+  input: {
+    // height: 50,
+    width: "auto",
+    paddingLeft: 14,
+    paddingRight: 14,
+    fontFamily: "Inter",
+    fontWeight: "700",
+    color: "#3c3c3c",
+  },
+
+  icon: {
+    marginHorizontal: 5,
+  },
+  error: {
+    color: "red",
+    fontSize: 12,
+    marginTop: 4,
+  },
+};

package/src/styles/menuNavStyles.js

@@ -0,0 +1,23 @@
+import { StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const menuNavStyles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-evenly",
+
+    backgroundColor: globalStyles.colors.colorPrimary200,
+
+    height: 60,
+    width: "80%",
+
+    alignSelf: "center",
+    alignItems: "center",
+
+    borderRadius: globalStyles.borders.borderPrimary300,
+  },
+
+  uploadIcon: {
+    color: globalStyles.colors.colorPrimary600,
+  },
+});

package/src/utils/DateViews.jsx

@@ -0,0 +1,72 @@
+import { StyleSheet, Text, View } from "react-native";
+import { globalStyles } from "../styles/globalStyles";
+import { Ionicons } from "@expo/vector-icons";
+
+export function DateViews({
+  timeAgo,
+  viewsText,
+  containerStyles,
+  dateTextStyles,
+  viewsTextStyles,
+  dateContainerStyles,
+}) {
+  return (
+    <View style={[styles.dateViewsContainer, containerStyles]}>
+      <View style={[styles.dateContainer, dateContainerStyles]}>
+        <View style={[styles.dateIcon]}>
+          <Ionicons name="calendar-clear-outline" size={16} color="white" />
+        </View>
+        <Text style={[styles.dateText, dateTextStyles]}>
+          {timeAgo || "14 Hours Ago"}
+        </Text>
+      </View>
+      <View style={styles.viewsContainer}>
+        <View style={[styles.eyeIcon]}>
+          <Ionicons name="eye-outline" size={16} color="white" />
+        </View>
+        <Text style={[styles.viewsText, viewsTextStyles]}>
+          {viewsText || "123.400"}
+          <Text style={{ color: "white" }}>{" Views"}</Text>
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  dateViewsContainer: {
+    width: "100%",
+    height: 30,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 12,
+    paddingRight: 8,
+    // paddingLeft: 8,
+  },
+
+  dateContainer: {
+    flexDirection: "row",
+    rowGap: 20,
+    paddingRight: 16,
+  },
+
+  dateIcon: {
+    marginRight: 8,
+  },
+
+  viewsContainer: {
+    flexDirection: "row",
+  },
+
+  eyeIcon: {
+    marginRight: 8,
+  },
+
+  dateText: {
+    color: globalStyles.colors.colorPrimary600,
+  },
+
+  viewsText: {
+    color: globalStyles.colors.colorPrimary600,
+  },
+});

package/src/utils/normalizeUrl.js

@@ -0,0 +1,14 @@
+const normalizeUrl = url => {
+  if (!url) return null;
+
+  // If it already starts with http:// or https://, return as-is
+  if (/^https?:\/\//i.test(url)) return url;
+
+  // If it looks like a domain (e.g. google.com or mysite.org)
+  if (/^[\w.-]+\.[a-z]{2,}$/i.test(url)) return `https://${url}`;
+
+  // Otherwise, not a valid link — return null or handle differently
+  return null;
+};
+
+export default normalizeUrl;