Hover Card

'use client';

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@/components/ui/hover-card';

export function HoverCardDefault() {
  return (
    <HoverCard>
      <HoverCardTrigger
        delay={10}
        closeDelay={100}
        className='text-primary underline underline-offset-4'
      >
        Hover over me
      </HoverCardTrigger>
      <HoverCardContent>
        <div className='flex flex-col gap-2'>
          <p className='font-semibold'>Hover Card</p>
          <p className='text-muted-foreground'>
            This is a hover card that appears on hover. It can contain any
            content you want to display.
          </p>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}

'use client';

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

const HOVER_CARD_SIDES = ['left', 'top', 'bottom', 'right'] as const;

export function HoverCardSides() {
  return (
    <div className='flex flex-wrap justify-center gap-2'>
      {HOVER_CARD_SIDES.map((side) => (
        <HoverCard key={side}>
          <HoverCardTrigger
            delay={100}
            closeDelay={100}
            render={
              <Button variant='outline' className='capitalize'>
                {side}
              </Button>
            }
          />
          <HoverCardContent side={side}>
            <div className='flex flex-col gap-1'>
              <h4 className='font-medium'>Hover Card</h4>
              <p>This hover card appears on the {side} side of the trigger.</p>
            </div>
          </HoverCardContent>
        </HoverCard>
      ))}
    </div>
  );
}