8-bit Popover

1import type * as PopoverPrimitive from "@radix-ui/react-popover";
2import { type VariantProps, cva } from "class-variance-authority";
3 
4import { cn } from "@/lib/utils";
5 
6import {
7  Popover as ShadcnPopover,
8  PopoverAnchor as ShadcnPopoverAnchor,
9  PopoverContent as ShadcnPopoverContent,
10  PopoverTrigger as ShadcnPopoverTrigger,
11} from "@/components/ui/popover";
12 
13import "@/components/ui/8bit/styles/retro.css";
14 
15const Popover = ShadcnPopover;
16 
17const PopoverTrigger = ShadcnPopoverTrigger;
18 
19const PopoverAnchor = ShadcnPopoverAnchor;
20 
21export const popOverVariants = cva("", {
22  variants: {
23    font: {
24      normal: "",
25      retro: "retro",
26    },
27  },
28  defaultVariants: {
29    font: "retro",
30  },
31});
32 
33export interface BitPopoverProps
34  extends React.ComponentProps<typeof PopoverPrimitive.Content>,
35    VariantProps<typeof popOverVariants> {}
36 
37function PopoverContent({
38  children,
39  font,
40  className,
41  ...props
42}: BitPopoverProps) {
43  return (
44    <ShadcnPopoverContent
45      className={cn(
46        "relative bg-card border-y-6 border-foreground dark:border-ring rounded-none mt-1",
47        font !== "normal" && "retro",
48        className
49      )}
50      {...props}
51    >
52      {children}
53 
54      <div
55        className="absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none"
56        aria-hidden="true"
57      />
58    </ShadcnPopoverContent>
59  );
60}
61 
62export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };