Untitled

import React from 'react';
import Swiper from 'react-native-swiper';
import { StyleSheet } from 'react-native';
import { View } from 'react-native-ui-lib';
import AnalyticsCard from '../../rb-components/AnalyticsCard';
import { Col, Row, GridView } from '../../rb-components/Grid';
import colors from '../../rb-constants/colors';
import { Dimensions } from 'react-native';
import TextCard from './TextCard';
import { heightPercentageToDP as hp } from 'react-native-responsive-screen';
import { TouchableOpacity } from 'react-native-gesture-handler';
import DateFormat from '../../rb-components/DateFormat';

const { width } = Dimensions.get('window');

type Props = {
  report: any;
  company?: any;
};

function Traffic(this: any, { report, company }: Props) {
  return (
    <>
      <View flex-1 spread marginV-5 row>
        <Swiper
          loop={false}
          paginationStyle={styles.paginationStyle}
          dotStyle={styles.dot}
          activeDotStyle={styles.activeDot}
          showsPagination={true}>
          <View flex-1 margin-4 marginV-8>
            <Row>
              <Col style={styles.col} numRows={4}>
                <AnalyticsCard
                  value={
                    <TextCard
                      value={'13.0K'}
                      description={'Users'}
                      change={13.5}
                    />
                  }
                />
              </Col>
              <Col style={styles.col} numRows={4}>
                <AnalyticsCard
                  value={
                    <TextCard
                      value={'11.0K'}
                      description={'New Users'}
                      change={'10.20'}
                    />
                  }
                />
              </Col>
            </Row>
            <Row>
              <Col style={styles.col} numRows={4}>
                <AnalyticsCard
                  value={
                    <TextCard
                      description={'Sessions'}
                      value={'4.3.K'}
                      change={'780.00'}
                    />
                  }
                />
              </Col>
              <Col style={styles.col} numRows={4}>
                <AnalyticsCard
                  value={
                    <TextCard
                      description={'Sessions Per'}
                      value={1.19}
                      change={'0.02'}
                    />
                  }
                />
              </Col>
            </Row>
            <Row>
              <Col style={styles.col} numRows={4}>
                <AnalyticsCard
                  value={
                    <TextCard
                      description={'Page Views'}
                      value={'2.58'}
                      change={'903'}
                    />
                  }
                />
              </Col>
              <Col style={styles.col} numRows={4}>
                <AnalyticsCard
                  value={
                    <TextCard
                      description={'Page Per'}
                      value={'32.3K'}
                      change={32.3}
                    />
                  }
                />
              </Col>
            </Row>
          </View>
          <GridView style={{ justifyContent: 'center' }}>
            <Row>
              <Col style={styles.col} numRows={4}>
                <AnalyticsCard
                  value={
                    <TextCard
                      description={'Revenue'}
                      value={'32.3K'}
                      change={32.3}
                    />
                  }
                />
              </Col>
              <Col style={styles.col} numRows={4}>
                <AnalyticsCard
                  value={
                    <TextCard
                      description={'Conversion Rate'}
                      value={'597.7s'}
                      change={'-'}
                    />
                  }
                />
              </Col>
            </Row>
            <Row>
              <Col style={styles.col} numRows={4}>
                <AnalyticsCard
                  value={
                    <TextCard
                      description={'ASD'}
                      value={'578.0K'}
                      change={'-'}
                    />
                  }
                />
              </Col>
              <Col style={styles.col} numRows={4}>
                <AnalyticsCard
                  value={
                    <TextCard
                      description={'Bounce Rate'}
                      value={'0.31%'}
                      change={'-'}
                    />
                  }
                />
              </Col>
            </Row>
          </GridView>
        </Swiper>
      </View>
      <View marginT-20>
        <TouchableOpacity
          style={{ backgroundColor: colors.white, width: width / 2.4 }}>
          {/* {((formattedTime)) ?? "not found date"} */}
          <DateFormat />
        </TouchableOpacity>
      </View>
    </>
  );
}
export default Traffic;

const styles = StyleSheet.create({
  col: {
    borderWidth: 1.5,
    // height: height / 5.3,
    height: hp(20),
    flex: 1,
    borderRadius: 24,
    margin: 4,

    borderColor: colors.grey,
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  paginationStyle: {
    position: 'relative',
    top: 5,
    height: 100,
    backgroundColor: 'gray',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
  },
  dot: {
    width: 20,
    height: 5,
    borderRadius: 0,
    marginHorizontal: 5,
    backgroundColor: colors.white,
    borderWidth: 1,
  },
  activeDot: {
    width: 20,
    height: 5,
    borderWidth: 1,
    borderRadius: 5,
    marginHorizontal: 5,
    backgroundColor: colors.Orange,
  },
});