40 lines
1.3 KiB
Svelte
40 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { editorStore } from '$lib/stores/editor';
|
|
import { faExternalLink } from '@fortawesome/free-solid-svg-icons';
|
|
import Fa from 'svelte-fa';
|
|
import Panel from './Panel.svelte';
|
|
|
|
export let preview: boolean = false;
|
|
export let handle: boolean = false;
|
|
export let url: string | undefined = undefined;
|
|
export let title: string | undefined = undefined;
|
|
</script>
|
|
|
|
<a
|
|
class="panel cursor-pointer rounded-3xl hover:bg-dark-hover-ui-element-bg/50 dark:hover:bg-light-hover-ui-element-bg/50 active:bg-dark-active-ui-element-bg/50 dark:active:bg-light-active-ui-element-bg/50 transition-colors box-content"
|
|
href={!$editorStore.editMode ? url : undefined}
|
|
target="_blank">
|
|
<Panel {handle} {preview}>
|
|
<div class="flex gap-1" class:title>
|
|
<div class="flex-grow" class:min-w-0={!title}>
|
|
<slot />
|
|
</div>
|
|
<div class="contents text-text-clickable text-xs">
|
|
{#if title}
|
|
<p class="whitespace-nowrap leading-[.8] text-base font-normal">{title}</p>
|
|
{/if}
|
|
<Fa icon={faExternalLink} />
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
</a>
|
|
|
|
<style lang="postcss">
|
|
div.title {
|
|
@apply flex-col-reverse gap-0;
|
|
}
|
|
|
|
div.title > div:last-of-type {
|
|
@apply flex w-full justify-between items-center mb-5;
|
|
}
|
|
</style>
|