Untitled

import React, { useState } from 'react';
import {
  View,
  Image,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
} from 'react-native';

const sliderBanner = [
  {
    id: 1,
    appImageUrl: 'https://picsum.photos/300/200',
    label: 'text 1',
    sub_label: 'text 1',
  },
  {
    id: 2,
    appImageUrl: 'https://picsum.photos/300/200',
    label: 'text 2',
    sub_label: 'text 2',
  },
  {
    id: 3,
    appImageUrl: 'https://picsum.photos/300/200',
    label: 'text 3',
    sub_label: 'text 3',
  },
  {
    id: 4,
    appImageUrl: 'https://picsum.photos/300/200',
    label: 'text 4',
    sub_label: 'text 4',
  },
];

const BigSlider = () => {
  const [activeSlide, setActiveSlide] = useState(0);

  const handleSlideChange = (index) => {
    setActiveSlide(index);
  };

  return (
    <View style={styles.container}>
      <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={(event) => {
          const contentOffset = event.nativeEvent.contentOffset;
          const slideIndex = Math.round(contentOffset.x / styles.slide.width);
          setActiveSlide(slideIndex);
        }}
      >
        {sliderBanner.map((slide, index) => (
          <View
            key={slide.id}
            style={[
              styles.slide,
              activeSlide === index ? styles.activeSlide : null,
            ]}
          >
            <Image source={{ uri: slide.appImageUrl }} style={styles.image} />
            <View style={styles.textContainer}>
              <Text style={styles.label}>{slide.label}</Text>
              <Text style={styles.subLabel}>{slide.sub_label}</Text>
              <TouchableOpacity style={styles.button}>
                <Text style={styles.buttonText}>Button</Text>
              </TouchableOpacity>
            </View>
          </View>
        ))}
      </ScrollView>
      <View style={styles.dotContainer}>
        {sliderBanner.map((_, index) => (
          <View
            key={index}
            style={[
              styles.dot,
              activeSlide === index ? styles.activeDot : null,
            ]}
          />
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginBottom: 20,
  },
  slide: {
    width: 300,
    height: 200,
    borderRadius: 20,
    marginHorizontal: 10,
    overflow: 'hidden',
    justifyContent: 'center',
    alignItems: 'flex-start',
    backgroundColor: '#ccc',
  },
  activeSlide: {
    backgroundColor: '#aaa',
  },
  image: {
    width: '100%',
    height: '100%',
  },
  textContainer: {
    position: 'absolute',
    bottom: 10,
    left: 10,
  },
  label: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
  },
  subLabel: {
    fontSize: 16,
    color: '#fff',
  },
  button: {
    marginTop: 10,
    backgroundColor: '#007bff',
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 5,
  },
  buttonText: {
    color: '#fff',
  },
  dotContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 10,
  },
  dot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#ccc',
    marginHorizontal: 4,
  },
  activeDot: {
    backgroundColor: '#aaa',
  },
});

export default BigSlider;