BrowsersList.tsx

import React from 'react'
import {StyleSheet, View} from 'react-native'
import AddModal from '../../../components/AddModal'
import BrowserItem from '../../../components/BrowserItem'
import {UIFriendlyList} from '../../../components/UIFriendlyList'

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
})

export type Browser = {
  fullname: string
  image: string
  linkToBrowser: string
  minMemory: string
  currentVersion: string
  minimumRAM: string
  description: string
  windows: boolean
  mac: boolean
  linux: boolean
  ubuntu: boolean
  fedora: boolean
  stars: number
}

export type BrowsersListProps = {
  loading: boolean
  browsers?: Browser[]
  selectedBrowser?: Browser
  setSelectedBrowser: (browser?: Browser) => void
}

export function BrowsersList(props: BrowsersListProps) {
  const {loading, selectedBrowser, setSelectedBrowser, browsers} = props
  return (
    <View style={styles.container}>
      <AddModal
        modalVisible={Boolean(selectedBrowser)}
        onClose={() => setSelectedBrowser(undefined)}
        description={selectedBrowser?.description}
      />
      <UIFriendlyList
        loading={loading}
        data={browsers}
        renderItem={({item}) => (
          <BrowserItem
            key={item.fullname}
            browser={item}
            onPress={() => setSelectedBrowser(item)}
          />
        )}
      />
    </View>
  )
}