fitst commit
This commit is contained in:
Samandar Turgunboyev
227
screens/announcements/ui/AnnouncementCard.tsx
Normal file
227
screens/announcements/ui/AnnouncementCard.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { BottomSheetBackdrop, BottomSheetModal, BottomSheetScrollView } from '@gorhom/bottom-sheet';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { ResizeMode, Video } from 'expo-av';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { Package, PlayCircle } from 'lucide-react-native';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import { Dimensions, Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
|
||||
import { announcement_api } from '../lib/api';
|
||||
import { AnnouncementListBodyRes } from '../lib/type';
|
||||
|
||||
const { width, height } = Dimensions.get('window');
|
||||
const cardWidth = (width - 44) / 2;
|
||||
|
||||
export default function AnnouncementCard({
|
||||
announcement,
|
||||
}: {
|
||||
announcement: AnnouncementListBodyRes;
|
||||
}) {
|
||||
const [sheetOpen, setSheetOpen] = useState(false);
|
||||
const bottomSheetRef = useRef<BottomSheetModal>(null);
|
||||
const file = announcement.files?.[0]?.file;
|
||||
const isVideo = file?.endsWith('.mp4');
|
||||
const { isDark } = useTheme();
|
||||
|
||||
const theme = {
|
||||
cardBg: isDark ? '#1e293b' : '#ffffff',
|
||||
cardBorder: isDark ? '#334155' : '#e2e8f0',
|
||||
mediaBg: isDark ? '#0f172a' : '#f1f5f9',
|
||||
text: isDark ? '#f1f5f9' : '#0f172a',
|
||||
textSecondary: isDark ? '#cbd5e1' : '#64748b',
|
||||
textTertiary: isDark ? '#94a3b8' : '#94a3b8',
|
||||
sheetBg: isDark ? '#0f172a' : '#ffffff',
|
||||
indicator: isDark ? '#94a3b8' : '#cbd5e1',
|
||||
shadow: isDark ? '#000' : '#64748b',
|
||||
error: '#ef4444',
|
||||
placeholder: isDark ? '#cbd5e1' : '#94a3b8',
|
||||
};
|
||||
|
||||
const renderBackdrop = useCallback(
|
||||
(props: any) => (
|
||||
<BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} opacity={0.4} />
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
const openSheet = () => {
|
||||
bottomSheetRef.current?.present();
|
||||
setSheetOpen(true);
|
||||
};
|
||||
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ['announcement_detail', announcement.id],
|
||||
queryFn: () => announcement_api.detail(announcement.id),
|
||||
enabled: sheetOpen,
|
||||
});
|
||||
|
||||
const detail = data?.data?.data;
|
||||
const files = detail?.files || [];
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Card */}
|
||||
<Pressable
|
||||
style={[styles.card, { backgroundColor: theme.cardBg, shadowColor: theme.shadow }]}
|
||||
onPress={openSheet}
|
||||
android_ripple={{ color: 'rgba(99, 102, 241, 0.1)' }}
|
||||
>
|
||||
<View style={[styles.mediaContainer, { backgroundColor: theme.mediaBg }]}>
|
||||
{file ? (
|
||||
<>
|
||||
<Image source={{ uri: file }} style={styles.image} resizeMode="cover" />
|
||||
{isVideo && (
|
||||
<View style={styles.videoIconOverlay}>
|
||||
<PlayCircle size={36} color="white" fill="rgba(0,0,0,0.35)" />
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<View style={styles.placeholder}>
|
||||
<Package size={40} color={theme.placeholder} />
|
||||
</View>
|
||||
)}
|
||||
<LinearGradient colors={['transparent', 'rgba(0,0,0,0.6)']} style={styles.gradient} />
|
||||
</View>
|
||||
|
||||
<View style={styles.content}>
|
||||
<Text style={[styles.title, { color: theme.text }]} numberOfLines={2}>
|
||||
{announcement.title}
|
||||
</Text>
|
||||
<Text style={[styles.desc, { color: theme.textSecondary }]} numberOfLines={2}>
|
||||
{announcement.description}
|
||||
</Text>
|
||||
<View style={styles.footer}>
|
||||
<Ionicons name="time-outline" size={14} color={theme.textTertiary} />
|
||||
<Text style={[styles.date, { color: theme.textTertiary }]}>
|
||||
{new Date(announcement.created_at).toLocaleDateString('uz-UZ')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Pressable>
|
||||
|
||||
<BottomSheetModal
|
||||
ref={bottomSheetRef}
|
||||
index={0}
|
||||
snapPoints={['70%', '95%']}
|
||||
backdropComponent={renderBackdrop}
|
||||
handleIndicatorStyle={{ backgroundColor: theme.indicator, width: 50 }}
|
||||
backgroundStyle={{ backgroundColor: theme.sheetBg }}
|
||||
enablePanDownToClose
|
||||
>
|
||||
<BottomSheetScrollView contentContainerStyle={styles.sheetContent}>
|
||||
{isLoading && (
|
||||
<Text style={[styles.loading, { color: theme.textSecondary }]}>Yuklanmoqda...</Text>
|
||||
)}
|
||||
{isError && <Text style={[styles.error, { color: theme.error }]}>Xatolik yuz berdi</Text>}
|
||||
|
||||
{detail && (
|
||||
<>
|
||||
{/* Media carousel */}
|
||||
{files.length > 0 && (
|
||||
<ScrollView
|
||||
horizontal
|
||||
pagingEnabled
|
||||
showsHorizontalScrollIndicator={false}
|
||||
style={styles.carousel}
|
||||
>
|
||||
{files.map((f) => {
|
||||
const fileIsVideo = f.file?.endsWith('.mp4');
|
||||
return (
|
||||
<View key={f.id} style={styles.sheetMediaContainer}>
|
||||
{fileIsVideo ? (
|
||||
<Video
|
||||
source={{ uri: f.file }}
|
||||
style={styles.media}
|
||||
useNativeControls
|
||||
resizeMode={ResizeMode.CONTAIN}
|
||||
/>
|
||||
) : (
|
||||
<Image source={{ uri: f.file }} style={styles.media} />
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
)}
|
||||
|
||||
{/* Title */}
|
||||
<Text style={[styles.sheetTitle, { color: theme.text }]}>{detail.title}</Text>
|
||||
|
||||
{/* Meta */}
|
||||
<View style={styles.metaRow}>
|
||||
<View style={styles.metaItem}>
|
||||
<Ionicons name="calendar-outline" size={16} color={theme.textTertiary} />
|
||||
<Text style={[styles.metaText, { color: theme.textTertiary }]}>
|
||||
{new Date(detail.created_at).toLocaleDateString()}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.metaItem}>
|
||||
<Ionicons name="eye-outline" size={16} color={theme.textTertiary} />
|
||||
<Text style={[styles.metaText, { color: theme.textTertiary }]}>
|
||||
{detail.total_view_count} ko'rildi
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Description */}
|
||||
<Text style={[styles.sheetDesc, { color: theme.textSecondary }]}>
|
||||
{detail.description}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</BottomSheetScrollView>
|
||||
</BottomSheetModal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
width: cardWidth,
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
marginBottom: 16,
|
||||
},
|
||||
mediaContainer: {
|
||||
width: '100%',
|
||||
height: 160,
|
||||
position: 'relative',
|
||||
},
|
||||
image: { width: '100%', height: '100%' },
|
||||
videoIconOverlay: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0,0,0,0.25)',
|
||||
},
|
||||
placeholder: { flex: 1, alignItems: 'center', justifyContent: 'center' },
|
||||
gradient: { position: 'absolute', bottom: 0, left: 0, right: 0, height: 60 },
|
||||
content: { padding: 12 },
|
||||
title: { fontSize: 15, fontWeight: '700', marginBottom: 4 },
|
||||
desc: { fontSize: 13, marginBottom: 6 },
|
||||
footer: { flexDirection: 'row', alignItems: 'center', gap: 4 },
|
||||
date: { fontSize: 12 },
|
||||
|
||||
// BottomSheet styles
|
||||
sheetContent: { padding: 20, gap: 12 },
|
||||
carousel: { marginBottom: 12 },
|
||||
sheetMediaContainer: { width: width - 40, height: 200, marginRight: 12 },
|
||||
media: { width: '100%', height: '100%', borderRadius: 16 },
|
||||
sheetTitle: { fontSize: 18, fontWeight: '700' },
|
||||
metaRow: { flexDirection: 'row', gap: 16, marginVertical: 8 },
|
||||
metaItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },
|
||||
metaText: { fontSize: 14 },
|
||||
sheetDesc: { fontSize: 14, lineHeight: 20 },
|
||||
loading: { fontSize: 16 },
|
||||
error: { fontSize: 16 },
|
||||
});
|
||||
Reference in New Issue
Block a user