Something went wrong. Try again.
svelte astro
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586<script lang="ts"> import type { Snippet } from "svelte"; import Hover from "./Hover.svelte";
type Props = { children: Snippet; title?: string; color?: string; class?: string; tooltip?: string; tooltipPos?: "top" | "bottom" | "right" | "left"; tooltipDelay?: number; }; let { children, title = "", color = "var(--border)", class: className = "", tooltip, tooltipPos = "top", tooltipDelay = 200, }: Props = $props();</script>
<div class="block {className}" style:--color={color}> {#if title} <span class="title"> {#if tooltip} <Hover {tooltip} borderColor={color} position={tooltipPos} delay={tooltipDelay} > {title} </Hover> {:else} {title} {/if} </span> {/if} <div class="content"> {#if tooltip && !title} <Hover {tooltip} borderColor={color} position={tooltipPos} delay={tooltipDelay} > {@render children()} </Hover> {:else} {@render children()} {/if} </div></div>
<style> .block { position: relative; display: flex; flex-direction: column; transition: color 0s; }
.content { background-color: var(--surface); border: 3px solid var(--color); border-radius: 8px; padding: var(--padding); }
.title { background-color: var(--surface); color: var(--color); position: absolute; top: -var(--padding); left: var(--padding); font-size: 0.85em; font-weight: bold; padding: 0 var(--padding); line-height: 0.5; cursor: default; }</style>