tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Update docs examples + Add Select component + Add Card, Base, Title classes

Browse Source
This commit is contained in:
venashial
2022-03-29 00:44:23 -07:00
parent 8c5bf55b51
commit 98baab4d03
41 changed files with 1374 additions and 849 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/routes/_internal/components/Example.svelte
View File

@@ -1,18 +1,26 @@
<script lang="ts">
import Prism from 'prismjs';
import 'prism-svelte';
import Button from '$lib/components/Button.svelte'
import IconMoon from 'virtual:icons/heroicons-outline/moon'
import IconSun from 'virtual:icons/heroicons-outline/sun'
export let background: 'var(--color-raised-bg)' | 'transparent' = 'var(--color-raised-bg)'
export let code = ''
const highlighted = Prism.highlight(code.trim(), Prism.languages.svelte, 'svelte');
let theme = 'light'
let background: 'var(--color-raised-bg)' | 'var(--color-bg)' = 'var(--color-bg)'
</script>
<div class="example theme-light">
<div class="example__preview" style:background={background}>
<slot />
<div class="example">
<div class="example__preview theme-{theme} base" style:background={background}>
<div class="example__preview__options">
<Button color="primary-light" on:click={() => theme === 'light' ? theme = 'dark' : theme = 'light'}>
{#if theme === 'light'}
<IconMoon/>
{:else}
<IconSun/>
{/if}
</Button>
</div>
<slot name="example"/>
</div>
<pre class="example__code language-">{@html highlighted}</pre>
<pre class="example__code language-svelte"><slot name="code"/></pre>
</div>
<style lang="postcss">
@@ -20,13 +28,24 @@
margin-bottom: 32px;
&__preview {
padding: 16px;
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;
&__options {
position: absolute;
top: 0;
right: 0;
padding: 8px;
display: flex;
justify-content: flex-end;
z-index: 100;
}
}
&__code {