|
|
@@ -1,53 +1,98 @@
|
|
|
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
|
|
|
import React from 'react'
|
|
|
-import Header from '../../atoms/Header'
|
|
|
-import { List } from 'react-native-paper'
|
|
|
import fonts from '../../../theme/fonts'
|
|
|
import colors from '../../../theme/colors'
|
|
|
import ImageBGCard from '../Cards/ImageBGCard'
|
|
|
import images from '../../../assets/images/images'
|
|
|
import SectionHeader from '../Headers/SectionHeader'
|
|
|
+import metrics from '../../../theme/metrics'
|
|
|
+import Carousel from 'react-native-reanimated-carousel';
|
|
|
+import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
|
|
|
|
|
|
|
|
|
+const ITEM_WIDTH = Math.round(metrics.screenWidth * 0.9);
|
|
|
+const ITEM_HEIGHT = Math.round(ITEM_WIDTH * 3 / 4);
|
|
|
+const entries = [...new Array(6).keys()]
|
|
|
+
|
|
|
const RecentNewsSection = () => {
|
|
|
+
|
|
|
+ const [currentCardIndex, setCurrentCardIndex] = React.useState(0)
|
|
|
+ const updateCurrentIndex = (index) => {
|
|
|
+ console.log('current index:', index)
|
|
|
+ setCurrentCardIndex(index)
|
|
|
+ }
|
|
|
return (
|
|
|
<View>
|
|
|
- <SectionHeader label={"Recent News"}/>
|
|
|
- <View style={styles.recentCardContainer}>
|
|
|
- <ImageBGCard
|
|
|
- image={images.imageCard}
|
|
|
- author={"Ryan Browne"}
|
|
|
- headline={"Shadow Wizard Money Gang We love casting Spells"}
|
|
|
- />
|
|
|
- </View>
|
|
|
- </View>
|
|
|
+ <SectionHeader label={"Recent News"} />
|
|
|
+ <View style={styles.recentCardContainer}>
|
|
|
+ <Carousel
|
|
|
+ loop
|
|
|
+ width={metrics.screenWidth}
|
|
|
+ height={ITEM_HEIGHT}
|
|
|
+ style={styles.recentCardContainer}
|
|
|
+ autoPlay={true}
|
|
|
+ data={entries}
|
|
|
+ scrollAnimationDuration={1000}
|
|
|
+ mode="parallax"
|
|
|
+ modeConfig={{
|
|
|
+ parallaxScrollingScale: 1,
|
|
|
+ parallaxScrollingOffset: 1,
|
|
|
+ }}
|
|
|
+ onSnapToItem={(index) => updateCurrentIndex(index)}
|
|
|
+ renderItem={({ index }) => (
|
|
|
+ <View style={{ paddingHorizontal: 16 }}>
|
|
|
+ <ImageBGCard
|
|
|
+ image={images.imageCard}
|
|
|
+ author={"Ryan Browne"}
|
|
|
+ headline={`Shadow Wizard Money Gang We love casting Spells ${index}`}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ </View>
|
|
|
+ <View style={styles.paginationContainer}>
|
|
|
+ {entries.map((item) => {
|
|
|
+ const index = entries.indexOf(item)
|
|
|
+ return <MaterialComIcon name={"checkbox-blank-circle"} color={currentCardIndex === index ? colors.tertiaryColor: colors.lightGray} size={12} />
|
|
|
+ })}
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
export default RecentNewsSection
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
- recentHeader: {
|
|
|
- paddingHorizontal: 16,
|
|
|
- },
|
|
|
- recentHeaderText: {
|
|
|
- fontFamily: fonts.type.semibold,
|
|
|
- fontSize: fonts.getSize(16),
|
|
|
- color: colors.black
|
|
|
- },
|
|
|
- seeAllText: {
|
|
|
- fontFamily: fonts.type.semibold,
|
|
|
- color: colors.topColor,
|
|
|
- paddingRight: 16,
|
|
|
- alignSelf: 'stretch'
|
|
|
-
|
|
|
- },
|
|
|
- recentHeaderIcon: {
|
|
|
-
|
|
|
- },
|
|
|
- recentCardContainer: {
|
|
|
- flexDirection: 'column',
|
|
|
- paddingHorizontal: 16,
|
|
|
- overflow: 'hidden'
|
|
|
- },
|
|
|
+ recentHeader: {
|
|
|
+ paddingHorizontal: 16,
|
|
|
+ },
|
|
|
+ recentHeaderText: {
|
|
|
+ fontFamily: fonts.type.semibold,
|
|
|
+ fontSize: fonts.getSize(16),
|
|
|
+ color: colors.black
|
|
|
+ },
|
|
|
+ seeAllText: {
|
|
|
+ fontFamily: fonts.type.semibold,
|
|
|
+ color: colors.topColor,
|
|
|
+ paddingRight: 16,
|
|
|
+ alignSelf: 'stretch'
|
|
|
+
|
|
|
+ },
|
|
|
+ recentHeaderIcon: {
|
|
|
+
|
|
|
+ },
|
|
|
+ recentCardContainer: {
|
|
|
+ alignItems: 'center',
|
|
|
+ paddingHorizontal: 8
|
|
|
+ },
|
|
|
+ paginationContainer:{
|
|
|
+ justifyContent:'flex-end',
|
|
|
+ alignItems:'center',
|
|
|
+ paddingHorizontal: 16,
|
|
|
+ paddingTop:8,
|
|
|
+ paddingBottom:4,
|
|
|
+ flexDirection:'row',
|
|
|
+ gap:2}
|
|
|
})
|
