Hover Card

<script lang="ts">
	import { HoverCard } from 'radix-svelte';
	import type { ResolvedProps } from 'radix-svelte/internal/helpers';

	let rootOpen: boolean;
	let rootOpenDelay: number = 750;
	let rootCloseDelay: number = 300;
	let portalContainer: HTMLElement | string;
	let contentSide = "bottom";
	let contentSideOffset: number;
	let contentAlign = "center";
	let contentAlignOffset: number;
	let contentArrowPadding: number;
	let contentCollisionPadding: number;
	let contentSticky = "partial";
	let contentHideWhenDetached: boolean;
	let contentAvoidCollisions: boolean = true;
	let arrowWidth: number = 10;
	let arrowHeight: number = 5;
</script>

<div class="contents">
	<HoverCard.Root
		open={rootOpen}
		openDelay={rootOpenDelay}
		closeDelay={rootCloseDelay}
	>
		<HoverCard.Trigger
			href="https://github.com/TGlide/radix-svelte"
			class="rounded-full p-2 outline-none ring-black focus:ring"
		>
			<img class="h-8 w-8" src="/radix-svelte.svg" alt="Radix and Svelte logos" />
		</HoverCard.Trigger>
		<HoverCard.Portal>
			<HoverCard.Content
				side={contentSide}
				sideOffset={contentSideOffset}
				align={contentAlign}
				alignOffset={contentAlignOffset}
				arrowPadding={contentArrowPadding}
				collisionPadding={contentCollisionPadding}
				sticky={contentSticky}
				hideWhenDetached={contentHideWhenDetached}
				avoidCollisions={contentAvoidCollisions}
				class="w-80 rounded-sm bg-white p-5 shadow-sm"
			>
				<HoverCard.Arrow width={20} height={10} class="fill-white" />
				<div class="flex flex-col gap-2">
					<img
						src="/radix-svelte.svg"
						class="block h-12 w-12 rounded-[100%] bg-vermilion-600 object-cover p-2"
						alt="Radix and Svelte logos"
					/>
					<div class="flex flex-col gap-4">
						<div>
							<div class="font-bold text-black">Radix Svelte</div>
							<div class="font-light text-zinc-400">TGlide/radix-svelte</div>
						</div>
					</div>
					<div class="m-0 text-zinc-700">
						A set of unstyled, accessible components for building high-quality design systems and
						web apps
					</div>
					<div class="flex gap-4">
						<div class="flex gap-1">
							<div class="font-thin text-black">229</div>
							<div class="font-thin text-zinc-400">Stars</div>
						</div>
						<div class="flex gap-1">
							<div class="font-thin text-black">23</div>
							<div class="font-thin text-zinc-400">Forks</div>
						</div>
					</div>
				</div>
			</HoverCard.Content>
		</HoverCard.Portal>
	</HoverCard.Root>
</div>