69 lines
1.9 KiB
Svelte
69 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { ExternalLink } from 'lucide-svelte'
|
|
import PanelSection from './common/PanelSection.svelte'
|
|
import type { components } from '../component'
|
|
import { getComponentControl } from '../componentsPanel/componentControlUtils'
|
|
import { Highlight } from 'svelte-highlight'
|
|
import typescript from 'svelte-highlight/languages/typescript'
|
|
import { Button } from '$lib/components/common'
|
|
export let type: keyof typeof components
|
|
|
|
const componentControls = getComponentControl(type)
|
|
|
|
let collapsed: boolean = true
|
|
</script>
|
|
|
|
{#if componentControls?.length > 0}
|
|
<PanelSection title="Controls">
|
|
<div slot="action" class="flex justify-end flex-wrap gap-1">
|
|
<Button
|
|
color="light"
|
|
size="xs2"
|
|
btnClasses="text-2xs font-normal"
|
|
on:click={() => {
|
|
collapsed = !collapsed
|
|
}}
|
|
>
|
|
{collapsed ? 'Show' : 'Hide'} details
|
|
</Button>
|
|
</div>
|
|
|
|
{#if collapsed}
|
|
<div class="flex flex-row gap-1">
|
|
{#each componentControls as control}
|
|
<span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border">
|
|
{control.title}
|
|
</span>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<div class="text-xs"
|
|
>This component can be controlled by frontend scripts using these functions:</div
|
|
>
|
|
{#each componentControls as control}
|
|
<div class="text-xs leading-6 font-semibold">
|
|
{control.title}
|
|
</div>
|
|
<div class="text-xs">
|
|
{control.description}
|
|
</div>
|
|
<div class="p-1 border w-full overflow-x-auto">
|
|
<Highlight language={typescript} code={control.example} />
|
|
</div>
|
|
{#if control.documentation}
|
|
<a
|
|
href={control.documentation}
|
|
target="_blank"
|
|
class="text-frost-500 dark:text-frost-300 font-semibold text-xs"
|
|
>
|
|
<div class="flex flex-row gap-2">
|
|
See documentation
|
|
<ExternalLink size="16" />
|
|
</div>
|
|
</a>
|
|
{/if}
|
|
{/each}
|
|
{/if}
|
|
</PanelSection>
|
|
{/if}
|