Hover Card

import * as stylex from '@stylexjs/stylex';

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@/components/ui/hover-card';
import { space, fontSize, fontWeight } from '@/lib/constants.stylex';
import { colors } from '@/lib/tokens.stylex';

export default function HoverCardDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger render={<Button variant="ghost" />}>
        @nextjs
      </HoverCardTrigger>
      <HoverCardContent>
        <div {...stylex.props(styles.row)}>
          <Avatar>
            <AvatarImage src="https://github.com/vercel.png" alt="@vercel" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          <div {...stylex.props(styles.info)}>
            <span {...stylex.props(styles.name)}>@nextjs</span>
            <span>The React framework — created and maintained by Vercel.</span>
            <span {...stylex.props(styles.muted)}>Joined December 2021</span>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}

const styles = stylex.create({
  row: {
    display: 'flex',
    gap: space.s3,
  },
  info: {
    display: 'flex',
    flexDirection: 'column',
    gap: space.s1,
  },
  name: {
    fontWeight: fontWeight.semibold,
  },
  muted: {
    color: colors.mutedForeground,
    fontSize: fontSize.xs,
  },
});

import * as stylex from '@stylexjs/stylex';

import { Button } from '@/components/ui/button';
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@/components/ui/hover-card';
import { space } from '@/lib/constants.stylex';

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

export default function HoverCardSides() {
  return (
    <div {...stylex.props(styles.row)}>
      {sides.map((side) => (
        <HoverCard key={side}>
          <HoverCardTrigger render={<Button variant="outline" />}>
            {side}
          </HoverCardTrigger>
          <HoverCardContent side={side}>
            Hover card on {side}
          </HoverCardContent>
        </HoverCard>
      ))}
    </div>
  );
}

const styles = stylex.create({
  row: {
    alignItems: 'center',
    display: 'flex',
    flexWrap: 'wrap',
    gap: space.s2,
  },
});