@umituz/react-native-settings 5.4.25 → 5.4.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/domains/video-tutorials/presentation/components/VideoTutorialCard.tsx +28 -20
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-settings",
3
- "version": "5.4.25",
3
+ "version": "5.4.26",
4
4
  "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification - expo-store-review and expo-device now lazy loaded",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./dist/index.d.ts",
package/src/domains/video-tutorials/presentation/components/VideoTutorialCard.tsx CHANGED
@@ -7,6 +7,7 @@ import React, { useMemo } from "react";
7
7
  import { View, Image, StyleSheet, TouchableOpacity } from "react-native";
8
8
  import { AtomicText } from "@umituz/react-native-design-system/atoms";
9
9
  import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
10
+ import { useResponsive } from "@umituz/react-native-design-system/responsive";
10
11
  import type { VideoTutorial } from "../../types";
11
12
 
12
13
  const formatDuration = (seconds: number): string => {
@@ -27,7 +28,8 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = React.memo(({
27
28
  horizontal = false,
28
29
  }) => {
29
30
  const tokens = useAppDesignTokens();
30
- const styles = useMemo(() => getStyles(tokens), [tokens]);
31
+ const responsive = useResponsive();
32
+ const styles = useMemo(() => getStyles(tokens, responsive, horizontal), [tokens, responsive, horizontal]);
31
33
 
32
34
  return (
33
35
  <TouchableOpacity
@@ -86,22 +88,28 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = React.memo(({
86
88
  );
87
89
  });
88
90
 
89
- const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => StyleSheet.create({
90
- container: { borderRadius: 12, borderWidth: 1, marginBottom: 12, overflow: "hidden" },
91
- horizontalContainer: { width: 280, marginRight: 12, marginBottom: 0 },
92
- imageContainer: { position: "relative" },
93
- thumbnail: { width: "100%", height: 180 },
94
- horizontalThumbnail: { height: 140 },
95
- durationBadge: { position: "absolute", bottom: 8, right: 8, paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, backgroundColor: "rgba(0,0,0,0.7)" },
96
- durationText: { color: tokens.colors.textInverse },
97
- featuredBadge: { position: "absolute", top: 8, left: 8, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4 },
98
- featuredText: { fontWeight: "600" },
99
- content: { padding: 12 },
100
- title: { fontWeight: "600", marginBottom: 6, color: tokens.colors.textPrimary },
101
- horizontalTitle: {},
102
- description: { marginBottom: 8 },
103
- horizontalDescription: { marginBottom: 6 },
104
- metadata: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
105
- category: { textTransform: "capitalize", fontWeight: "500" },
106
- difficulty: { textTransform: "capitalize", fontWeight: "500" },
107
- });
91
+ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>, responsive: ReturnType<typeof useResponsive>, horizontal: boolean) => {
92
+ const horizontalWidth = responsive.isTabletDevice ? 320 : 280;
93
+ const thumbnailHeight = responsive.isTabletDevice ? 200 : 180;
94
+ const horizontalThumbnailHeight = responsive.isTabletDevice ? 160 : 140;
95
+
96
+ return StyleSheet.create({
97
+ container: { borderRadius: 12, borderWidth: 1, marginBottom: responsive.verticalPadding, overflow: "hidden" },
98
+ horizontalContainer: { width: horizontalWidth, marginRight: responsive.horizontalPadding, marginBottom: 0 },
99
+ imageContainer: { position: "relative" },
100
+ thumbnail: { width: "100%", height: thumbnailHeight },
101
+ horizontalThumbnail: { height: horizontalThumbnailHeight },
102
+ durationBadge: { position: "absolute", bottom: 8, right: 8, paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, backgroundColor: "rgba(0,0,0,0.7)" },
103
+ durationText: { color: tokens.colors.textInverse },
104
+ featuredBadge: { position: "absolute", top: 8, left: 8, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4 },
105
+ featuredText: { fontWeight: "600" },
106
+ content: { padding: responsive.horizontalPadding },
107
+ title: { fontWeight: "600", marginBottom: 6, color: tokens.colors.textPrimary },
108
+ horizontalTitle: {},
109
+ description: { marginBottom: 8 },
110
+ horizontalDescription: { marginBottom: 6 },
111
+ metadata: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
112
+ category: { textTransform: "capitalize", fontWeight: "500" },
113
+ difficulty: { textTransform: "capitalize", fontWeight: "500" },
114
+ });
115
+ };