Modrinth-plus/src/docs/components/Example.svelte

<script lang="ts">
    import { Button } from 'omorphia';
    import IconMoon from 'virtual:icons/heroicons-outline/moon';
    import IconSun from 'virtual:icons/heroicons-outline/sun';

    export let meta: { raised: boolean };

    let theme = 'light';
    let background = meta.raised ? 'var(--color-raised-bg)' : 'var(--color-bg)';
</script>

<div class="example">
    <div class="example__preview theme-{theme} base" style:background>
        <slot name="example" />
    </div>
    <div class="example__source">
        <div class="example__source__options">
            <Button
                color="primary-light"
                on:click={() => (theme === 'light' ? (theme = 'dark') : (theme = 'light'))}
            >
                {#if theme === 'light'}
                    <IconMoon />
                {:else}
                    <IconSun />
                {/if}
            </Button>
        </div>
        <pre class="example__source__code language-svelte"><slot name="code" /></pre>
    </div>
</div>

<style lang="postcss">
    .example {
        margin: 15px 0 32px;

        &__preview {
            border-radius: var(--rounded-sm-top);
            border: solid 2px hsl(0, 0%, 20%);
            border-bottom: none;
            display: flex;
            grid-gap: 16px;
            flex-wrap: wrap;
            position: relative;
            justify-content: flex-start;
            z-index: 1;
            padding: 16px;
        }

        &__source {
            position: relative;

            &__options {
                position: absolute;
                top: 0;
                right: 0;
                padding: 8px;
                display: flex;
                justify-content: flex-end;

                :global(button) {
                    color: black;
                }
            }

            &__code {
                margin: 0;
                border-radius: var(--rounded-sm-bottom) !important;
                background: hsl(220, 13%, 22%);
            }
        }
    }
</style>