Themes modal udpated

This commit is contained in:
Sean Edmunds
2024-08-15 17:07:48 -05:00
parent a47f201fff
commit a37ab84f65
45 changed files with 1480 additions and 1177 deletions

View File

@@ -1,8 +1,8 @@
import { ActionIcon, Group, Stack, Tabs } from "@mantine/core";
import tabClasses from '../../styles/Tabs.module.css';
import { ActionIcon, Group, Stack, Tabs, Text } from "@mantine/core";
import tabClasses from "../../styles/Tabs.module.css";
import Personalization from "./components/Personalization";
import { FiArrowLeftCircle } from "react-icons/fi";
import { actionIconClasses } from "../../styles";
import { actionIconClasses, textClasses } from "../../styles";
import Messages from "./components/Messages";
import Applications from "./components/Applications";
import Bookmarks from "./components/Bookmarks";
@@ -10,32 +10,60 @@ import Categories from "./components/Categories";
import SearchProviders from "./components/SearchProviders";
import Themes from "./components/Themes";
function Settings({theme}:any) {
function Settings({ theme }: any) {
return (
<Stack h={'100vh'} px={'2rem'} bg={'var(--color-background)'}>
<Group gap={0} >
<ActionIcon className={actionIconClasses.backButton} classNames={actionIconClasses} component="a" href="/trigger"><FiArrowLeftCircle/></ActionIcon>
<h1>Settings</h1>
</Group>
<Tabs orientation="vertical" defaultValue={'personalization'} className={tabClasses.settingsTabs} classNames={tabClasses}>
<Tabs.List>
<Tabs.Tab value="personalization">Personal Info</Tabs.Tab>
<Tabs.Tab value="messages">Messages</Tabs.Tab>
<Tabs.Tab value="applications">Applications</Tabs.Tab>
<Tabs.Tab value="bookmarks">Bookmarks</Tabs.Tab>
<Tabs.Tab value="bookmarksCategories">Categories</Tabs.Tab>
<Tabs.Tab value="themes">Themes</Tabs.Tab>
<Tabs.Tab value="providers">Search Providers</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="personalization"><Personalization/></Tabs.Panel>
<Tabs.Panel value="messages"><Messages/></Tabs.Panel>
<Tabs.Panel value="applications"><Applications/></Tabs.Panel>
<Tabs.Panel value="bookmarks"><Bookmarks/></Tabs.Panel>
<Tabs.Panel value="bookmarksCategories"><Categories/></Tabs.Panel>
<Tabs.Panel value="themes"><Themes/></Tabs.Panel>
<Tabs.Panel value="providers"><SearchProviders/></Tabs.Panel>
</Tabs>
</Stack>
<Stack h={"100vh"} px={"2rem"} bg={"var(--color-background)"}>
<Group gap={0}>
<ActionIcon
className={actionIconClasses.backButton}
classNames={actionIconClasses}
component="a"
href="/trigger"
>
<FiArrowLeftCircle />
</ActionIcon>
<Text className={textClasses.settingsTitle} classNames={textClasses}>
Settings
</Text>
</Group>
<Tabs
orientation="vertical"
defaultValue={"personalization"}
className={tabClasses.settingsTabs}
classNames={tabClasses}
>
<Tabs.List>
<Tabs.Tab value="personalization">Personal Info</Tabs.Tab>
<Tabs.Tab value="messages">Messages</Tabs.Tab>
<Tabs.Tab value="applications">Applications</Tabs.Tab>
<Tabs.Tab value="bookmarks">Bookmarks</Tabs.Tab>
<Tabs.Tab value="bookmarksCategories">Categories</Tabs.Tab>
<Tabs.Tab value="themes">Themes</Tabs.Tab>
<Tabs.Tab value="providers">Search Providers</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="personalization">
<Personalization />
</Tabs.Panel>
<Tabs.Panel value="messages">
<Messages />
</Tabs.Panel>
<Tabs.Panel value="applications">
<Applications />
</Tabs.Panel>
<Tabs.Panel value="bookmarks">
<Bookmarks />
</Tabs.Panel>
<Tabs.Panel value="bookmarksCategories">
<Categories />
</Tabs.Panel>
<Tabs.Panel value="themes">
<Themes theme={theme} />
</Tabs.Panel>
<Tabs.Panel value="providers">
<SearchProviders />
</Tabs.Panel>
</Tabs>
</Stack>
);
}
export default Settings;