@umituz/react-native-ai-generation-content 1.17.245 → 1.17.246

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.245",
+  "version": "1.17.246",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/domains/creations/presentation/components/CreationDetail/DetailHeader.tsx

@@ -1,15 +1,12 @@
-
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { AtomicText, AtomicIcon, useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
+import { AtomicIcon, useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
 
 interface DetailHeaderProps {
-    readonly title: string;
-    readonly date: string;
     readonly onClose: () => void;
 }
 
-export const DetailHeader: React.FC<DetailHeaderProps> = ({ title, date, onClose }) => {
+export const DetailHeader: React.FC<DetailHeaderProps> = ({ onClose }) => {
     const tokens = useAppDesignTokens();
     const styles = useStyles(tokens);
 
@@ -18,62 +15,21 @@ export const DetailHeader: React.FC<DetailHeaderProps> = ({ title, date, onClose
             <TouchableOpacity style={styles.closeButton} onPress={onClose}>
                 <AtomicIcon name="arrow-back" size="md" color="onSurface" />
             </TouchableOpacity>
-
-            <View style={styles.titleContainer}>
-                <AtomicText style={styles.title}>{title}</AtomicText>
-                <View style={styles.dateBadge}>
-                    <AtomicIcon name="calendar-outline" size="md" color="primary" />
-                    <AtomicText style={styles.dateText}>{date}</AtomicText>
-                </View>
-            </View>
-
-            <View style={styles.placeholder} />
         </View>
     );
 };
 
 const useStyles = (tokens: DesignTokens) => StyleSheet.create({
     headerContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingTop: tokens.spacing.sm,
-        paddingBottom: tokens.spacing.md,
-        paddingHorizontal: tokens.spacing.md,
+        paddingVertical: tokens.spacing.xs,
+        paddingHorizontal: tokens.spacing.sm,
         backgroundColor: tokens.colors.background,
-        borderBottomWidth: 1,
-        borderBottomColor: tokens.colors.border,
-        zIndex: 10,
     },
     closeButton: {
         padding: tokens.spacing.xs,
-        marginRight: tokens.spacing.sm,
-    },
-    titleContainer: {
-        flex: 1,
-        alignItems: 'center',
-    },
-    title: {
-        fontSize: 18,
-        fontWeight: '700',
-        color: tokens.colors.textPrimary,
-        marginBottom: 4,
-        textAlign: 'center',
-    },
-    dateBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        paddingHorizontal: 10,
-        paddingVertical: 4,
-        borderRadius: 12,
-        backgroundColor: tokens.colors.primary + '15',
-    },
-    dateText: {
-        fontSize: 12,
-        fontWeight: '600',
-        color: tokens.colors.primary,
-    },
-    placeholder: {
         width: 40,
+        height: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
     },
 });

package/src/domains/creations/presentation/components/CreationDetail/DetailImage.tsx

@@ -39,7 +39,8 @@ export const DetailImage: React.FC<DetailImageProps> = ({ uri, onPress }) => {
 const styles = StyleSheet.create({
     container: {
         paddingHorizontal: HORIZONTAL_PADDING,
-        marginVertical: 16,
+        marginTop: 8,
+        marginBottom: 12,
     },
     frame: {
         borderRadius: 16,

package/src/domains/creations/presentation/components/CreationDetail/DetailInfo.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { AtomicText, AtomicIcon, useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
+
+interface DetailInfoProps {
+    readonly title: string;
+    readonly date: string;
+}
+
+export const DetailInfo: React.FC<DetailInfoProps> = ({ title, date }) => {
+    const tokens = useAppDesignTokens();
+    const styles = useStyles(tokens);
+
+    return (
+        <View style={styles.container}>
+            <AtomicText style={styles.title}>{title}</AtomicText>
+            <View style={styles.dateBadge}>
+                <AtomicIcon name="calendar-outline" size="sm" color="primary" />
+                <AtomicText style={styles.dateText}>{date}</AtomicText>
+            </View>
+        </View>
+    );
+};
+
+const useStyles = (tokens: DesignTokens) => StyleSheet.create({
+    container: {
+        paddingHorizontal: tokens.spacing.md,
+        paddingVertical: tokens.spacing.sm,
+        gap: tokens.spacing.xs,
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: tokens.colors.textPrimary,
+    },
+    dateBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        alignSelf: 'flex-start',
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 12,
+        backgroundColor: tokens.colors.primary + '15',
+    },
+    dateText: {
+        fontSize: 13,
+        fontWeight: '600',
+        color: tokens.colors.primary,
+    },
+});

package/src/domains/creations/presentation/screens/CreationDetailScreen.tsx

@@ -6,6 +6,7 @@ import type { Creation } from '../../domain/entities/Creation';
 import type { CreationsConfig } from '../../domain/value-objects/CreationsConfig';
 import { hasVideoContent, getPreviewUrl } from '../../domain/utils';
 import { DetailHeader } from '../components/CreationDetail/DetailHeader';
+import { DetailInfo } from '../components/CreationDetail/DetailInfo';
 import { DetailImage } from '../components/CreationDetail/DetailImage';
 import { DetailVideo } from '../components/CreationDetail/DetailVideo';
 import { DetailStory } from '../components/CreationDetail/DetailStory';
@@ -78,15 +79,11 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
     return (
         <View style={[styles.container, { backgroundColor: tokens.colors.background }]}>
             <View style={{ paddingTop: insets.top }}>
-                <DetailHeader
-                    title={title}
-                    date={date}
-                    onClose={onClose}
-                />
+                <DetailHeader onClose={onClose} />
             </View>
             <ScrollView
                 style={styles.scrollView}
-                contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 32 }]}
+                contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 24 }]}
                 showsVerticalScrollIndicator={false}
             >
                 {isVideo ? (
@@ -95,6 +92,8 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
                     <DetailImage uri={creation.uri} onPress={handleImagePress} />
                 )}
 
+                <DetailInfo title={title} date={date} />
+
                 {story ? (
                     <DetailStory story={story} />
                 ) : null}
@@ -129,6 +128,6 @@ const styles = StyleSheet.create({
         flex: 1,
     },
     scrollContent: {
-        paddingTop: 8,
+        paddingTop: 4,
     },
 });