38 lines
1.1 KiB
Svelte
38 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { SetupFontMenu } from '$features/SetupFont';
|
|
import {
|
|
Content as ItemContent,
|
|
Root as ItemRoot,
|
|
} from '$shared/shadcn/ui/item';
|
|
|
|
import { displayedFontsStore } from '$features/DisplayFont';
|
|
import { cubicOut } from 'svelte/easing';
|
|
import { crossfade } from 'svelte/transition';
|
|
|
|
const [send, receive] = crossfade({
|
|
duration: 400,
|
|
easing: cubicOut,
|
|
fallback(node, params) {
|
|
// If it can't find a pair, it falls back to a simple fade/slide
|
|
return {
|
|
duration: 400,
|
|
css: t => `opacity: ${t}; transform: translateY(${(1 - t) * 10}px);`,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
{#if displayedFontsStore.hasAnyFonts}
|
|
<div
|
|
class="w-auto fixed bottom-5 left-1/2 translate-x-[-50%] max-w-max z-10"
|
|
in:receive={{ key: 'panel' }}
|
|
out:send={{ key: 'panel' }}
|
|
>
|
|
<ItemRoot variant="outline" class="w-auto max-w-max p-2.5 rounded-2xl backdrop-blur-lg">
|
|
<ItemContent class="flex flex-row justify-center items-center max-w-max">
|
|
<SetupFontMenu />
|
|
</ItemContent>
|
|
</ItemRoot>
|
|
</div>
|
|
{/if}
|