Hover Card

 1import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/wensity/hover-card";
 2import { Avatar, AvatarImage, AvatarFallback } from "@/components/wensity/avatar";
 3import { Button } from "@/components/wensity/button";
 4
 5export function ProfileHoverCard() {
 6  return (
 7    <p className="max-w-sm text-sm leading-6 text-zinc-600">
 8      Nina tagged{" "}
 9      <HoverCard openDelay={300} closeDelay={150}>
10        <HoverCardTrigger asChild>
11          <button type="button" className="bg-transparent p-0 font-medium text-zinc-900 underline underline-offset-4">
12            @ksparth12
13          </button>
14        </HoverCardTrigger>
15        <HoverCardContent width="lg" className="p-4">
16          <div className="flex items-start justify-between gap-4">
17            <Avatar size="md">
18              <AvatarImage src="https://assets.wensity.com/avatars/1.webp" alt="Parth Sharma" />
19              <AvatarFallback>PS</AvatarFallback>
20            </Avatar>
21            <Button size="sm" variant="secondary">Follow</Button>
22          </div>
23          <div className="mt-3">
24            <p className="text-sm font-semibold">Parth Sharma</p>
25            <p className="text-[11px] text-zinc-500">@ksparth12</p>
26            <p className="mt-2 text-xs leading-relaxed text-zinc-600">
27              Full-Stack Developer, Freelancer, & Founder. Obsessed with crafting web experiences that feel alive.
28            </p>
29          </div>
30        </HoverCardContent>
31      </HoverCard>{" "}
32      for the final polish pass.
33    </p>
34  );
35}

 1import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/wensity/hover-card";
 2import { IconBrandGithub, IconStar, IconGitFork } from "@tabler/icons-react";
 3
 4export function RichHoverCard() {
 5  return (
 6    <HoverCard openDelay={300} closeDelay={150}>
 7      <HoverCardTrigger asChild>
 8        <a href="#">wensity-mono</a>
 9      </HoverCardTrigger>
10      <HoverCardContent width="lg" className="p-4">
11        <div className="flex items-center gap-2">
12          <IconBrandGithub className="size-4" />
13          <span className="text-xs font-semibold">wensity-mono</span>
14        </div>
15        <p className="mt-2 text-xs text-zinc-500">
16          Turborepo monorepo for the Wensity Next.js marketplace and component library.
17        </p>
18        <div className="mt-4 flex items-center gap-4 text-[10px] text-zinc-400">
19          <span className="flex items-center gap-1"><IconStar className="size-3" /> 1,289</span>
20          <span className="flex items-center gap-1"><IconGitFork className="size-3" /> 142</span>
21        </div>
22      </HoverCardContent>
23    </HoverCard>
24  );
25}

 1import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/wensity/hover-card";
 2
 3export function MediaHoverCard() {
 4  return (
 5    <HoverCard openDelay={300} closeDelay={150}>
 6      <HoverCardTrigger asChild>
 7        <a href="#">fintech-template</a>
 8      </HoverCardTrigger>
 9      <HoverCardContent width="lg" className="p-0 overflow-hidden">
10        <img src="https://assets.wensity.com/templates/docs-site/marketplace/hero.webp" alt="Preview" className="w-full object-cover aspect-[16/10]" />
11        <div className="p-4">
12          <p className="text-sm font-semibold">Fintech Dashboard</p>
13          <p className="mt-1 text-xs text-zinc-500">Clean financial application layout with charts.</p>
14        </div>
15      </HoverCardContent>
16    </HoverCard>
17  );
18}

 1import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/wensity/hover-card";
 2import { Switch } from "@/components/wensity/switch";
 3import { Button } from "@/components/wensity/button";
 4
 5export function InteractiveHoverCard() {
 6  return (
 7    <HoverCard openDelay={300} closeDelay={150}>
 8      <HoverCardTrigger asChild>
 9        <a href="#">Notifications</a>
10      </HoverCardTrigger>
11      <HoverCardContent width="md" className="p-4">
12        <div className="flex items-start justify-between gap-4">
13          <div>
14            <p className="text-sm font-semibold">Push Notifications</p>
15            <p className="text-xs text-zinc-500">Receive alerts for registry changes.</p>
16          </div>
17          <Switch checked />
18        </div>
19      </HoverCardContent>
20    </HoverCard>
21  );
22}