Initial commit

src/screens/status/ui/Tabs.tsx

@@ -0,0 +1,144 @@
+import React, { Dispatch, SetStateAction, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import ArrowLeft from 'svg/ArrowLeft';
+import ArrowRightUnderline from 'svg/ArrowRightUnderline';
+
+type FilterType =
+  | 'COLLECTING'
+  | 'ON_THE_WAY'
+  | 'IN_CUSTOMS'
+  | 'IN_WAREHOUSE'
+  | 'DELIVERED'
+  | 'PAID';
+
+interface Props {
+  filter: FilterType;
+  setFilter: Dispatch<SetStateAction<FilterType>>;
+}
+
+const tabList: { label: string; value: FilterType }[] = [
+  { label: "Yig'ilmoqda", value: 'COLLECTING' },
+  { label: "Yo'lda", value: 'ON_THE_WAY' },
+  { label: 'Bojxonada', value: 'IN_CUSTOMS' },
+  { label: 'Toshkent omboriga yetib keldi', value: 'IN_WAREHOUSE' },
+  { label: 'Topshirish punktiga yuborildi', value: 'DELIVERED' },
+  // { label: 'Qabul qilingan', value: 'DELIVERED' },
+];
+
+const Tabs = ({ filter, setFilter }: Props) => {
+  const { width: screenWidth } = useWindowDimensions();
+  const scale = screenWidth < 360 ? 0.85 : 1;
+  const styles = makeStyles(scale);
+  const scrollRef = useRef<ScrollView>(null);
+  const [scrollX, setScrollX] = useState(0);
+  const { t } = useTranslation();
+  const scrollStep = 120;
+
+  const handleScrollLeft = () => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTo({
+        x: Math.max(0, scrollX - scrollStep),
+        animated: true,
+      });
+    }
+  };
+
+  const handleScrollRight = () => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTo({ x: scrollX + scrollStep, animated: true });
+    }
+  };
+
+  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    setScrollX(event.nativeEvent.contentOffset.x);
+  };
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity style={styles.navButton} onPress={handleScrollLeft}>
+        <ArrowLeft color="#28A7E8" width={20} height={20} />
+      </TouchableOpacity>
+
+      <ScrollView
+        horizontal
+        onScroll={onScroll}
+        ref={scrollRef}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {tabList.map(tab => (
+          <TouchableOpacity
+            key={tab.value}
+            style={[styles.card, filter === tab.value && styles.activeCard]}
+            onPress={() => setFilter(tab.value)}
+          >
+            <Text
+              style={[styles.text, filter === tab.value && styles.activeText]}
+            >
+              {t(tab.label)}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+
+      <TouchableOpacity style={styles.navButton} onPress={handleScrollRight}>
+        <ArrowRightUnderline color="#28A7E8" width={20} height={20} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const makeStyles = (scale: number) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      width: '95%',
+      height: 50 * scale,
+      backgroundColor: '#FFFFFF',
+      marginTop: 20 * scale,
+      alignSelf: 'center',
+      borderRadius: 8 * scale,
+      paddingHorizontal: 4 * scale,
+    },
+    scrollContent: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: 4 * scale,
+    },
+    card: {
+      paddingHorizontal: 12 * scale,
+      paddingVertical: 8 * scale,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: '#F3FAFF',
+      marginRight: 8 * scale,
+      borderRadius: 8 * scale,
+    },
+    activeCard: {
+      backgroundColor: '#28A7E8',
+    },
+    text: {
+      color: '#28A7E8',
+      fontWeight: '500',
+      fontSize: 14 * scale,
+    },
+    activeText: {
+      color: '#fff',
+    },
+    navButton: {
+      padding: 6 * scale,
+    },
+  });
+
+export default Tabs;