Hover Card

templ HoverCardDemo() {
	@ui.HoverCard("", nil) {
		<a
			href="https://twitter.com/shadcn"
			target="_blank"
			rel="noreferrer"
			class="inline-flex items-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
			{ ui.HoverCardTriggerAttrs... }
		>
			{ "@shadcn" }
		</a>
		@ui.HoverCardContent("w-80", nil) {
			<div class="flex justify-between space-x-4">
				@ui.Avatar("", nil) {
					@ui.AvatarImage("https://github.com/shadcn.png", "@shadcn", "", nil)
					@ui.AvatarFallback("", nil) {
						SC
					}
				}
				<div class="space-y-1">
					<h4 class="text-sm font-semibold">{ "@shadcn" }</h4>
					<p class="text-sm">
						The React Framework – created and maintained by { "@vercel" }.
					</p>
					<div class="flex items-center pt-2">
						@icons.Calendar(icons.Props{Class: "mr-2 h-4 w-4 opacity-70"})
						<span class="text-xs text-muted-foreground">Joined December 2021</span>
					</div>
				</div>
			</div>
		}
	}
}