---
import Tab from './sidebar/Tab.astro'
import TabControls from './sidebar/TabWithControls.astro'
---

<div class="settings-sidebar">
    <div class="settings-sidebar-top">
        <Tab
        Page="1"
        Name="Welcome"
        Icon="fa-solid fa-wand-magic-sparkles"
        Default="active" // This selects the tab by default
        ></Tab>

        <Tab
        Page="2"
        Name="Files"
        Icon="fa-solid fa-folder-tree"
        ></Tab>

        <Tab
        Page="3"
        Name="Webview Demo"
        Icon="fa-solid fa-globe"
        ></Tab>

        <TabControls
        Page="3A"
        Name="Webview Demo"
        Icon="fa-solid fa-globe"
        ></TabControls>

        <Tab
        Page="4"
        Name="iFrame Demo"
        Icon="fa-solid fa-eye"
        ></Tab>
    </div>
    <div class="settings-sidebar-bottom">
        <Tab
        Page="5"
        Name="Settings"
        Icon="fa-solid fa-sliders"
        ></Tab>
    </div>
</div>