102 lines
2.4 KiB
TypeScript
102 lines
2.4 KiB
TypeScript
import { memo } from 'react';
|
|
import { Dimensions, FlatList, ListRenderItem, Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import { Image } from 'expo-image';
|
|
|
|
const WINDOW_WIDTH = Dimensions.get('window').width;
|
|
const CARD_HORIZONTAL_GUTTER = 18;
|
|
const CARD_WIDTH = Math.min(WINDOW_WIDTH - 64, 360);
|
|
|
|
export type FeatureItem = {
|
|
id: string;
|
|
title: string;
|
|
subtitle: string;
|
|
image: string;
|
|
};
|
|
|
|
type FeatureCarouselProps = {
|
|
items: FeatureItem[];
|
|
onPress?: (item: FeatureItem) => void;
|
|
};
|
|
|
|
export function FeatureCarousel({ items, onPress }: FeatureCarouselProps) {
|
|
const cardInterval = CARD_WIDTH + CARD_HORIZONTAL_GUTTER;
|
|
|
|
const renderItem: ListRenderItem<FeatureItem> = ({ item }) => <FeatureCard item={item} onPress={onPress} />;
|
|
|
|
return (
|
|
<FlatList
|
|
data={items}
|
|
renderItem={renderItem}
|
|
keyExtractor={(item) => item.id}
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
contentContainerStyle={styles.contentContainer}
|
|
snapToInterval={cardInterval}
|
|
snapToAlignment="start"
|
|
decelerationRate="fast"
|
|
/>
|
|
);
|
|
}
|
|
|
|
type FeatureCardProps = {
|
|
item: FeatureItem;
|
|
onPress?: (item: FeatureItem) => void;
|
|
};
|
|
|
|
const FeatureCard = memo(({ item, onPress }: FeatureCardProps) => {
|
|
return (
|
|
<Pressable
|
|
onPress={() => onPress?.(item)}
|
|
style={({ pressed }) => [
|
|
styles.card,
|
|
pressed && {
|
|
transform: [{ scale: 0.98 }],
|
|
},
|
|
]}
|
|
>
|
|
<Image source={{ uri: item.image }} style={styles.image} contentFit="cover" />
|
|
<View style={styles.cardContent}>
|
|
<Text style={styles.cardTitle}>{item.title}</Text>
|
|
<Text style={styles.cardSubtitle}>{item.subtitle}</Text>
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
});
|
|
FeatureCard.displayName = 'FeatureCard';
|
|
|
|
const styles = StyleSheet.create({
|
|
contentContainer: {
|
|
paddingVertical: 18,
|
|
paddingRight: 24,
|
|
},
|
|
card: {
|
|
width: CARD_WIDTH,
|
|
marginRight: CARD_HORIZONTAL_GUTTER,
|
|
borderRadius: 22,
|
|
overflow: 'hidden',
|
|
borderWidth: 1,
|
|
borderColor: '#1B1C20',
|
|
backgroundColor: '#0F1013',
|
|
},
|
|
image: {
|
|
width: '100%',
|
|
height: 184,
|
|
},
|
|
cardContent: {
|
|
padding: 18,
|
|
backgroundColor: '#111115',
|
|
},
|
|
cardTitle: {
|
|
fontSize: 16,
|
|
fontWeight: '800',
|
|
color: '#F4F8FF',
|
|
marginBottom: 6,
|
|
letterSpacing: 0.8,
|
|
},
|
|
cardSubtitle: {
|
|
fontSize: 13,
|
|
color: '#9AA0AD',
|
|
lineHeight: 18,
|
|
},
|
|
});
|