expo-popcore-old/components/bestai/community-grid.tsx

import { Ionicons } from '@expo/vector-icons';
import { Image as ExpoImage } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { memo } from 'react';
import {
  FlatList,
  ListRenderItemInfo,
  Pressable,
  Image as RNImage,
  StyleProp,
  StyleSheet,
  Text,
  View,
  ViewStyle,
} from 'react-native';

export type CommunityItem = {
  id: string;
  title: string;
  image: string;
  chip: string;
  actionLabel: string;
  width?: number;
  height?: number;
};

type CommunityGridProps = {
  items: CommunityItem[];
  onPressCard?: (item: CommunityItem) => void;
  onPressAction?: (item: CommunityItem) => void;
};

const EMPTY_ITEM: CommunityItem = {
  id: 'empty',
  title: '',
  image: '',
  chip: '',
  actionLabel: '',
};

export function CommunityGrid({ items, onPressCard, onPressAction }: CommunityGridProps) {
  const renderItem = ({ item, index }: ListRenderItemInfo<CommunityItem>) => {
    const isEmpty = item.id === 'empty';
    const isLeftColumn = index % 2 === 0;

    return (
      <View style={[styles.cardWrapper, isLeftColumn ? styles.cardLeft : styles.cardRight]}>
        {isEmpty ? (
          <View style={styles.emptyCard} />
        ) : (
          <CommunityCard
            item={item}
            onPressCard={onPressCard}
            onPressAction={onPressAction}
          />
        )}
      </View>
    );
  };

  const data = items.length === 0
    ? [EMPTY_ITEM, EMPTY_ITEM]
    : items.length % 2 === 1
      ? [...items, EMPTY_ITEM]
      : items;

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      numColumns={2}
      scrollEnabled={false}
      columnWrapperStyle={styles.row}
      contentContainerStyle={styles.contentContainer}
    />
  );
}

type CommunityCardProps = {
  item: CommunityItem;
  style?: StyleProp<ViewStyle>;
  onPressCard?: (item: CommunityItem) => void;
  onPressAction?: (item: CommunityItem) => void;
};
import VideoPlayer from '@/components/sker/video-player/video-player'

export const CommunityCard = memo(({ item, style, onPressCard, onPressAction }: CommunityCardProps) => {
  const isVideo = /\.(mp4|webm|ogg|mov|avi)$/i.test(item.image);

  return (
    <View style={[styles.card, style]}>
      <Pressable onPress={() => onPressCard?.(item)} style={styles.imageWrapper}>
        {isVideo ? (
          <VideoPlayer
            source={{ uri: item.image }}
            originalImage={item.image}
            style={[styles.cardImage, item.height ? { height: item.height } : {}]}
          />
        ) : (
          <ExpoImage
            source={{ uri: item.image }}
            style={[styles.cardImage, item.height ? { height: item.height } : {}]}
            contentFit="cover"
          />
        )}
        <LinearGradient
          colors={['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.8)']}
          style={styles.imageGradient}
        />
        <Text style={styles.cardTitle}>{item.chip}</Text>
      </Pressable>
      <ActionButton label={item.actionLabel} onPress={() => onPressAction?.(item)} />
    </View>
  );
});
CommunityCard.displayName = 'CommunityCard';

type ActionButtonProps = {
  label: string;
  onPress: () => void;
};

const ActionButton = memo(({ label, onPress }: ActionButtonProps) => {
  return (
    <Pressable onPress={onPress} style={({ pressed }) => [styles.button, pressed && styles.buttonPressed]}>
      <RNImage
        source={require('@/assets/icons/start.svg')}
        style={styles.buttonIcon}
        resizeMode="contain"
      />
      <Text style={styles.buttonText}>{label}</Text>
    </Pressable>
  );
});
ActionButton.displayName = 'CommunityActionButton';

const styles = StyleSheet.create({
  contentContainer: {
    paddingBottom: 12,
  },
  row: {
    justifyContent: 'space-between',
    marginBottom: 18,
  },
  cardWrapper: {
    flex: 1,
  },
  cardLeft: {
    marginRight: 8,
  },
  cardRight: {
    marginLeft: 8,
  },
  emptyCard: {
    backgroundColor: 'transparent',
    borderRadius: 20,
  },
  card: {
    borderRadius: 20,
    padding: 0,
  },
  imageWrapper: {
    position: 'relative',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    overflow: 'hidden',
  },
  cardImage: {
    width: '100%',
    height: undefined,
  },
  imageGradient: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    height: 80,
  },
  cardTitle: {
    position: 'absolute',
    left: 12,
    right: 12,
    bottom: 12,
    fontSize: 13,
    fontWeight: '600',
    color: '#FFFFFF',
    textAlign: 'center',
  },
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
  },
  buttonPressed: {
    opacity: 0.7,
  },
  buttonIcon: {
    width: 16,
    height: 16,
    marginRight: 6,
    tintColor: '#C7FF00',
  },
  buttonText: {
    fontSize: 14,
    fontWeight: '700',
    color: '#C7FF00',
  },
});