MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

SettingsModal now uses Tabs component

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-21 13:43:58 +02:00
parent 72d6b941d3
commit 5e1621fdd1
1 changed files with 12 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/builder/src/components/settings/SettingsModal.svelte
View File

@ -1,28 +1,6 @@
<script> <script>
import { General, DangerZone, APIKeys } from "./tabs" import { General, DangerZone, APIKeys } from "./tabs"
import { Switcher, ModalContent } from "@budibase/bbui" import { ModalContent, Tab, Tabs } from "@budibase/bbui"
const tabs = [
{
title: "General",
key: "GENERAL",
component: General,
},
{
title: "API Keys",
key: "API_KEYS",
component: APIKeys,
},
{
title: "Danger Zone",
key: "DANGERZONE",
component: DangerZone,
},
]
let value = "GENERAL"
$: selectedTab = tabs.find(tab => tab.key === value).component
</script> </script>
<ModalContent <ModalContent
@ -30,9 +8,17 @@
showConfirmButton={false} showConfirmButton={false}
showCancelButton={false}> showCancelButton={false}>
<div class="container"> <div class="container">
<Switcher headings={tabs} bind:value> <Tabs selected="General">
<svelte:component this={selectedTab} /> <Tab title="General">
</Switcher> <General />
</Tab>
<Tab title="API Keys">
<APIKeys />
</Tab>
<Tab title="Danger Zone">
<DangerZone />
</Tab>
</Tabs>
</div> </div>
</ModalContent> </ModalContent>