@zezosoft/zezo-ott-react-native-ui-kit 0.1.0

package/src/components/Headers/Three.tsx

@@ -0,0 +1,63 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 09 Jun 2025 at 03:11 PM
+ */
+import React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { Logo } from '../Logo/Logo';
+import type { ITheme } from '../../theme/themes';
+import { useAppTheme } from '../../theme/useAppTheme'; // import your hook
+
+export interface HeaderThreeProps {
+  logoUri: string;
+  category?: React.ReactNode;
+  theme?: ITheme;
+}
+
+const HeaderThree: React.FC<HeaderThreeProps> = ({
+  logoUri,
+  category,
+  theme,
+}) => {
+  const { colors } = useAppTheme(theme);
+
+  return (
+    <View
+      style={[styles.headerContainer, { backgroundColor: colors.background }]}
+    >
+      <View style={styles.leftContainer}>
+        <View style={styles.logo}>
+          <Logo width={scale(55)} height={scale(50)} logoUri={logoUri} />
+        </View>
+        {category || null}
+      </View>
+    </View>
+  );
+};
+
+export default HeaderThree;
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: scale(8),
+    height: verticalScale(40),
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 100,
+  },
+  leftContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: scale(10),
+  },
+  logo: {
+    alignItems: 'center',
+    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5),
+  },
+});

package/src/components/Headers/Two.tsx

@@ -0,0 +1,75 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 09 Jun 2025 at 03:11 PM
+ */
+import React from 'react';
+import { Platform, Pressable, StyleSheet, View } from 'react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { Logo } from '../Logo/Logo';
+import DefaultIcons from '../Icons/NewIndex';
+import type { ITheme } from '../../theme/themes';
+import { useAppTheme } from '../../theme/useAppTheme';
+
+export interface HeaderTwoProps {
+  theme?: ITheme;
+  logoUri: string;
+  MenuIcon?: React.FC<{ width: number; height: number; color?: string }>;
+  onMenuPress?: () => void;
+}
+
+const HeaderTwo: React.FC<HeaderTwoProps> = ({
+  theme,
+  logoUri,
+  MenuIcon,
+  onMenuPress,
+}) => {
+  const { colors } = useAppTheme(theme);
+
+  const Menu = MenuIcon || DefaultIcons.MenuBar;
+
+  const rippleColor = colors.surfaceVariant + '33';
+  const pressedBackgroundColor = colors.backdrop;
+
+  return (
+    <View style={styles.headerContainer}>
+      <Pressable
+        onPress={onMenuPress}
+        android_ripple={{ color: rippleColor, borderless: true }}
+        style={({ pressed }) => [
+          styles.iconPressable,
+          pressed && { backgroundColor: pressedBackgroundColor },
+        ]}
+      >
+        <Menu width={scale(28)} height={scale(28)} />
+      </Pressable>
+      <View style={styles.logo}>
+        <Logo width={scale(100)} height={scale(80)} logoUri={logoUri} />
+      </View>
+      <View style={styles.placeholder} />
+    </View>
+  );
+};
+
+export default HeaderTwo;
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: scale(8),
+    height: verticalScale(40),
+  },
+  logo: {
+    flex: 1,
+    alignItems: 'center',
+    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5),
+  },
+  iconPressable: {
+    padding: scale(6),
+    borderRadius: scale(20),
+  },
+  placeholder: {
+    width: scale(28 + 12),
+  },
+});

package/src/components/Headers/index.ts

@@ -0,0 +1,16 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sun 08 Jun 2025 at 03:16 PM
+ */
+
+import HeaderOne from './One';
+import HeaderThree from './Three';
+import HeaderTwo from './Two';
+
+const Header = {
+  One: HeaderOne,
+  Two: HeaderTwo,
+  Three: HeaderThree,
+};
+
+export { Header };

package/src/components/Icons/AlertIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { scale } from 'react-native-size-matters';
+import Svg, { Path, Circle } from 'react-native-svg';
+
+export function AlertIcon({
+  size = scale(213),
+  strokeColor = '#DF1212',
+  bgColor = '#D9D9D9',
+}) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 213 214" fill="none">
+      <Circle
+        cx={106.268}
+        cy={106.923}
+        r={103.018}
+        fill={bgColor}
+        stroke={strokeColor}
+        strokeWidth={6.49971}
+      />
+      <Path
+        d="M99.01 73.857l-33.936 56.655a8.01 8.01 0 002.876 10.913 8.016 8.016 0 003.975 1.107h67.873a8.017 8.017 0 007.926-8.036 8.018 8.018 0 00-1.074-3.984l-33.937-56.655a8.012 8.012 0 00-13.703 0zM106 94.452v16.027M106 126.505h.041"
+        stroke={strokeColor}
+        strokeWidth={8.01335}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/components/Icons/DeviceIcon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+function DeviceIcon({
+  size = 25,
+  color = '#FFF',
+}: {
+  size?: number;
+  color?: string;
+}) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 18 24" fill="none">
+      <Path
+        d="M14.43 1.428H3.803a2.126 2.126 0 00-2.126 2.126v17.004c0 1.174.952 2.126 2.126 2.126H14.43a2.126 2.126 0 002.126-2.126V3.554a2.126 2.126 0 00-2.126-2.126zM9.116 18.433h.01"
+        stroke={color}
+        strokeWidth={2.12558}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export default DeviceIcon;

package/src/components/Icons/DoneIcon/DoneIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+function DoneIcon({ size = 25 }: { size?: number }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.682 19.731l15-14-1.364-1.462-14.294 13.34-5.317-5.316-1.414 1.414 6 6a1 1 0 001.39.024z"
+        fill="#FFF"
+      />
+    </Svg>
+  );
+}
+
+export default DoneIcon;

package/src/components/Icons/ForgotPasswordMessageIcon.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import Svg, { G, Rect, Path, Circle, Defs } from 'react-native-svg';
+
+export function ForgotPasswordMessageIcon(props: any) {
+  return (
+    <Svg
+      width={109}
+      height={109}
+      viewBox="0 0 109 109"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <G filter="url(#filter0_d_972_1083)">
+        <G filter="url(#filter1_d_972_1083)">
+          <Rect
+            x={6.73749}
+            y={5.68115}
+            width={96.1664}
+            height={96.1664}
+            rx={17.31}
+            fill="#000"
+          />
+          <Rect
+            x={7.3786}
+            y={6.32226}
+            width={94.8842}
+            height={94.8842}
+            rx={16.6688}
+            stroke="#34353A"
+            strokeWidth={1.28222}
+          />
+        </G>
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M41.867 31.195a9.617 9.617 0 00-9.617 9.616v19.364a9.617 9.617 0 009.617 9.617h6.19l5.604 6.732a1.282 1.282 0 001.923.054l6.326-6.786h6.517a9.617 9.617 0 009.616-9.617V40.811a9.617 9.617 0 00-9.616-9.616h-26.56z"
+          fill="#fff"
+        />
+        <Circle cx={45.9888} cy={52.1289} r={2.61677} fill="#000" />
+        <Circle cx={55.1472} cy={52.1289} r={2.61677} fill="#000" />
+        <Circle cx={64.3064} cy={52.1289} r={2.61677} fill="#000" />
+        <Circle
+          cx={73.4644}
+          cy={35.7741}
+          r={7.55593}
+          fill="#fff"
+          stroke="#000"
+          strokeWidth={3.20555}
+        />
+      </G>
+      <Defs />
+    </Svg>
+  );
+}

package/src/components/Icons/ForgotPasswordMessageIconTwo.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import Svg, { G, Rect, Path, Circle, Defs } from 'react-native-svg';
+
+export function ForgotPasswordMessageIconTwo(props: any) {
+  return (
+    <Svg
+      width={115}
+      height={114}
+      viewBox="0 0 115 114"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <G filter="url(#filter0_d_972_1131)">
+        <Rect
+          x={10.3786}
+          y={7.32275}
+          width={94.8842}
+          height={94.8842}
+          rx={16.6688}
+          fill="#fff"
+          stroke="#D9D9D9"
+          strokeWidth={1.28222}
+        />
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M44.867 32.195a9.617 9.617 0 00-9.617 9.617v19.364a9.617 9.617 0 009.617 9.617h6.19l5.604 6.731a1.282 1.282 0 001.923.055l6.326-6.786h6.517a9.617 9.617 0 009.616-9.617V41.812a9.617 9.617 0 00-9.616-9.617h-26.56z"
+          fill="#000"
+        />
+        <Circle cx={48.9888} cy={53.1295} r={2.61677} fill="#fff" />
+        <Circle cx={58.1472} cy={53.1295} r={2.61677} fill="#fff" />
+        <Circle cx={67.3064} cy={53.1295} r={2.61677} fill="#fff" />
+        <Circle
+          cx={76.4643}
+          cy={36.7749}
+          r={7.55593}
+          fill="#000"
+          stroke="#fff"
+          strokeWidth={3.20555}
+        />
+      </G>
+      <Defs />
+    </Svg>
+  );
+}

package/src/components/Icons/NewIndex.ts

@@ -0,0 +1,23 @@
+import MenuBarICon from '../../assets/svg/menu-bar.svg';
+import NewSearchIcon from '../../assets/svg/search.svg';
+import HomeIcon from '../../assets/svg/home.svg';
+import DownloadIcon from '../../assets/svg/download.svg';
+import MySpaceIcon from '../../assets/svg/my-space.svg';
+import FavoritesIcon from '../../assets/svg/favorites.svg';
+import PlayIconWithBg from '../../assets/svg/play-icon-with-bg.svg';
+import ContentErrorIcon from '../../assets/svg/content-error.svg';
+import ServerErrorIcon from '../../assets/svg/server-error.svg';
+
+const Icons = {
+  MenuBar: MenuBarICon,
+  Search: NewSearchIcon,
+  Home: HomeIcon,
+  Download: DownloadIcon,
+  MySpace: MySpaceIcon,
+  Favorites: FavoritesIcon,
+  PlayIconWithBg: PlayIconWithBg,
+  ContentError: ContentErrorIcon,
+  ServerError: ServerErrorIcon,
+};
+
+export default Icons;

package/src/components/Icons/ResendOTP.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+export function ResendOTP(props: {
+  width?: number;
+  height?: number;
+  stroke?: string;
+}) {
+  return (
+    <Svg
+      width={props.width || 14}
+      height={props.height || 13}
+      stroke={props.stroke}
+      viewBox="0 0 14 13"
+      fill="none"
+    >
+      <Path
+        d="M7.452 9.998v-.532H2.13A1.597 1.597 0 01.531 7.869v-5.74c0-.882.715-1.597 1.597-1.597h9.582c.882 0 1.597.715 1.597 1.597v5.74c0 .882-.715 1.597-1.597 1.597H10.38c-.3 0-.59.108-.816.305l-2.112 1.836V9.998z"
+        // stroke="#74798F"
+        strokeWidth={1.06462}
+      />
+    </Svg>
+  );
+}

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,33 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sun 08 Jun 2025 at 03:30 PM
+ */
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { ActivityIndicator } from 'react-native-paper';
+
+interface LoaderProps {
+  color?: string;
+}
+
+export const Loader: React.FC<LoaderProps> = ({ color }) => {
+  return (
+    <View style={styles.root}>
+      <ActivityIndicator size="large" color={color} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999,
+    backgroundColor: 'rgba(255,255,255,0.4)', // optional semi-transparent backdrop
+  },
+});

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,60 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sun 08 Jun 2025 at 03:23 PM
+ */
+import React from 'react';
+import {
+  Image,
+  View,
+  type StyleProp,
+  type ImageStyle,
+  type ViewStyle,
+} from 'react-native';
+import { moderateScale } from 'react-native-size-matters';
+
+interface ILogoProps {
+  width?: number;
+  height?: number;
+  resizeMode?: 'contain' | 'cover' | 'stretch';
+  logoUri: string;
+  imageStyle?: StyleProp<ImageStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  aspectRatio?: number;
+  fallbackUri?: string;
+}
+
+export const Logo: React.FC<ILogoProps> = ({
+  width = 200,
+  height = 50,
+  resizeMode = 'contain',
+  logoUri,
+  imageStyle,
+  containerStyle,
+  aspectRatio,
+  fallbackUri,
+}) => {
+  const finalSource = logoUri?.startsWith('http')
+    ? { uri: logoUri }
+    : fallbackUri
+      ? { uri: fallbackUri }
+      : undefined;
+
+  return (
+    <View style={containerStyle}>
+      {finalSource && (
+        <Image
+          source={finalSource}
+          resizeMode={resizeMode}
+          style={[
+            {
+              width: moderateScale(width),
+              height: moderateScale(height),
+              ...(aspectRatio ? { aspectRatio } : {}),
+            },
+            imageStyle,
+          ]}
+        />
+      )}
+    </View>
+  );
+};

package/src/components/Section/Card/Sliders/Styles/One.tsx

@@ -0,0 +1,147 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 09 Jun 2025 at 03:12 PM
+ */
+import React, { FunctionComponent, memo } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  Dimensions,
+} from 'react-native';
+import Carousel from 'react-native-reanimated-carousel';
+import { scale, verticalScale } from 'react-native-size-matters';
+import FastImage from 'react-native-fast-image';
+import LinearGradient from 'react-native-linear-gradient';
+import { IContentData, IGetSectionMeta } from '../../../../../types';
+import { useAppTheme } from '../../../../../theme/useAppTheme';
+import { AppTheme } from '../../../../../theme/themes';
+
+export interface IProps {
+  theme?: AppTheme; // theme optional now, hook use करेंगे
+  data: {
+    data: IContentData[];
+    meta: IGetSectionMeta;
+  };
+  index: number;
+}
+
+const Display = {
+  fullWidth: Dimensions.get('window').width,
+  fullHeight: Dimensions.get('window').height,
+};
+
+const SliderOne: FunctionComponent<IProps> = ({
+  index,
+  data,
+  theme,
+}): React.ReactElement => {
+  const ContentData = data?.data;
+  const [activeIndex, setActiveIndex] = React.useState<number>(0);
+
+  const { colors, isDarkMode } = useAppTheme(theme);
+
+  const LENGTH = ContentData.length || 0;
+
+  const gradientColors = isDarkMode
+    ? [colors.primaryContainer, colors.primary]
+    : [colors.primary, colors.secondary];
+
+  return (
+    <>
+      {ContentData && ContentData.length > 0 && (
+        <Carousel
+          width={Display.fullWidth}
+          height={verticalScale(180)}
+          autoPlay
+          data={ContentData}
+          scrollAnimationDuration={1000}
+          autoPlayInterval={1000}
+          mode="parallax"
+          modeConfig={{
+            parallaxScrollingOffset: 48,
+            parallaxScrollingScale: 0.9,
+          }}
+          onSnapToItem={(i) => setActiveIndex(i)}
+          renderItem={({ item }) => (
+            <View style={[styles.sliderContainer]}>
+              <TouchableOpacity activeOpacity={0.8}>
+                <FastImage
+                  source={{
+                    uri: item.thumbnail,
+                    priority: FastImage.priority.normal,
+                  }}
+                  style={styles.sliderImage}
+                />
+              </TouchableOpacity>
+            </View>
+          )}
+        />
+      )}
+
+      {index === 0 && (
+        <View style={styles.indicatorContainer}>
+          <View style={styles.indicator}>
+            {new Array(LENGTH).fill(0).map((_, i) => {
+              return i === activeIndex ? (
+                <LinearGradient
+                  start={{ x: 0, y: 0 }}
+                  end={{ x: 1, y: 0 }}
+                  colors={gradientColors}
+                  key={i}
+                  style={{
+                    width: scale(18),
+                    height: scale(8),
+                    borderRadius: scale(50),
+                  }}
+                />
+              ) : (
+                <View
+                  key={i}
+                  style={{
+                    width: scale(8),
+                    height: scale(8),
+                    backgroundColor: colors.onSurface,
+                    borderRadius: scale(50),
+                  }}
+                />
+              );
+            })}
+          </View>
+        </View>
+      )}
+    </>
+  );
+};
+
+export default memo(SliderOne);
+
+const styles = StyleSheet.create({
+  sliderContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    borderRadius: scale(10),
+    overflow: 'hidden',
+    marginTop: Platform.OS === 'ios' ? verticalScale(-30) : verticalScale(-15),
+  },
+  sliderImage: {
+    width: '100%',
+    height: undefined,
+    borderRadius: scale(10),
+    aspectRatio: 16 / 9,
+  },
+  indicatorContainer: {
+    bottom: 0,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  indicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: Platform.OS === 'ios' ? verticalScale(-25) : verticalScale(-7),
+    gap: scale(5),
+  },
+});

package/src/components/Section/Card/Sliders/index.ts

@@ -0,0 +1,13 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 09 Jun 2025 at 03:12 PM
+ */
+import SliderOne from './Styles/One';
+
+const Sliders = {
+  Styles: {
+    One: SliderOne,
+  },
+};
+
+export default Sliders;