shiftly/App.tsx at master · OrionArm/shiftly · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import React from 'react';
import {
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { useTheme } from './src/hooks/use_theme';
import { AppNavigator } from './src/navigation/app_navigator';

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  const barStyle = isDarkMode ? 'light-content' : 'dark-content';
  const theme = useTheme();

  const backgroundStyle = {
    backgroundColor: theme.background,
  };

  const headerStyle = {
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: theme.border,
  };

  return (
    <SafeAreaProvider>
      <SafeAreaView style={[styles.container, backgroundStyle]}>
        <StatusBar barStyle={barStyle} backgroundColor={theme.background} />
        <View style={headerStyle}>
          <Text
            style={[
              styles.headerTitle,
              {
                color: theme.text,
              },
            ]}>
            Shiftly
          </Text>
          <Text
            style={[
              styles.headerSubtitle,
              {
                color: theme.textSecondary,
              },
            ]}>
            Управление сменами
          </Text>
        </View>
        <AppNavigator />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  headerTitle: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  headerSubtitle: {
    fontSize: 16,
    fontWeight: '400',
  },
});

export default App;