Added upcoming changes

src/NewHome/NewHome.tsx

@@ -1,12 +1,83 @@
 import '@mantine/core/styles.css';
 import {
-    Anchor, Button, Flex,
-    MantineProvider,
+    Anchor, Button, Flex, Group, Badge,
+    MantineProvider, List, Accordion,
     Stack, Text, Title
 } from '@mantine/core';
 import { theme } from '../theme';
 
 export default function NewHome() {
+    const changes = [
+        {
+            text: 'v1.9',
+            isLatest: false,
+            isUpcoming: true,
+            details: [
+                {
+                    secondaryText: 'Added automatic hiding and showing of the on-screen controller when a physical controller is connected and disconnected',
+                    tertiaryText: null
+                },
+                {
+                    secondaryText: 'Added support for the front camera in the Cytrus core',
+                    tertiaryText: null
+                },
+                {
+                    secondaryText: 'Added YUV422 support for both the front and rear cameras in the Cytrus core',
+                    tertiaryText: null
+                },
+                {
+                    secondaryText: 'Added an archive feature that will back up and reset the documents directory every major release to ensure a smooth transition between releases',
+                    tertiaryText: 'archive.zip will contain the currently available core folders, this can be moved out of the documents directory, extracted on-device and used with the latest release'
+                },
+                {
+                    secondaryText: 'Changed how several features are handled improving support for both iPad and iPhone',
+                    tertiaryText: null
+                },
+                {
+                    secondaryText: 'Fixed crashing when using Sign in with Apple or Skip due to a damaged documents directory',
+                    tertiaryText: null
+                },
+                {
+                    secondaryText: 'Sorted games within the library screen alphabetically',
+                    tertiaryText: null
+                }
+            ]
+        }
+    ];
+
+    const items = changes.map((item) => {
+        const listItems = item.details.map((detail) => (
+            <List.Item>
+                <Text>
+                    {detail.secondaryText}
+                </Text>
+                <Text c={'dimmed'} size="sm" hidden={detail.tertiaryText == '' || detail.tertiaryText == null}>
+                    {detail.tertiaryText}
+                </Text>
+            </List.Item>
+        ));
+
+        return (
+            <Accordion.Item key={item.text} value={item.text}>
+                <Accordion.Control>
+                    <Group justify='space-between' pr={'md'}>
+                        <Text>
+                            {item.text}
+                        </Text>
+                        <Badge color={item.isLatest ? theme.primaryColor : item.isUpcoming ? 'dark' : theme.primaryColor}>
+                            {item.isLatest ? 'Latest' : item.isUpcoming ? 'Upcoming' : 'Latest'}
+                        </Badge>
+                    </Group>
+                </Accordion.Control>
+                <Accordion.Panel>
+                    <List>
+                        {listItems}
+                    </List>
+                </Accordion.Panel>
+            </Accordion.Item>
+        );
+    });
+
     return (
         <MantineProvider theme={theme}>
             <Flex align={'center'} justify={'center'} h={'100vh'} px={'md'} w={'100vw'}>
@@ -27,6 +98,12 @@ export default function NewHome() {
                         <Button component='a' href='https://github.com/folium-app' color='dark' radius={'xl'} variant='filled'>Open GitHub</Button>
                         <Button component='a' href='ipas/folium-v1.7-sideload.ipa.zip' color='teal' radius={'xl'} variant='filled'>Sideload</Button>
                     </Flex>
+                    <Title order={2}>
+                        Changes
+                    </Title>
+                    <Accordion radius={'md'} variant="contained">
+                        {items}
+                    </Accordion>
                 </Stack>
             </Flex>
         </MantineProvider>