Initial commit

src/components/BottomModal.tsx

@@ -0,0 +1,183 @@
+import { Branch } from 'api/branch';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Image,
+  Modal,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Fontisto from 'react-native-vector-icons/Fontisto';
+import Local from 'screens/../../assets/bootsplash/local.png';
+import Clock from 'svg/Clock';
+import CloseIcon from 'svg/Close';
+import Location from 'svg/Location';
+import Phone from 'svg/Phone';
+
+type BottomModalProps = {
+  visible: boolean;
+  onClose: () => void;
+  branch: Branch | null;
+};
+
+const BottomModal: React.FC<BottomModalProps> = ({
+  visible,
+  onClose,
+  branch,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal
+      animationType="slide"
+      transparent
+      visible={visible}
+      onRequestClose={onClose}
+    >
+      <View style={styles.overlay}>
+        <TouchableOpacity
+          style={styles.overlayTouchable}
+          onPress={onClose}
+          activeOpacity={1}
+        />
+        <View style={[styles.modal]}>
+          <TouchableOpacity
+            style={styles.handleContainer}
+            activeOpacity={0.7}
+            onPress={onClose}
+          >
+            <View style={styles.handle}>
+              <CloseIcon />
+            </View>
+          </TouchableOpacity>
+          <Image source={Local} style={styles.image} />
+          <ScrollView contentContainerStyle={styles.scrollContainer}>
+            <View style={styles.card}>
+              <View style={styles.row}>
+                <Location color="#28A7E8" width={26} height={26} />
+                <View style={styles.cardText}>
+                  <Text style={styles.label}>{t('Manzil')}</Text>
+                  <Text style={styles.value}>{branch?.address}</Text>
+                </View>
+              </View>
+            </View>
+            <View style={styles.card}>
+              <View style={styles.row}>
+                <Clock color="#28A7E8" width={26} height={26} />
+                <View style={styles.cardText}>
+                  <Text style={styles.label}>{t('Ish vaqti')}</Text>
+                  <Text style={styles.value}>{branch?.workingHours}</Text>
+                </View>
+              </View>
+            </View>
+            <View style={styles.card}>
+              <View style={styles.row}>
+                <Phone color="#28A7E8" width={26} height={26} />
+                <View style={styles.cardText}>
+                  <Text style={styles.label}>{t('Telefon')}</Text>
+                  <Text style={styles.value}>{branch?.phone}</Text>
+                </View>
+              </View>
+            </View>
+            <View style={styles.card}>
+              <View style={styles.row}>
+                <Fontisto name="telegram" color="#28A7E8" size={26} />
+                <View style={styles.cardText}>
+                  <Text style={styles.label}>{t('Telegram admin')}</Text>
+                  <Text style={styles.value}>{branch?.telegramAdmin}</Text>
+                </View>
+              </View>
+            </View>
+            <View style={styles.card}>
+              <View style={styles.row}>
+                <Fontisto name="telegram" color="#28A7E8" size={26} />
+                <View style={styles.cardText}>
+                  <Text style={styles.label}>{t('Telegram kanal')}</Text>
+                  <Text style={styles.value}>{branch?.telegramChannel}</Text>
+                </View>
+              </View>
+            </View>
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default BottomModal;
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0,0,0,0.4)',
+  },
+  overlayTouchable: {
+    flex: 1,
+  },
+  scrollContainer: {},
+  modal: {
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingBottom: 30,
+    elevation: 5,
+    height: '70%',
+  },
+  image: {
+    width: '100%',
+    height: 200,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  card: {
+    backgroundColor: '#F3FAFF',
+    paddingTop: 5,
+    paddingRight: 10,
+    paddingLeft: 10,
+    paddingBottom: 5,
+    margin: 'auto',
+    width: '95%',
+    marginTop: 10,
+    borderRadius: 8,
+  },
+  cardText: {
+    width: '90%',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 5,
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#000000',
+  },
+  value: {
+    fontSize: 14,
+    color: '#000000B2',
+    fontWeight: '500',
+  },
+  handleContainer: {
+    position: 'absolute',
+    zIndex: 10,
+    width: '100%',
+    alignItems: 'flex-end',
+    justifyContent: 'flex-end',
+    paddingVertical: 10,
+  },
+
+  handle: {
+    width: 25,
+    height: 25,
+    right: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 500,
+    backgroundColor: '#ffff',
+  },
+});