Merge pull request #3107 from KBVE/dev

Preparing Alpha Branch

.github/workflows/ci-alpha.yml

@@ -165,11 +165,11 @@ jobs:
           API_TOKEN_GITHUB: ${{ secrets.UNITY_PAT }}
         with:
           source_file: 'dist/apps/expo-lcagents/'
-          destination_repo: 'kbve/lc-agents.com'
+          destination_repo: 'KBVE/lc-agents.com'
           destination_folder: '/docs'
           destination_branch: 'main'
           destination_branch_create: 'patch-kbve-lcagents-deploy-${{ needs.globals.outputs.sha256head }}'
-          user_email: '5599058+[email protected]'
+          user_email: '[email protected]'
           user_name: 'h0lybyte'
           commit_message: ${{ github.event.head_commit.message }}
           rsync_option: '-avrh --delete'

apps/expo-lcagents/src/app/consulting.tsx

@@ -14,6 +14,26 @@ const Consulting = () => {
 	const navigation = useNavigation();
 	const router = useRouter();
 
+	const postData = {
+		username: 'john_doe',
+		location: 'San Francisco',
+		avatarUrl: 'https://example.com/avatar.jpg',
+		postImageUrl:
+			'https://images.unsplash.com/photo-1729326688022-865844a8baa9?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&',
+		likes: [
+			{ avatarUrl: 'https://example.com/like1.jpg', name: 'alice' },
+			{ avatarUrl: 'https://example.com/like2.jpg', name: 'bob' },
+		],
+		caption: 'This is a great day!',
+	};
+
+	const postId = '01JAYT7NKZPW7BXYKDHDWDHMVC';
+
+	const handleAction = (actionState: string, content: string) => {
+		console.log(`Action: ${actionState}, Content: ${content}`);
+		// Handle the action and content here (e.g., update state or UI)
+	};
+
 	// Memoizing navigation update function
 	const updateNavigationOptions = useCallback(() => {
 		navigation.setOptions({
@@ -41,7 +61,6 @@ const Consulting = () => {
 				ai="center"
 				padding="$1"
 				flexDirection="column"
-
 				$gtLg={{
 					flexDirection: 'row', // For screens greater than large
 					justifyContent: 'space-between',
@@ -52,13 +71,13 @@ const Consulting = () => {
 				<YStack
 					jc="center"
 					ai="center"
-          gap="$2"
-          rowGap="$2"
+					gap="$2"
+					rowGap="$2"
 					$sm={{ width: '50%', display: 'block' }}
 					$gtLg={{
 						flex: 1,
 						maxWidth: '33%', // Slightly smaller maxWidth on extra-large screens
-            paddingLeft: "$8"
+						paddingLeft: '$8',
 					}}>
 					<MemoizedLottieAnimation
 						lottieJSON={lottieConsultingAnimation}
@@ -72,39 +91,34 @@ const Consulting = () => {
 					<SizableText size={'$3'} theme="alt2">
 						Welcome to the Consultants of LC Agents
 					</SizableText>
-					<InstaCard />
-					<InstaCard />
-					<InstaCard />
 				</YStack>
-        <Separator alignSelf="stretch"  marginVertical={15} />
-				<YStack
-					jc="center"
-					ai="center"
-					$sm={{ width: '100%' }} // Full width on small screens with spacing
-					gap={'$2'}
-					$gtLg={{
-						flex: 1,
-						maxWidth: '33%', // Slightly smaller on extra-large screens
-					}}>
-					<InstaCard />
-					<InstaCard />
-					<InstaCard />
-				</YStack>
-        <Separator alignSelf="stretch"  marginVertical={15}  />
+
 				<YStack
 					jc="center"
 					ai="center"
-					$sm={{ width: '100%' }} // Full width on small screens with spacing
-					gap={'$2'}
+					gap="$2"
+					rowGap="$2"
+					$sm={{ width: '50%', display: 'block' }}
 					$gtLg={{
 						flex: 1,
-						maxWidth: '33%', // Slightly smaller on extra-large screens
+						maxWidth: '33%', // Slightly smaller maxWidth on extra-large screens
+						paddingLeft: '$8',
 					}}>
-					<InstaCard />
-					<InstaCard />
-					<InstaCard />
+					<InstaCard
+						username={postData.username}
+						location={postData.location}
+						avatarUrl={postData.avatarUrl}
+						postImageUrl={postData.postImageUrl}
+						likes={postData.likes}
+						caption={postData.caption}
+						ulid={postId}
+						onAction={handleAction} // Pass the callback to handle actions
+					/>
 				</YStack>
 			</XStack>
+			<XStack>
+
+			</XStack>
 		</ScrollView>
 	);
 };

packages/expo-bbq/src/components/card/InstaCard.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from 'react';
+import React, { memo, useCallback } from 'react';
 import {
 	YStack,
 	XStack,
@@ -24,10 +24,37 @@ interface PopoverDemoProps extends PopoverProps {
 	Icon?: any;
 	Name?: string;
 	shouldAdapt?: boolean;
+	onAction: (actionState: string, content: string) => void;
 }
 
-export function InstaCard() {
-	const [shouldAdapt, setShouldAdapt] = useState(true);
+interface InstaCardProps {
+	username: string;
+	location: string;
+	avatarUrl: string;
+	postImageUrl: string;
+	likes: Array<{ avatarUrl: string; name: string }>;
+	caption: string;
+	ulid: string;
+	onAction: (actionState: string, content: string) => void;
+}
+
+// Memoizing InstaCard to avoid unnecessary re-renders
+export const InstaCard = memo(function InstaCard({
+	username,
+	location,
+	avatarUrl,
+	postImageUrl,
+	likes,
+	caption,
+	ulid,
+	onAction,
+}: InstaCardProps) {
+	const handleAction = useCallback(
+		(actionState: string, content: string) => {
+			onAction(actionState, content);
+		},
+		[onAction], // Ensures the callback only changes if onAction changes
+	);
 
 	return (
 		<YStack
@@ -43,19 +70,17 @@ export function InstaCard() {
 				<XStack alignItems="center" gap="$2">
 					<Avatar circular size="$3">
 						<Avatar.Image
-							source={{
-								uri: 'https://source.unsplash.com/50x50/?portrait',
-							}}
+							source={{ uri: avatarUrl }}
 							width="100%"
 							height="100%"
 						/>
 					</Avatar>
 					<YStack>
 						<SizableText fontWeight="600" fontSize="$2">
-							leroy_jenkins72
+							{username}
 						</SizableText>
 						<SizableText fontSize="$1" color="$gray10">
-							Somewhere
+							{location}
 						</SizableText>
 					</YStack>
 				</XStack>
@@ -65,12 +90,13 @@ export function InstaCard() {
 					placement="bottom"
 					Icon={MoreVertical}
 					Name="options-popover"
+					onAction={handleAction}
 				/>
 			</XStack>
 
 			{/* Image */}
 			<Image
-				source={{ uri: 'https://images.unsplash.com/photo-1729326688022-865844a8baa9?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&' }}
+				source={{ uri: postImageUrl }}
 				width="100%"
 				height={300}
 				borderRadius="$2"
@@ -86,65 +112,55 @@ export function InstaCard() {
 						placement="bottom"
 						Icon={Heart}
 						Name="like-popover"
+						onAction={handleAction}
 					/>
 					<PopoverDemo
 						placement="bottom"
 						Icon={MessageCircle}
 						Name="comment-popover"
+						onAction={handleAction}
 					/>
 					<PopoverDemo
 						placement="bottom"
 						Icon={Share2}
 						Name="share-popover"
+						onAction={handleAction}
 					/>
 				</XStack>
 				<PopoverDemo
 					placement="bottom"
 					Icon={Bookmark}
 					Name="bookmark-popover"
+					onAction={handleAction}
 				/>
 			</XStack>
 
 			{/* Likes Section */}
 			<XStack paddingHorizontal="$3" gap="$2" alignItems="center">
-				<Avatar circular size="$2">
-					<Avatar.Image
-						source={{
-							uri: 'https://source.unsplash.com/40x40/?portrait?1',
-						}}
-						width="100%"
-						height="100%"
-					/>
-				</Avatar>
-				<Avatar circular size="$2">
-					<Avatar.Image
-						source={{
-							uri: 'https://source.unsplash.com/40x40/?portrait?2',
-						}}
-						width="100%"
-						height="100%"
-					/>
-				</Avatar>
-				<Avatar circular size="$2">
-					<Avatar.Image
-						source={{
-							uri: 'https://source.unsplash.com/40x40/?portrait?3',
-						}}
-						width="100%"
-						height="100%"
-					/>
-				</Avatar>
+				{likes.map((like, index) => (
+					<Avatar key={index} circular size="$2">
+						<Avatar.Image
+							source={{ uri: like.avatarUrl }}
+							width="100%"
+							height="100%"
+						/>
+					</Avatar>
+				))}
 				<SizableText fontSize="$2">
-					Liked by <SizableText fontWeight="600">Mamba UI</SizableText> and{' '}
-					<SizableText fontWeight="600">86 others</SizableText>
+					Liked by{' '}
+					<SizableText fontWeight="600">{likes[0]?.name}</SizableText>{' '}
+					and{' '}
+					<SizableText fontWeight="600">
+						{likes.length} others
+					</SizableText>
 				</SizableText>
 			</XStack>
 
 			{/* Caption */}
 			<YStack paddingHorizontal="$3" paddingVertical="$2">
 				<SizableText fontSize="$2">
-					<SizableText fontWeight="600">leroy_jenkins72 </SizableText>
-					Nemo ea quasi debitis impedit!
+					<SizableText fontWeight="600">{username} </SizableText>
+					{caption}
 				</SizableText>
 			</YStack>
 
@@ -153,20 +169,27 @@ export function InstaCard() {
 			<Input margin="$3" placeholder="Add a comment..." />
 		</YStack>
 	);
-}
+});
 
 // PopoverDemo component
 
 function PopoverDemo({
 	Icon,
 	Name,
 	shouldAdapt = true,
+	onAction,
 	...props
 }: PopoverDemoProps) {
+	const handleClick = () => {
+		if (Name) {
+			onAction(Name, `${Name} content is displayed`);
+		}
+	};
+
 	return (
 		<Popover size="$5" allowFlip {...props}>
 			<Popover.Trigger asChild>
-				<Button iconAfter={Icon} />
+				<Button iconAfter={Icon} onPress={handleClick} />
 			</Popover.Trigger>
 
 			{shouldAdapt && (