Hover Card

'use client';

import { Button } from '@/registry/san-francisco/ui/button';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/registry/san-francisco/ui/hover-card';

export default function HoverCardDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger delay={10} closeDelay={100} render={<Button variant="link">Hover over me</Button>} />
      <HoverCardContent>
        <div className="flex flex-col gap-2">
          <div className="text-sm font-medium">Preview Card</div>
          <div className="text-muted-foreground text-sm">
            This card appears on hover and provides additional context or a content preview.
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}

'use client';

import { Button } from '@/registry/san-francisco/ui/button';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/registry/san-francisco/ui/hover-card';

export default function HoverCardDemoPositioning() {
  return (
    <div className="flex gap-4">
      <HoverCard>
        <HoverCardTrigger render={<Button variant="outline">Bottom</Button>} />
        <HoverCardContent side="bottom">
          <p className="text-sm">Appears below the trigger.</p>
        </HoverCardContent>
      </HoverCard>
      <HoverCard>
        <HoverCardTrigger render={<Button variant="outline">Top</Button>} />
        <HoverCardContent side="top">
          <p className="text-sm">Appears above the trigger.</p>
        </HoverCardContent>
      </HoverCard>
    </div>
  );
}