115 lines
2.7 KiB
TypeScript
115 lines
2.7 KiB
TypeScript
import { Image } from 'expo-image';
|
|
import { memo } from 'react';
|
|
import { Dimensions, FlatList, ListRenderItem, Pressable, StyleSheet, Text, View } from 'react-native';
|
|
|
|
const WINDOW_WIDTH = Dimensions.get('window').width;
|
|
const CARD_HORIZONTAL_GUTTER = 18;
|
|
const CARD_WIDTH = Math.min(WINDOW_WIDTH - 124, 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 }],
|
|
},
|
|
]}
|
|
>
|
|
<View style={styles.imageContainer}>
|
|
<Image source={{ uri: item.image }} style={styles.image} contentFit="cover" />
|
|
</View>
|
|
<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: 12,
|
|
paddingRight: 24,
|
|
},
|
|
card: {
|
|
width: CARD_WIDTH,
|
|
marginRight: CARD_HORIZONTAL_GUTTER,
|
|
borderRadius: 24,
|
|
padding: 0,
|
|
paddingBottom: 16,
|
|
borderWidth: 1,
|
|
borderColor: '#1B1C20',
|
|
backgroundColor: '#0F1013',
|
|
shadowColor: '#000000',
|
|
shadowOpacity: 0.28,
|
|
shadowRadius: 18,
|
|
shadowOffset: { width: 0, height: 12 },
|
|
elevation: 12,
|
|
},
|
|
imageContainer: {
|
|
borderRadius: 18,
|
|
overflow: 'hidden',
|
|
marginBottom: 16,
|
|
},
|
|
image: {
|
|
width: '100%',
|
|
height: 184,
|
|
},
|
|
cardContent: {
|
|
paddingHorizontal: 2,
|
|
},
|
|
cardTitle: {
|
|
fontSize: 16,
|
|
fontWeight: '800',
|
|
color: '#F4F8FF',
|
|
textTransform: 'uppercase',
|
|
marginBottom: 6,
|
|
letterSpacing: 1.2,
|
|
},
|
|
cardSubtitle: {
|
|
fontSize: 13,
|
|
color: '#B4BBC5',
|
|
lineHeight: 18,
|
|
},
|
|
});
|