ClipSync-Mobile/src/components/notif/NotifView.tsx

import React from 'react';
import {useWindowDimensions, ScrollView, View} from 'react-native';
import {Searchbar, Button} from 'react-native-paper';
import NotifViewLocal from './NotifViewLocal';
import NotifViewRemote from './NotifViewRemote';
import {ps} from '../../utils';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

export default function NotifView() {
  const [searchQuery, setSearchQuery] = React.useState('');
  const {height, width} = useWindowDimensions();

  const Tab = createMaterialTopTabNavigator();
  let layout = '';

  if (width < 600) layout = 'compact';
  else if (width < 1200) layout = 'medium';
  else layout = 'expanded';
  return (
    <>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center',
          gap: 5,
          margin: ps(4),
        }}>
        {layout == 'compact' ? (
          <Button
            children={<></>}
            icon="dots-vertical"
            mode="contained"
            style={{width: 'auto'}}
            onPress={() => console.log('Pressed')}
          />
        ) : (
          <></>
        )}
        <Searchbar
          placeholder="Notifications"
          onChangeText={setSearchQuery}
          value={searchQuery}
          style={{
            flex: 1,
          }}
        />
      </View>
      {layout == 'compact' ? (
        <Tab.Navigator tabBarPosition="bottom">
          <Tab.Screen name="Remote" options={{title: 'distant'}}>
            {() => <NotifViewRemote />}
          </Tab.Screen>
          <Tab.Screen name="Local" options={{title: 'local'}}>
            {() => <NotifViewLocal />}
          </Tab.Screen>
        </Tab.Navigator>
      ) : (
        <ScrollView
          contentContainerStyle={{
            flexDirection: 'row',
            justifyContent: 'center',
            height: '100%',
            padding: ps(30),
          }}>
          <NotifViewRemote />
          <NotifViewLocal />
        </ScrollView>
      )}
    </>
  );
}