components/EventCard.tsx - master - swagateam/SberHackathonBack

components/EventCard.tsx
127 строк3 KB
JewelV
adminMobile
23 ноя 2025, 09:09
23 ноя 2025, 09:093f0ebd4
import { Ionicons } from '@expo/vector-icons';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { useRouter } from 'expo-router';
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
type RootStackParamList = {
  EventDetail: { event: Event };
};

type NavigationProp = NativeStackNavigationProp<RootStackParamList>;

type Props = {
  event: Event;
  onPress: (id: string) => void;
};

export const EventCard: React.FC<Props> = ({ event, onPress }) => {
const router = useRouter();
  return (
    <TouchableOpacity
      style={styles.card}
                    onPress={() => {
          router.push({
  pathname: '(screens)/EventDetailScreen',
  params: { id: event.id }
});
        }} // 👈 вызываем с id

    >
      <View style={styles.header}>
        <View style={styles.dateBadge}>
          <Text style={styles.dateText}>{event.date}</Text>
        </View>
        <Text style={styles.title}>{event.title}</Text>
        {event.isRegistered && (
          <View style={styles.registeredBadge}>
            <Text style={styles.registeredText}>Зарегистрированы</Text>
          </View>
        )}
      </View>

      <View style={styles.infoRow}>
        <Ionicons name="time-outline" size={18} color="#888888" style={styles.icon} />
        <Text style={styles.time}>{event.time}</Text>
      </View>
      <View style={styles.infoRow}>
        <Ionicons name="location-outline" size={18} color="#888888" style={styles.icon} />
        <Text style={styles.address}>{event.address}</Text>
      </View>

      <Text style={styles.description} numberOfLines={4}>
        {event.description}
      </Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#2A2A2A',
    borderRadius: 16,
    padding: 16,
    marginHorizontal: 16,
    marginVertical: 8,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    flexWrap: 'wrap',
    marginBottom: 12,
  },
  dateBadge: {
    backgroundColor: '#AAC0A7',
    width: 56,
    height: 56,
    borderRadius: 12,
    marginRight: 12,
    justifyContent: "center",
    alignItems: "center",
  },
  dateText: {
    fontSize: 14,
    fontWeight: '300',
    color: '#000000',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#AAC0A7',
    flex: 1,
  },
  registeredBadge: {
    backgroundColor: '#AAC0A7',
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 5,
    marginLeft: 8,
    marginTop: -20,
  },
  registeredText: {
    color: '#000000',
    fontSize: 12,
    fontWeight: '400',
  },
  infoRow: {
    marginBottom: 6,
    flexDirection: 'row',
    color: '#888888',
  },
  time: {
    color: '#888888',
    fontSize: 15,
  },
  address: {
    color: '#888888',
    fontSize: 15,
  },
  icon: {
    marginRight: 8,
  },
  description: {
    color: '#bbb',
    fontSize: 14,
    lineHeight: 20,
    marginTop: 8,
  },
});