mdx-components.tsx

// import { BlueskyPost } from '@lib/bluesky-post'
import {
  BlueskyPost,
  type ImageProps,
  config,
  updateConfig,
} from '@hamstack/bluesky-embed-rsc'
import { Tweet } from '@lib/Tweet'
import {
  Abbr,
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
  Alert,
  AlertDescription,
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPortal,
  AlertDialogTitle,
  AlertDialogTrigger,
  AlertTitle,
  AspectRatio,
  Avatar,
  AvatarFallback,
  AvatarImage,
  Badge,
  BaseLink,
  Box,
  Button,
  Calendar,
  Callout,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Checkbox,
  Code,
  CodeBlock,
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
  Container,
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuPortal,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
  Figure,
  Footnote,
  FootnoteRef,
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  GitHubMention,
  Heading,
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
  Image,
  Input,
  Label,
  Link,
  List,
  ListItem,
  Mentions,
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarLabel,
  MenubarMenu,
  MenubarPortal,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
  Popover,
  PopoverContent,
  PopoverTrigger,
  Portal,
  Progress,
  RadioGroup,
  RadioGroupItem,
  ScrollArea,
  ScrollBar,
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
  Separator,
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
  Skeleton,
  Slider,
  Spacer,
  Stack,
  Switch,
  TLDR,
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
  Tapable,
  Text,
  Textarea,
  ThemeProvider,
  ThemeToggle,
  Time,
  Toast,
  ToastAction,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
  Toaster,
  Toggle,
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
  TwitterMention,
  a,
  blockquote,
  cn,
  code,
  del,
  em,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  img,
  li,
  navigationMenuTriggerStyle,
  ol,
  p,
  pre,
  strong,
  ul,
  useFormField,
  usePortal,
  useTapable,
} from '@recipes/mdx-components'
import type { MDXComponents } from 'mdx/types'

let fillClasses =
  'absolute h-full w-full left-0 top-0 right-0 bottom-0 color-transparent'

function LocalImage({ fill, ...props }: ImageProps) {
  // biome-ignore lint/a11y/useAltText: <explanation>
  return (
    <img
      {...props}
      className={cn(fill && fillClasses, props.className)}
    />
  )
}

updateConfig({
  ...config,
  components: {
    Image: LocalImage,
  },
  rootClassName: 'my-2 mx-auto border-0',
})

export function useMDXComponents(): MDXComponents {
  return {
    Callout,
    Toast,
    ToastAction,
    ToastClose,
    ToastDescription,
    TwitterMention,
    ToastProvider,
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
    Toaster,
    Toggle,
    ToastTitle,
    ToastViewport,
    Mentions,
    a,
    Tapable,
    ThemeProvider,
    // @ts-ignore
    useTapable,
    TLDR,
    ThemeToggle,
    Link,
    Table,
    TableBody,
    TableCaption,
    Tabs,
    Textarea,
    TabsContent,
    TabsList,
    TabsTrigger,
    TableCell,
    TableFooter,
    TableHead,
    TableHeader,
    TableRow,
    Stack,
    ul,
    ol,
    li,
    del,
    Skeleton,
    Sheet,
    Switch,
    SheetClose,
    SheetContent,
    SheetDescription,
    SheetFooter,
    SheetHeader,
    Slider,
    SheetTitle,
    SheetTrigger,
    em,
    strong,
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    blockquote,
    pre,
    Separator,
    code,
    img,
    Abbr,
    Time,
    Spacer,
    Tweet,
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
    Alert,
    AlertDescription,
    AlertTitle,
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogPortal,
    AlertDialogTitle,
    AlertDialogTrigger,
    AspectRatio,
    Avatar,
    AvatarFallback,
    ScrollArea,
    ScrollBar,
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectLabel,
    SelectSeparator,
    SelectTrigger,
    SelectValue,
    AvatarImage,
    Badge,
    Box,
    Button,
    Calendar,
    Card,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
    Checkbox,
    cn,
    Code,
    CodeBlock,
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
    Command,
    CommandDialog,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
    CommandSeparator,
    CommandShortcut,
    Container,
    ContextMenu,
    ContextMenuCheckboxItem,
    ContextMenuContent,
    ContextMenuGroup,
    ContextMenuItem,
    ContextMenuLabel,
    ContextMenuPortal,
    ContextMenuRadioGroup,
    ContextMenuRadioItem,
    ContextMenuSeparator,
    ContextMenuShortcut,
    ContextMenuSub,
    ContextMenuSubContent,
    ContextMenuSubTrigger,
    ContextMenuTrigger,
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuGroup,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuPortal,
    DropdownMenuRadioGroup,
    DropdownMenuRadioItem,
    DropdownMenuSeparator,
    DropdownMenuShortcut,
    DropdownMenuSub,
    DropdownMenuSubContent,
    DropdownMenuSubTrigger,
    DropdownMenuTrigger,
    Figure,
    FootnoteRef,
    Footnote,
    Form,
    FormControl,
    FormDescription,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
    useFormField,
    GitHubMention,
    Heading,
    HoverCard,
    HoverCardContent,
    HoverCardTrigger,
    Image,
    Progress,
    RadioGroup,
    RadioGroupItem,
    Input,
    Label,
    BaseLink,
    List,
    ListItem,
    Menubar,
    MenubarCheckboxItem,
    MenubarContent,
    MenubarGroup,
    MenubarItem,
    MenubarLabel,
    MenubarMenu,
    MenubarPortal,
    MenubarRadioGroup,
    MenubarRadioItem,
    MenubarSeparator,
    MenubarShortcut,
    MenubarSub,
    MenubarSubContent,
    MenubarSubTrigger,
    MenubarTrigger,
    NavigationMenu,
    NavigationMenuContent,
    NavigationMenuIndicator,
    NavigationMenuItem,
    NavigationMenuLink,
    NavigationMenuList,
    NavigationMenuTrigger,
    navigationMenuTriggerStyle,
    NavigationMenuViewport,
    Popover,
    PopoverContent,
    PopoverTrigger,
    Portal,
    usePortal,
    Text,
    BlueskyPost,
  }
}