Skip to content

Commit

Permalink
refactor: examples (#15)
Browse files Browse the repository at this point in the history
jrasm91 authored Nov 15, 2024
1 parent f802f41 commit 2b64b49
Showing 17 changed files with 461 additions and 507 deletions.
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
<script lang="ts">
import { Theme, DisplayOption } from '$docs/constants.js';
import { routes } from '$docs/routes.js';
import { DisplayOption, Theme } from '$docs/constants.js';
import { Icon } from '$lib/index.js';
import { mdiCompare, mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
import type { Snippet } from 'svelte';
type Props = {
name: string;
component: Snippet<[{ theme: Theme }]>;
};
const { name, component }: Props = $props();
const themes = [DisplayOption.Both, DisplayOption.Light, DisplayOption.Dark];
const themeIcons: Record<DisplayOption, string> = {
@@ -14,8 +21,6 @@
let displayOption = $state<DisplayOption>(DisplayOption.Both);
let themeIcon = $derived(themeIcons[displayOption]);
const { data } = $props();
const route = $derived(routes.find((route) => route.link === data.link));
const displayThemes = $derived<Theme[]>(
displayOption === 'both'
? [Theme.Light, Theme.Dark]
@@ -47,22 +52,16 @@
<div class="flex items-center gap-2">
<a href="/" class="underline">Home</a>
<span>/</span>
<span class="capitalize">{data.component}</span>
<span class="capitalize">{name}</span>
</div>
</nav>

{#if route}
<div class="grid grow grid-cols-1 {displayThemes.length === 2 ? 'md:grid-cols-2' : ''}">
{#each displayThemes as theme}
<div class="flex flex-col gap-4 {theme} h-full bg-light p-8">
<h2 class="text-2xl capitalize text-dark">{theme}</h2>
<route.component {theme}></route.component>
</div>
{/each}
</div>
{:else}
<div class="p-8">
<h2 class="text-xl">No examples found for {data.component}</h2>
</div>
{/if}
<div class="grid grow grid-cols-1 {displayThemes.length === 2 ? 'md:grid-cols-2' : ''}">
{#each displayThemes as theme}
<div class="flex flex-col gap-4 {theme} h-full bg-light p-8">
<h2 class="text-2xl capitalize text-dark">{theme}</h2>
{@render component({ theme })}
</div>
{/each}
</div>
</div>
10 changes: 10 additions & 0 deletions src/docs/constants.ts
Original file line number Diff line number Diff line change
@@ -14,3 +14,13 @@ export enum Theme {
Light = 'light',
Dark = 'dark',
}

type Route = { name: string; link: string };

export const routes: Route[] = [
{ name: 'Button', link: '/examples/button' },
{ name: 'Checkbox', link: '/examples/checkbox' },
{ name: 'Card', link: '/examples/card' },
{ name: 'IconButton', link: '/examples/icon-button' },
{ name: 'Logo', link: '/examples/logo' },
];
122 changes: 0 additions & 122 deletions src/docs/examples/ButtonExamples.svelte

This file was deleted.

64 changes: 0 additions & 64 deletions src/docs/examples/CardExamples.svelte

This file was deleted.

65 changes: 0 additions & 65 deletions src/docs/examples/CheckboxExamples.svelte

This file was deleted.

14 changes: 0 additions & 14 deletions src/docs/examples/Example.svelte

This file was deleted.

Loading

0 comments on commit 2b64b49

Please sign in to comment.