40 lines
829 B
Svelte
40 lines
829 B
Svelte
<script lang="ts">
|
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
|
import type { Snippet } from 'svelte';
|
|
import { type UnifiedFont } from '../../model';
|
|
|
|
interface Props {
|
|
/**
|
|
* Object with information about font
|
|
*/
|
|
font: UnifiedFont;
|
|
/**
|
|
* Is element fully visible
|
|
*/
|
|
isFullyVisible: boolean;
|
|
/**
|
|
* Is element partially visible
|
|
*/
|
|
isPartiallyVisible: boolean;
|
|
/**
|
|
* From 0 to 1
|
|
*/
|
|
proximity: number;
|
|
/**
|
|
* Children snippet
|
|
*/
|
|
children: Snippet<[font: UnifiedFont]>;
|
|
}
|
|
|
|
const { font, children }: Props = $props();
|
|
</script>
|
|
|
|
<div
|
|
class={cn(
|
|
'pb-1 will-change-transform transition-transform duration-200 ease-out',
|
|
'hover:scale-[0.98]', // Simple CSS hover effect
|
|
)}
|
|
>
|
|
{@render children?.(font)}
|
|
</div>
|