SettingsModal now uses Tabs component
This commit is contained in:
parent
9968ca7695
commit
630acef7fc
1 changed files with 12 additions and 26 deletions
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue