Introduce TitledContainer

2021-05-27 23:19:05 +02:00 · 2021-05-27 23:19:05 +02:00 · 17b39b8ef8
commit 17b39b8ef8
parent 70c8b8940d
12 changed files with 238 additions and 202 deletions
--- a/ts/deckoptions/Addons.svelte
+++ b/ts/deckoptions/Addons.svelte
@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    // import * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
    import type { DeckOptionsState } from "./lib";

    export let state: DeckOptionsState;
@ -12,9 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>

 {#if $components.length || state.haveAddons}
-    <div>
-        <h2>Add-ons</h2>
-
+    <TitledContainer title="Add-ons">
        <p>
            If you're using an add-on that hasn't been updated to use this new screen
            yet, you can access the old deck options screen by holding down the shift
@ -24,5 +22,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        {#each $components as addon}
            <svelte:component this={addon.component} bind:data={$auxData} {...addon} />
        {/each}
-    </div>
+    </TitledContainer>
 {/if}
--- a/ts/deckoptions/AdvancedOptions.svelte
+++ b/ts/deckoptions/AdvancedOptions.svelte
@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
    import * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
    import SpinBox from "./SpinBox.svelte";
    import SpinBoxFloat from "./SpinBoxFloat.svelte";
    import type { DeckOptionsState } from "./lib";
@ -13,63 +14,63 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    let defaults = state.defaults;
 </script>

-<h2>{tr.deckConfigAdvancedTitle()}</h2>
+<TitledContainer title={tr.deckConfigAdvancedTitle()}>
+    <SpinBox
+        label={tr.schedulingMaximumInterval()}
+        tooltip={tr.deckConfigMaximumIntervalTooltip()}
+        min={1}
+        max={365 * 100}
+        defaultValue={defaults.maximumReviewInterval}
+        bind:value={$config.maximumReviewInterval}
+    />

-<SpinBox
-    label={tr.schedulingMaximumInterval()}
-    tooltip={tr.deckConfigMaximumIntervalTooltip()}
-    min={1}
-    max={365 * 100}
-    defaultValue={defaults.maximumReviewInterval}
-    bind:value={$config.maximumReviewInterval}
-/>
+    <SpinBoxFloat
+        label={tr.schedulingStartingEase()}
+        tooltip={tr.deckConfigStartingEaseTooltip()}
+        min={1.31}
+        max={5}
+        defaultValue={defaults.initialEase}
+        value={$config.initialEase}
+        on:changed={(evt) => ($config.initialEase = evt.detail.value)}
+    />

-<SpinBoxFloat
-    label={tr.schedulingStartingEase()}
-    tooltip={tr.deckConfigStartingEaseTooltip()}
-    min={1.31}
-    max={5}
-    defaultValue={defaults.initialEase}
-    value={$config.initialEase}
-    on:changed={(evt) => ($config.initialEase = evt.detail.value)}
-/>
+    <SpinBoxFloat
+        label={tr.schedulingEasyBonus()}
+        tooltip={tr.deckConfigEasyBonusTooltip()}
+        min={1}
+        max={3}
+        defaultValue={defaults.easyMultiplier}
+        value={$config.easyMultiplier}
+        on:changed={(evt) => ($config.easyMultiplier = evt.detail.value)}
+    />

-<SpinBoxFloat
-    label={tr.schedulingEasyBonus()}
-    tooltip={tr.deckConfigEasyBonusTooltip()}
-    min={1}
-    max={3}
-    defaultValue={defaults.easyMultiplier}
-    value={$config.easyMultiplier}
-    on:changed={(evt) => ($config.easyMultiplier = evt.detail.value)}
-/>
+    <SpinBoxFloat
+        label={tr.schedulingIntervalModifier()}
+        tooltip={tr.deckConfigIntervalModifierTooltip()}
+        min={0.5}
+        max={2}
+        defaultValue={defaults.intervalMultiplier}
+        value={$config.intervalMultiplier}
+        on:changed={(evt) => ($config.intervalMultiplier = evt.detail.value)}
+    />

-<SpinBoxFloat
-    label={tr.schedulingIntervalModifier()}
-    tooltip={tr.deckConfigIntervalModifierTooltip()}
-    min={0.5}
-    max={2}
-    defaultValue={defaults.intervalMultiplier}
-    value={$config.intervalMultiplier}
-    on:changed={(evt) => ($config.intervalMultiplier = evt.detail.value)}
-/>
+    <SpinBoxFloat
+        label={tr.schedulingHardInterval()}
+        tooltip={tr.deckConfigHardIntervalTooltip()}
+        min={0.5}
+        max={1.3}
+        defaultValue={defaults.hardMultiplier}
+        value={$config.hardMultiplier}
+        on:changed={(evt) => ($config.hardMultiplier = evt.detail.value)}
+    />

-<SpinBoxFloat
-    label={tr.schedulingHardInterval()}
-    tooltip={tr.deckConfigHardIntervalTooltip()}
-    min={0.5}
-    max={1.3}
-    defaultValue={defaults.hardMultiplier}
-    value={$config.hardMultiplier}
-    on:changed={(evt) => ($config.hardMultiplier = evt.detail.value)}
-/>
-
-<SpinBoxFloat
-    label={tr.schedulingNewInterval()}
-    tooltip={tr.deckConfigNewIntervalTooltip()}
-    min={0}
-    max={1}
-    defaultValue={defaults.lapseMultiplier}
-    value={$config.lapseMultiplier}
-    on:changed={(evt) => ($config.lapseMultiplier = evt.detail.value)}
-/>
+    <SpinBoxFloat
+        label={tr.schedulingNewInterval()}
+        tooltip={tr.deckConfigNewIntervalTooltip()}
+        min={0}
+        max={1}
+        defaultValue={defaults.lapseMultiplier}
+        value={$config.lapseMultiplier}
+        on:changed={(evt) => ($config.lapseMultiplier = evt.detail.value)}
+    />
+</TitledContainer>
--- a/ts/deckoptions/AudioOptions.svelte
+++ b/ts/deckoptions/AudioOptions.svelte
@ -0,0 +1,29 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
+    import CheckBox from "./CheckBox.svelte";
+    import type { DeckOptionsState } from "./lib";
+
+    export let state: DeckOptionsState;
+    let config = state.currentConfig;
+    let defaults = state.defaults;
+</script>
+
+<TitledContainer title={tr.deckConfigAudioTitle()}>
+    <CheckBox
+        label={tr.deckConfigDisableAutoplay()}
+        defaultValue={defaults.disableAutoplay}
+        bind:value={$config.disableAutoplay}
+    />
+
+    <CheckBox
+        label={tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
+        tooltip={tr.deckConfigAlwaysIncludeQuestionAudioTooltip()}
+        defaultValue={defaults.skipQuestionWhenReplayingAnswer}
+        bind:value={$config.skipQuestionWhenReplayingAnswer}
+    />
+</TitledContainer>
--- a/ts/deckoptions/BuryOptions.svelte
+++ b/ts/deckoptions/BuryOptions.svelte
@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
    import * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
    import CheckBox from "./CheckBox.svelte";
    import type { DeckOptionsState } from "./lib";

@ -12,18 +13,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    let defaults = state.defaults;
 </script>

-<h2>{tr.deckConfigBuryTitle()}</h2>
+<TitledContainer title={tr.deckConfigBuryTitle()}>
+    <CheckBox
+        label={tr.deckConfigBuryNewSiblings()}
+        tooltip={tr.deckConfigBuryTooltip()}
+        defaultValue={defaults.buryNew}
+        bind:value={$config.buryNew}
+    />

-<CheckBox
-    label={tr.deckConfigBuryNewSiblings()}
-    tooltip={tr.deckConfigBuryTooltip()}
-    defaultValue={defaults.buryNew}
-    bind:value={$config.buryNew}
-/>
-
-<CheckBox
-    label={tr.deckConfigBuryReviewSiblings()}
-    tooltip={tr.deckConfigBuryTooltip()}
-    defaultValue={defaults.buryReviews}
-    bind:value={$config.buryReviews}
-/>
+    <CheckBox
+        label={tr.deckConfigBuryReviewSiblings()}
+        tooltip={tr.deckConfigBuryTooltip()}
+        defaultValue={defaults.buryReviews}
+        bind:value={$config.buryReviews}
+    />
+</TitledContainer>
--- a/ts/deckoptions/ConfigEditor.svelte
+++ b/ts/deckoptions/ConfigEditor.svelte
@ -12,7 +12,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    import AdvancedOptions from "./AdvancedOptions.svelte";
    import BuryOptions from "./BuryOptions.svelte";
    import LapseOptions from "./LapseOptions.svelte";
-    import GeneralOptions from "./GeneralOptions.svelte";
+    import TimerOptions from "./TimerOptions.svelte";
+    import AudioOptions from "./AudioOptions.svelte";
    import Addons from "./Addons.svelte";
    import type { DeckOptionsState } from "./lib";

@ -42,7 +43,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    {/if}

    <SectionItem>
-        <GeneralOptions {state} />
+        <TimerOptions {state} />
+    </SectionItem>
+    <SectionItem>
+        <AudioOptions {state} />
    </SectionItem>
    <SectionItem>
        <Addons {state} />
@ -59,7 +63,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        // adding a border decreases the default font size,
        // so increase it again
        font-size: 2em;
-        border-bottom: 1px solid var(--medium-border);
        margin-right: 16px;
        margin-bottom: 0.5em;
    }
--- a/ts/deckoptions/DailyLimits.svelte
+++ b/ts/deckoptions/DailyLimits.svelte
@ -1,9 +1,10 @@
 <!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+    Copyright: Ankitects Pty Ltd and contributors
+    License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
    import * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
    import SpinBox from "./SpinBox.svelte";
    import type { DeckOptionsState } from "./lib";

@ -33,9 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
            : "";
 </script>

-<h2>{tr.deckConfigDailyLimits()}</h2>
-
-<div class="container">
+<TitledContainer title={tr.deckConfigDailyLimits()}>
    <SpinBox
        label={tr.schedulingNewCardsday()}
        tooltip={tr.deckConfigNewLimitTooltip() + v3Extra}
@ -53,4 +52,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        defaultValue={defaults.reviewsPerDay}
        bind:value={$config.reviewsPerDay}
    />
-</div>
+</TitledContainer>
--- a/ts/deckoptions/DisplayOrder.svelte
+++ b/ts/deckoptions/DisplayOrder.svelte
@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
    import * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
    import EnumSelector from "./EnumSelector.svelte";

    import type { DeckOptionsState } from "./lib";
@ -35,44 +36,44 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    ];
 </script>

-<h2>{tr.deckConfigOrderingTitle()}</h2>
+<TitledContainer title={tr.deckConfigOrderingTitle()}>
+    <EnumSelector
+        label={tr.deckConfigNewGatherPriority()}
+        tooltip={tr.deckConfigNewGatherPriorityTooltip()}
+        choices={newGatherPriorityChoices}
+        defaultValue={defaults.newCardGatherPriority}
+        bind:value={$config.newCardGatherPriority}
+    />

-<EnumSelector
-    label={tr.deckConfigNewGatherPriority()}
-    tooltip={tr.deckConfigNewGatherPriorityTooltip()}
-    choices={newGatherPriorityChoices}
-    defaultValue={defaults.newCardGatherPriority}
-    bind:value={$config.newCardGatherPriority}
-/>
+    <EnumSelector
+        label={tr.deckConfigNewCardSortOrder()}
+        tooltip={tr.deckConfigNewCardSortOrderTooltip()}
+        choices={newSortOrderChoices}
+        defaultValue={defaults.newCardSortOrder}
+        bind:value={$config.newCardSortOrder}
+    />

-<EnumSelector
-    label={tr.deckConfigNewCardSortOrder()}
-    tooltip={tr.deckConfigNewCardSortOrderTooltip()}
-    choices={newSortOrderChoices}
-    defaultValue={defaults.newCardSortOrder}
-    bind:value={$config.newCardSortOrder}
-/>
+    <EnumSelector
+        label={tr.deckConfigNewReviewPriority()}
+        tooltip={tr.deckConfigNewReviewPriorityTooltip()}
+        choices={reviewMixChoices()}
+        defaultValue={defaults.newMix}
+        bind:value={$config.newMix}
+    />

-<EnumSelector
-    label={tr.deckConfigNewReviewPriority()}
-    tooltip={tr.deckConfigNewReviewPriorityTooltip()}
-    choices={reviewMixChoices()}
-    defaultValue={defaults.newMix}
-    bind:value={$config.newMix}
-/>
+    <EnumSelector
+        label={tr.deckConfigInterdayStepPriority()}
+        tooltip={tr.deckConfigInterdayStepPriorityTooltip()}
+        choices={reviewMixChoices()}
+        defaultValue={defaults.interdayLearningMix}
+        bind:value={$config.interdayLearningMix}
+    />

-<EnumSelector
-    label={tr.deckConfigInterdayStepPriority()}
-    tooltip={tr.deckConfigInterdayStepPriorityTooltip()}
-    choices={reviewMixChoices()}
-    defaultValue={defaults.interdayLearningMix}
-    bind:value={$config.interdayLearningMix}
-/>
-
-<EnumSelector
-    label={tr.deckConfigReviewSortOrder()}
-    tooltip={tr.deckConfigReviewSortOrderTooltip()}
-    choices={reviewOrderChoices}
-    defaultValue={defaults.reviewOrder}
-    bind:value={$config.reviewOrder}
-/>
+    <EnumSelector
+        label={tr.deckConfigReviewSortOrder()}
+        tooltip={tr.deckConfigReviewSortOrderTooltip()}
+        choices={reviewOrderChoices}
+        defaultValue={defaults.reviewOrder}
+        bind:value={$config.reviewOrder}
+    />
+</TitledContainer>>
--- a/ts/deckoptions/GeneralOptions.svelte
+++ b/ts/deckoptions/GeneralOptions.svelte
@ -1,48 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
-<script lang="ts">
-    import * as tr from "lib/i18n";
-    import SpinBox from "./SpinBox.svelte";
-    import CheckBox from "./CheckBox.svelte";
-    import type { DeckOptionsState } from "./lib";
-
-    export let state: DeckOptionsState;
-    let config = state.currentConfig;
-    let defaults = state.defaults;
-</script>
-
-<h2>{tr.deckConfigTimerTitle()}</h2>
-
-<SpinBox
-    label={tr.deckConfigMaximumAnswerSecs()}
-    tooltip={tr.deckConfigMaximumAnswerSecsTooltip()}
-    min={30}
-    max={600}
-    defaultValue={defaults.capAnswerTimeToSecs}
-    bind:value={$config.capAnswerTimeToSecs}
-/>
-
-<CheckBox
-    id="showAnswerTimer"
-    label={tr.schedulingShowAnswerTimer()}
-    tooltip={tr.deckConfigShowAnswerTimerTooltip()}
-    defaultValue={defaults.showTimer}
-    bind:value={$config.showTimer}
-/>
-
-<h2>{tr.deckConfigAudioTitle()}</h2>
-
-<CheckBox
-    label={tr.deckConfigDisableAutoplay()}
-    defaultValue={defaults.disableAutoplay}
-    bind:value={$config.disableAutoplay}
-/>
-
-<CheckBox
-    label={tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
-    tooltip={tr.deckConfigAlwaysIncludeQuestionAudioTooltip()}
-    defaultValue={defaults.skipQuestionWhenReplayingAnswer}
-    bind:value={$config.skipQuestionWhenReplayingAnswer}
-/>
--- a/ts/deckoptions/LapseOptions.svelte
+++ b/ts/deckoptions/LapseOptions.svelte
@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
    import * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
    import SpinBox from "./SpinBox.svelte";
    import EnumSelector from "./EnumSelector.svelte";
    import StepsInput from "./StepsInput.svelte";
@ -27,9 +28,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    const leechChoices = [tr.actionsSuspendCard(), tr.schedulingTagOnly()];
 </script>

-<div>
-    <h2>{tr.schedulingLapses()}</h2>
-
+<TitledContainer title={tr.schedulingLapses()}>
    <StepsInput
        label={tr.deckConfigRelearningSteps()}
        tooltip={tr.deckConfigRelearningStepsTooltip()}
@ -62,4 +61,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        defaultValue={defaults.leechAction}
        bind:value={$config.leechAction}
    />
-</div>
+</TitledContainer>
--- a/ts/deckoptions/NewOptions.svelte
+++ b/ts/deckoptions/NewOptions.svelte
@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
    import * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
    import SpinBox from "./SpinBox.svelte";
    import StepsInput from "./StepsInput.svelte";
    import EnumSelector from "./EnumSelector.svelte";
@ -35,36 +36,36 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
            : "";
 </script>

-<h2>{tr.schedulingNewCards()}</h2>
+<TitledContainer title={tr.schedulingNewCards()}>
+    <StepsInput
+        label={tr.deckConfigLearningSteps()}
+        tooltip={tr.deckConfigLearningStepsTooltip()}
+        defaultValue={defaults.learnSteps}
+        value={$config.learnSteps}
+        on:changed={(evt) => ($config.learnSteps = evt.detail.value)}
+    />

-<StepsInput
-    label={tr.deckConfigLearningSteps()}
-    tooltip={tr.deckConfigLearningStepsTooltip()}
-    defaultValue={defaults.learnSteps}
-    value={$config.learnSteps}
-    on:changed={(evt) => ($config.learnSteps = evt.detail.value)}
-/>
+    <SpinBox
+        label={tr.schedulingGraduatingInterval()}
+        tooltip={tr.deckConfigGraduatingIntervalTooltip()}
+        warnings={[stepsExceedGraduatingInterval]}
+        defaultValue={defaults.graduatingIntervalGood}
+        bind:value={$config.graduatingIntervalGood}
+    />

-<SpinBox
-    label={tr.schedulingGraduatingInterval()}
-    tooltip={tr.deckConfigGraduatingIntervalTooltip()}
-    warnings={[stepsExceedGraduatingInterval]}
-    defaultValue={defaults.graduatingIntervalGood}
-    bind:value={$config.graduatingIntervalGood}
-/>
+    <SpinBox
+        label={tr.schedulingEasyInterval()}
+        tooltip={tr.deckConfigEasyIntervalTooltip()}
+        warnings={[goodExceedsEasy]}
+        defaultValue={defaults.graduatingIntervalEasy}
+        bind:value={$config.graduatingIntervalEasy}
+    />

-<SpinBox
-    label={tr.schedulingEasyInterval()}
-    tooltip={tr.deckConfigEasyIntervalTooltip()}
-    warnings={[goodExceedsEasy]}
-    defaultValue={defaults.graduatingIntervalEasy}
-    bind:value={$config.graduatingIntervalEasy}
-/>
-
-<EnumSelector
-    label={tr.deckConfigNewInsertionOrder()}
-    tooltip={tr.deckConfigNewInsertionOrderTooltip()}
-    choices={newInsertOrderChoices}
-    defaultValue={defaults.newCardInsertOrder}
-    bind:value={$config.newCardInsertOrder}
-/>
+    <EnumSelector
+        label={tr.deckConfigNewInsertionOrder()}
+        tooltip={tr.deckConfigNewInsertionOrderTooltip()}
+        choices={newInsertOrderChoices}
+        defaultValue={defaults.newCardInsertOrder}
+        bind:value={$config.newCardInsertOrder}
+    />
+</TitledContainer>
--- a/ts/deckoptions/TimerOptions.svelte
+++ b/ts/deckoptions/TimerOptions.svelte
@ -0,0 +1,34 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import * as tr from "lib/i18n";
+    import TitledContainer from "./TitledContainer.svelte";
+    import SpinBox from "./SpinBox.svelte";
+    import CheckBox from "./CheckBox.svelte";
+    import type { DeckOptionsState } from "./lib";
+
+    export let state: DeckOptionsState;
+    let config = state.currentConfig;
+    let defaults = state.defaults;
+</script>
+
+<TitledContainer title={tr.deckConfigTimerTitle()}>
+    <SpinBox
+        label={tr.deckConfigMaximumAnswerSecs()}
+        tooltip={tr.deckConfigMaximumAnswerSecsTooltip()}
+        min={30}
+        max={600}
+        defaultValue={defaults.capAnswerTimeToSecs}
+        bind:value={$config.capAnswerTimeToSecs}
+    />
+
+    <CheckBox
+        id="showAnswerTimer"
+        label={tr.schedulingShowAnswerTimer()}
+        tooltip={tr.deckConfigShowAnswerTimerTooltip()}
+        defaultValue={defaults.showTimer}
+        bind:value={$config.showTimer}
+    />
+</TitledContainer>
--- a/ts/deckoptions/TitledContainer.svelte
+++ b/ts/deckoptions/TitledContainer.svelte
@ -0,0 +1,18 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    export let title: string;
+</script>
+
+<div class="container-fluid mb-3">
+    <h1 class="mt-3">{title}</h1>
+    <slot />
+</div>
+
+<style lang="scss">
+    h1 {
+        border-bottom: 1px solid var(--medium-border);
+    }
+</style>