@chakra-ui/react#List TypeScript Examples

export function FilesList({
  value,
  onChange,
  listItemIcon = Paperclip,
  linkProps,
}: FilesListProps): ReactElement<FilesListProps> {
  const deleteFile = (file: FileDescriptor): void => {
    const restFiles = value.filter((f) => f.uuid !== file.uuid)
    onChange(restFiles)
  }

  return (
    <List>
      {value.map((file) => (
        <ListItem display="flex" alignItems="center" className={listItemCss} key={file.uuid}>
          <ListIcon as={listItemIcon} />
          {file?.url ? (
            <Link href={file.url} isExternal {...linkProps}>
              {file.name}
            </Link>
          ) : (
            file.name
          )}
          <IconButton
            aria-label="Удалить"
            variant="unstyled"
            size="xs"
            icon={<X color="red" size={16} />}
            ml={2}
            onClick={() => deleteFile(file)}
          />
        </ListItem>
      ))}
    </List>
  )
}

function UploadingList({ files }: UploadingListProps): ReactElement<UploadingListProps> {
  return (
    <List>
      {files.map((file) => (
        <ListItem key={file.key}>
          <ListIcon as={Loader} />
          {file.name}
          <Progress hasStripe isAnimated value={Math.floor((file.loaded / file.total) * 100)} />
        </ListItem>
      ))}
    </List>
  )
}

export function FilesList({
  value,
  listItemIcon = Paperclip,
  linkProps,
}: FilesListProps): ReactElement<FilesListProps> {
  return (
    <List>
      {value.map((file) => (
        <ListItem key={file.uuid}>
          <ListIcon as={listItemIcon} />
          {file?.url ? (
            <Link href={file.url} isExternal {...linkProps}>
              {file.name}
            </Link>
          ) : (
            file.name
          )}
        </ListItem>
      ))}
    </List>
  )
}

Children = ({ data, path }) => {
  if (!data || Object.keys(data).length === 0) {
    return null;
  }
  return (
    <List>
      {Object.entries(data)
        .sort((a, b) => {
          if (a[1].children && Object.keys(a[1].children).length > 0) {
            return -1;
          } else {
            return 1;
          }
        })
        .map(([key, value]) => (
          <Flex key={key}>
            <Text color="gray.500">| -&nbsp;</Text>{" "}
            <StateTree data={value} path={path} />
          </Flex>
        ))}
    </List>
  );
}

export function LoadingSkeleton() {
  const data = [1, 2, 3]
  const bgBox = useColorModeValue('white', 'gray.800')

  return (
    <List spacing={3}>
      {data.map((d: number) => (
        <ListItem
          key={d}
          w={'full'}
          bg={bgBox}
          boxShadow={'2xl'}
          rounded={'md'}
          overflow={'hidden'}
          p={6}
        >
          <Skeleton height="30px" mb="4" />

          <Skeleton height="10px" mb="1" />
          <Skeleton height="10px" />

          <HStack spacing={2} mt={4}>
            <Skeleton height="40px" width="40px" />
            <Skeleton height="40px" width="40px" />
            <Skeleton height="40px" width="40px" />
            <Skeleton height="40px" width="40px" />
          </HStack>
        </ListItem>
      ))}
    </List>
  )
}

App: view = ({
  data = observe.structure.data,
  viewsCount = observe.structure.count.views,
  producersCount = observe.structure.count.producers,
}) => {
  if (!data || !viewsCount || !producersCount) {
    return;
  }

  return (
    <ChakraProvider>
      <SimpleGrid columns={2}>
        <Box bg="gray.100" h="100vh">
          <Tabs>
            <TabList position="relative">
              <Tab>State</Tab>
              <Tab>
                Views <Tag>{viewsCount}</Tag>
              </Tab>
              <Tab>
                Producers <Tag>{producersCount}</Tag>
              </Tab>
              <Tab>Stats</Tab>
            </TabList>
            <TabPanels>
              <TabPanel pr="0">
                <List>
                  <Box overflowY="scroll" h="92vh">
                    <StateTree data={data} />
                  </Box>
                </List>
              </TabPanel>
              <TabPanel pr="0">
                <ViewsTab />
              </TabPanel>
              <TabPanel pr="0">
                <ProducersTab />
              </TabPanel>
              <TabPanel pr="0">
                <StatsTab />
              </TabPanel>
            </TabPanels>
          </Tabs>
        </Box>
        <Box bg="gray.200" borderLeft="solid 1px" borderColor="gray.300">
          <EditElement />
          <ElementDescription />
        </Box>
      </SimpleGrid>
    </ChakraProvider>
  );
}

UL: React.FC<JSX.IntrinsicElements['ul'] & ListProps> = ({ children, ...rest }) => {
  return (
    <List styleType="disc" {...rest}>
      {children}
    </List>
  )
}

OL: React.FC<JSX.IntrinsicElements['ol'] & ListProps> = ({ children, ...rest }) => {
  return (
    <List as="ol" styleType="decimal" {...rest}>
      {children}
    </List>
  )
}

export default function ChatType(props: Props) {
  const [ unreadMessages, setUnreadMessages ] = React.useState(0);
  const [ inputText, setInputText ] = React.useState('');
  const [ messages, setMessages ] = React.useState(props.messagesStore);
  const [ canSendMessage, setCanSendMessage ] = React.useState((props.chatMessageBoxes?.length ?? 0) < 3);

  const messagesListRef = React.useRef<HTMLUListElement>(null);

  let state = React.useRef({
    i: -1,
  });

  useEffect(() => {
    props.manager.events.on('chat_message', (message: DataTypes[NetworkEvents.SERVER_PLAYER_CHAT_MESSAGE]) => {
      setMessages(m => [...m, message]);
      const lastMessageEl = messagesListRef.current?.lastElementChild as HTMLLIElement;
      if (lastMessageEl && 
        lastMessageEl?.parentElement?.parentElement && !isVisible(lastMessageEl, lastMessageEl?.parentElement?.parentElement)) 
        setUnreadMessages(u => u + 1);
    });

    // constantly check chatMessageBoxes size and if it's less than 3, set canSendMessage to true
    const interval = setInterval(() => setCanSendMessage((props.chatMessageBoxes?.length ?? 0) < 3));
    return () => clearInterval(interval);
  }, []);

  const handleInputKey = (e: KeyboardEvent) => {
    if (e.key === 'Enter' && canSendMessage) handleSubmit(inputText);
    else if (e.key === 'Escape')
      // send "nothing", chat will get closed & message will not get sent
      handleSubmit('');
    else if (e.key === 'ArrowUp') {
      state.current.i = ++state.current.i % props.precedentMessages.length;
      const precedentMessage = props.precedentMessages[state.current.i];
      if (precedentMessage) setInputText(precedentMessage);
    } else if (e.key === 'ArrowDown') {
      // rolling window, wrap around
      state.current.i = --state.current.i % props.precedentMessages.length;
      if (state.current.i < 0) state.current.i = props.precedentMessages.length - 1;

      const precedentMessage = props.precedentMessages[state.current.i];
      if (precedentMessage) setInputText(precedentMessage);
    }
  };

  const handleSubmit = (content: string) => {
    if (content.length > 150)
      return;

    props.manager.events.emit('chat_submit', content);
  };

  return (
    <ChakraProvider theme={theme}>
      <Container 
      style={{
        position: 'absolute',
        backgroundColor: 'rgba(0,0,0,0.7)',
        borderRadius: '0.5rem',
        boxShadow: '0 0.5rem 1rem rgba(0, 0, 0, 0.7)',
        height: '30%',
        width: '30%',
        left: "1%",
        bottom: "1%",
      }}>
        <Stack style={{
          paddingTop: '1rem',
          height: '95%',
        }}>
          <div style={{
            display: 'flex',
            overflow: 'auto',
            flexDirection: 'column-reverse',
            marginBottom: '-3%',
          }}>
            <List ref={messagesListRef} spacing={-2} style={{
            }}>
              <Text style={{
                color: 'blueviolet',
              }}>
                Welcome to the Dopeverse!
              </Text>
              {messages.map((message, i) => <ListItem key={i}>
                  <HStack style={{
                    opacity: '0.8'
                  }}>
                    <Text style={{
                      color: 'white',
                    }}>
                      {message.author}: {message.message}
                    </Text>
                    <Spacer />
                    <Text style={{
                      color: 'grey',
                      fontSize: '0.6rem',
                    }}>
                      {new Date(message.timestamp).toLocaleString()}
                    </Text>
                  </HStack>
              </ListItem>)}
            </List>
          </div>
          <Spacer />
          <Center>
            <Button 
                  style={{
                    marginRight: '1%',
                    marginTop: '-10%'
                  }}
                  variant="primary"
                  backgroundColor="red.600"
                  hidden={inputText.length <= 150} 
                  onClick={() => setInputText(inputText.substring(0, 150))}
                >
                ❌ Message too long
            </Button>
            <Button 
              style={{
                marginTop: '-10%',
              }}
              variant="primary" 
              hidden={unreadMessages === 0} 
              onClick={(e) => {
                setUnreadMessages(0);
                e.currentTarget.hidden = true;
                if (messagesListRef.current)
                  (messagesListRef.current as HTMLOListElement).lastElementChild?.scrollIntoView({
                    behavior: 'smooth',
                  });
              }}
            >
              ⬇️ New message ({unreadMessages})
            </Button>
          </Center>
          <Center>
            <InputGroup width="90%" size="md">
              <Input
                autoFocus={true}
                focusBorderColor="white"
                onBlur={({ target }) => target.focus()}
                pr="4.5rem"
                placeholder="Message"
                _placeholder={{ color: '#b8b8b8' }}
                textColor="#f5f5f5"
                value={inputText}
                onChange={({ target }) => setInputText(target.value)}
                onKeyDown={handleInputKey}
                style={{
                  backgroundColor: 'rgba(0, 0, 0, 0.3)',
                }}
              />
              <InputRightElement width="4.5rem" style={{ paddingRight: '2%' }}>
                <Button h="1.75rem" size="sm" disabled={!canSendMessage} onClick={() => handleSubmit(inputText)}>
                  Send
                </Button>
              </InputRightElement>
            </InputGroup>
          </Center>
        </Stack>
      </Container>
    </ChakraProvider>
  );
}

function Terms() {
  const textColor = useColorModeValue('gray.500', 'gray.300')

  return (
    <Layout>
      <MetaHead
        title="Ketentuan Layanan | Ksana.in"
        description="Persyaratan layanan yang merupakan perjanjian mengikat dan mengatur penggunaan Anda atas Ksana.in"
      />
      <VStack spacing={4} textAlign="center" as="section" mt="32">
        <VStack spacing={4} textAlign="center">
          <Heading
            as="h1"
            fontWeight={700}
            fontSize={{ base: '3xl', sm: '4xl', md: '5xl' }}
            lineHeight={'110%'}
            color="orange.400"
          >
            Ketentuan Layanan
          </Heading>
          <Image width={200} height={122} src={'/images/orange/ksana.svg'} alt="Ksana.in" />
        </VStack>

        <Container maxW={'4xl'} mx="auto" as="section">
          <VStack spacing={8} textAlign="left">
            <Text color={textColor}>
              Terima kasih telah menggunakan{' '}
              <Link href="/" color="orange.400">
                {BRAND}
              </Link>{' '}
              . Persyaratan layanan ini merupakan perjanjian yang mengikat dan mengatur penggunaan
              Anda atas{' '}
              <Link href="/" color="orange.400">
                {BRAND}
              </Link>{' '}
              dan akses ke situs web{' '}
              <Link href="/" color="orange.400">
                {BRAND}
              </Link>{' '}
              . Dengan menggunakan salah satu layanan{' '}
              <Link href="/" color="orange.400">
                {BRAND}
              </Link>
              , atau mengakses salah satu situs web kami, Anda setuju untuk terikat oleh persyaratan
              layanan berikut.
            </Text>

            <Text color={textColor}>
              Jika Anda memasuki perjanjian ini atas nama perusahaan atau badan hukum lainnya, Anda
              menyatakan bahwa Anda memiliki kewenangan untuk mengikat entitas tersebut,
              afiliasinya, semua pengguna yang mengakses layanan kami melalui akun Anda. Dalam kasus
              tersebut, istilah "Anda" atau "milik Anda" merujuk pada perusahaan atau entitas hukum,
              dan pengguna yang terkait dengannya. Jika Anda tidak memiliki kewenangan, jangan
              setuju dengan syarat dan ketentuan ini atas nama perusahaan atau badan hukum lainnya.
            </Text>

            <Text color={textColor}>
              Jika Anda tidak setuju dengan persyaratan layanan ini,{' '}
              <Text as="span" fontWeight="bold">
                jangan terima persyaratannya, dan jangan gunakan layanannya.
              </Text>
            </Text>

            <Text color={textColor}>
              Kami berhak memperbarui dan mengubah persyaratan layanan dari waktu ke waktu tanpa
              pemberitahuan sebelumnya. Setiap fitur baru yang menambah atau meningkatkan layanan
              saat ini, termasuk rilis alat dan sumber daya baru, harus tunduk pada persyaratan
              layanan. Penggunaan berkelanjutan atas layanan setelah perubahan tersebut merupakan
              persetujuan Anda untuk perubahan tersebut. Anda dapat meninjau versi terbaru dari
              persyaratan layanan kapan saja di sini.
            </Text>

            <Text color={textColor}>
              Pelanggaran salah satu persyaratan di bawah ini akan mengakibatkan penghentian akun
              Anda. Meskipun kami melarang perilaku dan konten tertentu di layanan, Anda memahami
              dan setuju bahwa kami tidak dapat bertanggung jawab atas konten yang diposting di
              layanan dan Anda mungkin akan melihat materi tersebut. Anda setuju untuk menggunakan
              layanan dengan risiko Anda sendiri.
            </Text>

            <Heading
              as="h3"
              fontWeight={700}
              fontSize={{ base: 'lg', sm: 'xl', md: '2xl' }}
              lineHeight={'110%'}
              mt="8"
              mb="2"
            >
              Ketentuan Privasi
            </Heading>
            <Text color={textColor}>
              Kami menghormati privasi Anda. Pernyataan lengkap tentang kebijakan privasi kami dapat
              ditemukan di{' '}
              <Link href="/kebijakan-privasi" color="orange.400">
                halaman kebijakan privasi
              </Link>
              . Kebijakan privasi kami secara tegas dimasukkan sebagai referensi ke dalam perjanjian
              ini.
            </Text>

            <Heading
              as="h3"
              fontWeight={700}
              fontSize={{ base: 'lg', sm: 'xl', md: '2xl' }}
              lineHeight={'110%'}
              mt="8"
              mb="2"
            >
              Persyaratan Akun
            </Heading>

            <Text color={textColor}>Untuk menggunakan layanan ini, Anda harus:</Text>

            <List spacing={3}>
              <ListItem color={textColor}>
                <ListIcon as={HiCheck} color="green.500" />
                Berusia 11 tahun atau lebih dan jadilah manusia. Akun yang didaftarkan oleh "bot"
                atau metode otomatis lainnya tidak diizinkan. berikan nama lengkap resmi Anda,
                alamat email yang valid, dan informasi lainnya yang diminta untuk menyelesaikan
                proses pendaftaran.
              </ListItem>
              <ListItem color={textColor}>
                <ListIcon as={HiCheck} color="green.500" />
                Anda bertanggung jawab untuk menjaga keamanan akun dan kata sandi Anda.
              </ListItem>
              <ListItem color={textColor}>
                <ListIcon as={HiCheck} color="green.500" />
                Kami tidak dapat dan tidak akan bertanggung jawab atas kehilangan atau kerusakan
                akibat kegagalan Anda untuk mematuhi kewajiban keamanan ini. Login Anda hanya dapat
                digunakan oleh satu orang - satu login yang digunakan bersama oleh banyak orang
                tidak diizinkan. Anda dapat membuat login terpisah untuk sebanyak mungkin orang
                sesuai rencana Anda.
              </ListItem>
              <ListItem color={textColor}>
                <ListIcon as={HiCheck} color="green.500" />
                Anda bertanggung jawab atas semua konten yang diposting dan aktivitas yang terjadi
                di bawah akun Anda (bahkan ketika konten diposting oleh orang lain yang memiliki
                akun di bawah akun Anda).
              </ListItem>
              <ListItem color={textColor}>
                <ListIcon as={HiCheck} color="green.500" />
                Anda tidak boleh menggunakan layanan untuk tujuan ilegal atau tidak sah. Anda tidak
                boleh, dalam penggunaan layanan, melanggar hukum apa pun di yurisdiksi Anda
                (termasuk namun tidak terbatas pada undang-undang hak cipta atau merek dagang)
              </ListItem>
            </List>

            <Heading
              as="h3"
              fontWeight={700}
              fontSize={{ base: 'lg', sm: 'xl', md: '2xl' }}
              lineHeight={'110%'}
              mt="8"
              mb="2"
            >
              Hak Cipta dan Kepemilikan Konten
            </Heading>

            <List spacing={3}>
              <ListItem color={textColor}>
                <ListIcon as={HiCheck} color="green.500" />
                Kami tidak mengklaim hak kekayaan intelektual atas materi yang Anda berikan ke
                layanan. Profil dan materi yang Anda unggah tetap menjadi milik Anda. Namun, jika
                Anda mengatur konten Anda untuk dilihat secara publik, Anda setuju untuk mengizinkan
                orang lain untuk melihat konten Anda.
              </ListItem>
              <ListItem color={textColor}>
                <ListIcon as={HiCheck} color="green.500" />
                Kami tidak menyaring konten, tetapi kami memiliki hak (tetapi bukan kewajiban) atas
                kebijakan kami sendiri untuk menolak atau menghapus konten apa pun yang tersedia
                melalui layanan.
              </ListItem>
            </List>

            <Text color={textColor} mt="8">
              Pertanyaan tentang ketentuan layanan kami dapat ditujukan ke [email protected]
            </Text>
            <Text color={textColor} mt="8">
              Terakhir diperbarui pada{' '}
              <Text color="orange.400" as="span">
                29 Mei 2021
              </Text>
            </Text>
          </VStack>
        </Container>
      </VStack>
    </Layout>
  )
}

TopNavigation: React.FC<TopNavigationProps> = ({ title }) => {
  const { isOpen, onOpen, onClose } = useDisclosure()
  return (
    <Grid
      as="nav"
      templateColumns={`1fr 1fr minmax(auto, ${theme.sizes['6xl']}) 1fr 1fr`}
      backgroundColor="gray.900"
      color="white"
      height={['88px', '80px']}
      zIndex={50}
    >
      <List display="flex" flexWrap="wrap" alignItems="center" gridColumn="3/4" m={0} p={0}>
        <ListItem display="flex" alignItems="center" pos="relative" h="100%" mr="auto">
          <NextChakraLink
            href="/"
            display="flex"
            alignItems="center"
            py=".5rem"
            px="1rem"
            h="100%"
            _hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
          >
            <Logo height={40} fill={theme.colors.white} title={title} />
          </NextChakraLink>
        </ListItem>

        <ListItem display={['none', 'flex']} alignItems="center" h="100%">
          <NextChakraLink
            href="/community"
            display="flex"
            alignItems="center"
            py="1.5rem"
            px="1rem"
            color="inherit"
            h="100%"
            lineHeight={1}
            _hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
          >
            Komunitas
          </NextChakraLink>
        </ListItem>

        <ListItem display={['none', 'flex']} alignItems="center" h="100%">
          <NextChakraLink
            href="/submit-a-talk"
            display="flex"
            alignItems="center"
            py="1.5rem"
            px="1rem"
            color="inherit"
            h="100%"
            lineHeight={1}
            _hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
          >
            Ajukan Topik
          </NextChakraLink>
        </ListItem>

        <ListItem display={['none', 'flex']} alignItems="center" h="100%">
          <NextChakraLink
            href="/faq"
            display="flex"
            alignItems="center"
            py="1.5rem"
            px="1rem"
            color="inherit"
            h="100%"
            lineHeight={1}
            _hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
          >
            FAQ
          </NextChakraLink>
        </ListItem>

        <ListItem py="1.5rem" px="1rem" display={['flex', 'none']} alignItems="center" h="100%">
          <IconButton variant="outline" aria-label="Open menu" icon={<HamburgerIcon />} onClick={onOpen} />

          <Drawer isOpen={isOpen} placement="right" onClose={onClose}>
            <DrawerOverlay />
            <DrawerContent>
              <DrawerCloseButton />
              <DrawerHeader>Menu Utama</DrawerHeader>

              <DrawerBody>
                <NextChakraLink
                  href="/community"
                  display="flex"
                  alignItems="center"
                  py="1.5rem"
                  px="1rem"
                  color="inherit"
                  lineHeight={1}
                  _hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
                >
                  Komunitas
                </NextChakraLink>

                <NextChakraLink
                  href="/submit-a-talk"
                  display="flex"
                  alignItems="center"
                  py="1.5rem"
                  px="1rem"
                  color="inherit"
                  lineHeight={1}
                  _hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
                >
                  Ajukan Topik
                </NextChakraLink>

                <NextChakraLink
                  href="/faq"
                  display="flex"
                  alignItems="center"
                  py="1.5rem"
                  px="1rem"
                  color="inherit"
                  lineHeight={1}
                  _hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
                >
                  FAQ
                </NextChakraLink>
              </DrawerBody>
            </DrawerContent>
          </Drawer>
        </ListItem>
      </List>
    </Grid>
  )
}

function About({ isOpen, onClose }: Props) {
  function onContact() {
    window.location.href = 'mailto:[email protected]'
  }

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="2xl" scrollBehavior="inside">
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>About </ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <Text fontSize="lg">
            <Text>Hi, I'm Vladimir, the person behind this project.</Text>
            <br />
            <Text>
              <Text fontWeight="semibold" as="span" textColor="teal.600">
                Calories-In
              </Text>{' '}
              is made for people who follow meal plans that involve preparing
              everything by yourself and gives them full control to fine tune
              the nutritional values.
            </Text>
            <br />
            <Text>
              The idea was born out of my experience of trying to find a better
              alternative to Google Sheets for calculating the macros of my own
              meal plans. I wanted to be able to do this on desktop as it's more
              convenient but nothing really felt fast and simple enough.
            </Text>
            <br />
            <Text>The main differences to other apps in this space are:</Text>
            <br />
            <List ml={8}>
              <ListItem>
                <ListIcon as={CheckCircle} color="teal.600" />
                <Text fontWeight="semibold" as="span" textColor="teal.600">
                  Faster search
                </Text>{' '}
                : There are actually not that many foods you need when you
                prepare everything yourself. This means all of the food data can
                be downloaded beforehand which makes the search super fast. Of
                course you can add your own foods if you'd like.{' '}
              </ListItem>
              <br />
              <ListItem>
                <ListIcon as={CheckCircle} color="teal.600" />
                <Text fontWeight="semibold" as="span" textColor="teal.600">
                  Undo/Redo
                </Text>{' '}
                : Building a plan from scratch or updating an existing one
                involves some back and forth choosing the right foods and
                adjusting their amounts. This is especially true if you want to
                be as close as possible to a specific calorie limit and have
                your macros be a certain percentages split.
              </ListItem>
              <br />
              <ListItem>
                <ListIcon as={CheckCircle} color="teal.600" />
                <Text fontWeight="semibold" as="span" textColor="teal.600">
                  Faster export
                </Text>{' '}
                : Creating the PDF file for your meal plan is done entirely
                inside the browser. It does not involve generating and
                downloading it from a server. This means I can keep the cost of
                running the website low and you get your file in just a few
                seconds.
              </ListItem>
              <br />
              <ListItem>
                <ListIcon as={CheckCircle} color="teal.600" />
                <Text fontWeight="semibold" as="span" textColor="teal.600">
                  Simpler
                </Text>{' '}
                : There are no other pages except the editor. Most of the other
                tools are bloated with additional features for professionals,
                such as managing clients, creating invoices, etc.
              </ListItem>
              <br />
              <ListItem>
                <ListIcon as={CheckCircle} color="teal.600" />
                <Text fontWeight="semibold" as="span" textColor="teal.600">
                  Fully mobile
                </Text>{' '}
                : You can use your phone or tablet to build your meal plans
                right from your browser. If you add the app to your home screen
                it will look and feel almost like a native one.
              </ListItem>
            </List>
            <Text>
              <br />
              Let me know if you found it useful or have any comments in
              general:
            </Text>
            <br />

            <Button size="lg" colorScheme="teal" onClick={onContact}>
              Contact me directly
            </Button>

            <br />
            <br />
            <Text>No email will go unanswered, I promise :)</Text>
          </Text>
        </ModalBody>

        <ModalFooter>
          <Button size="lg" onClick={onClose}>
            Close
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  )
}