Styled Homepage

src/pages/settings/components/Themes.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+import { useQueryAPI } from "../../../hooks/useAPI";
+import { ActionIcon, Button, ColorPicker, ColorSwatch, Group, Modal, SimpleGrid, Stack } from "@mantine/core";
+import AppItem from "../../homepage/components/AppItem";
+import { FiEdit } from "react-icons/fi";
+import { useDisclosure, useLocalStorage } from "@mantine/hooks";
+import '@mantine/core/styles/ModalBase.css';
+import '@mantine/core/styles/Modal.css';
+function ThemesSettings() {
+    const [opened, { open, close }] = useDisclosure(false);
+    const [value, setValue] = useLocalStorage<any>({ key: 'theme', defaultValue: {} });
+	const { data, isFetched } = useQueryAPI({
+		endpoint: "api/themes",
+	});
+	const [themesList, setThemesList] = useState([]);
+    const [selectedTheme, setSelectedTheme] = useState<any>({});
+	useEffect(() => {
+		if (isFetched) {
+			setThemesList(data);
+		}
+	}, [isFetched]);
+
+    const handleOpen = (theme: any) => {
+        setSelectedTheme(theme);
+        open();
+    }
+
+	return (
+        <>
+            <Modal.Root opened={opened} onClose={close}>
+                <Modal.Overlay />
+                <Modal.Content>
+                <Modal.Header>
+                    <Modal.Title>Edit Theme</Modal.Title>
+                    <Modal.CloseButton />
+                </Modal.Header>
+                    <Modal.Body>
+                        <Stack style={{ backgroundColor: selectedTheme.colorbackground, borderRadius: '10px' }}>
+                            <Group justify="center" style={{ color: selectedTheme.colortextpri }}>{selectedTheme.name}</Group>
+                            <AppItem
+								name={'Example App'}
+								url={'https://example.com'}
+								icon={'mdi:apps'}
+								category={'Default'}
+							/>
+                        </Stack>
+                    </Modal.Body>
+                </Modal.Content>
+            </Modal.Root>
+            <Stack h={'100%'} w={'100%'}>
+                <h2>Themes</h2>
+                <SimpleGrid cols={5}>
+                    {themesList.map((theme: any) => (
+                        <Stack key={theme.name}>
+                            <Button
+                                style={{
+                                    backgroundColor: theme.colorbackground,
+                                    border: `solid ${theme.colorborder}`,
+                                    color: theme.colortextpri,
+                                }}
+                                data-theme={theme.name}
+                                onClick={() => {
+                                    setValue(theme.name)
+                                }}
+                            >
+                                {theme.name}
+                            </Button>
+                            <Group justify="space-between">
+                                <Group className="theme-palette">
+                                    <ColorSwatch color={theme.colorbackground} />
+                                    <ColorSwatch color={theme.colorsearchbackground} />
+                                    <ColorSwatch color={theme.colortextpri} />
+                                    <ColorSwatch color={theme.colortextacc} />
+                                    <ColorSwatch color={theme.colorborder} />
+                                </Group>
+                                <ActionIcon
+                                    onClick={() => handleOpen(theme)}
+                                ><FiEdit/></ActionIcon>
+                            </Group>
+                        </Stack>
+                    ))}
+                </SimpleGrid>
+            </Stack>
+        </>
+	);
+}
+export default ThemesSettings;