8-bit Hover Card

1import type * as HoverCardPrimitive from "@radix-ui/react-hover-card";
2import { type VariantProps, cva } from "class-variance-authority";
3 
4import { cn } from "@/lib/utils";
5 
6import {
7  HoverCard as ShadcnHoverCard,
8  HoverCardContent as ShadcnHoverCardContent,
9  HoverCardTrigger as ShadcnHoverCardTrigger,
10} from "@/components/ui/hover-card";
11 
12import "@/components/ui/8bit/styles/retro.css";
13 
14export const hoverCardVariants = cva("", {
15  variants: {
16    font: {
17      normal: "",
18      retro: "retro",
19    },
20  },
21  defaultVariants: {
22    font: "retro",
23  },
24});
25 
26export interface BitHoverCardProps
27  extends React.ComponentProps<typeof HoverCardPrimitive.Content>,
28    VariantProps<typeof hoverCardVariants> {}
29 
30function HoverCard({
31  ...props
32}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
33  return <ShadcnHoverCard {...props} />;
34}
35 
36function HoverCardTrigger({
37  className,
38  asChild = true,
39  ...props
40}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
41  return (
42    <ShadcnHoverCardTrigger
43      className={cn(className)}
44      asChild={asChild}
45      {...props}
46    />
47  );
48}
49 
50function HoverCardContent({
51  children,
52  className,
53  font,
54  ...props
55}: BitHoverCardProps) {
56  return (
57    <ShadcnHoverCardContent
58      className={cn(
59        "relative",
60        hoverCardVariants({
61          font,
62          className,
63        })
64      )}
65      {...props}
66    >
67      {children}
68 
69      <div
70        className="absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none"
71        aria-hidden="true"
72      />
73      <div
74        className="absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none"
75        aria-hidden="true"
76      />
77    </ShadcnHoverCardContent>
78  );
79}
80 
81export { HoverCard, HoverCardTrigger, HoverCardContent };