cally/components/pages/calendar/EventCell.tsx

import React from 'react';
import {StyleSheet, TouchableOpacity, View} from 'react-native';
import {Text} from 'react-native-ui-lib';
import CachedImage from 'expo-cached-image';
import {format} from 'date-fns';
import {colorMap} from '@/constants/colorMap';

interface EventCellProps {
    event: any;
    onPress: (event: any) => void;
    attendees: any[];
}

export const EventCell: React.FC<EventCellProps> = React.memo((
    {
        event,
        onPress,
        attendees
    }) => {
    return (
        <TouchableOpacity
            onPress={() => onPress(event)}
            style={[styles.eventCell, {backgroundColor: event.eventColor}]}
        >
            <Text style={styles.eventTitle} numberOfLines={1}>
                {event.title}
            </Text>
            <Text style={[styles.eventTitle, {fontSize: 10, opacity: 0.8}]}>
                {format(new Date(event.start.dateTime), 'h:mm a')} - {format(new Date(event.end.dateTime), 'h:mm a')}
            </Text>

            {attendees.length > 0 && (
                <View style={styles.attendeesContainer}>
                    {attendees.slice(0, 3).map((attendee, index) => (
                        <View
                            key={attendee?.uid}
                            style={[styles.attendeeIcon, {left: index * 19}]}
                        >
                            {attendee.pfp ? (
                                <CachedImage
                                    source={{uri: attendee.pfp}}
                                    style={styles.attendeeImage}
                                    cacheKey={attendee.pfp}
                                />
                            ) : (
                                <Text style={styles.attendeeInitials}>
                                    {attendee?.firstName?.at(0)}
                                    {attendee?.lastName?.at(0)}
                                </Text>
                            )}
                        </View>
                    ))}
                    {attendees.length > 3 && (
                        <View style={[styles.attendeeCount, {left: 3 * 19}]}>
                            <Text style={styles.attendeeCountText}>
                                +{attendees.length - 3}
                            </Text>
                        </View>
                    )}
                </View>
            )}
        </TouchableOpacity>
    );
});

const styles = StyleSheet.create({
    eventCell: {
        flex: 1,
        borderRadius: 4,
        padding: 8,
        height: '100%',
    },
    eventTitle: {
        color: 'white',
        fontSize: 12,
        fontFamily: "PlusJakartaSans_500Medium",
    },
    attendeesContainer: {
        flexDirection: 'row',
        marginTop: 8,
        height: 27.32,
    },
    attendeeIcon: {
        position: 'absolute',
        width: 20,
        height: 20,
        borderRadius: 50,
        borderWidth: 2,
        borderColor: '#f2f2f2',
        overflow: 'hidden',
    },
    attendeeImage: {
        width: '100%',
        height: '100%',
    },
    attendeeInitials: {
        color: 'white',
        fontSize: 12,
        fontFamily: "Manrope_600SemiBold",
    },
    attendeeCount: {
        position: 'absolute',
        width: 27.32,
        height: 27.32,
        borderRadius: 50,
        borderWidth: 2,
        borderColor: '#f2f2f2',
        backgroundColor: colorMap.pink,
        justifyContent: 'center',
        alignItems: 'center',
    },
    attendeeCountText: {
        color: 'white',
        fontFamily: "Manrope_600SemiBold",
        fontSize: 12,
    },
});