hover thumbnail

Author: MrPicklePinosaur

package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-separator": "^1.1.0",

pnpm-lock.yaml

@@ -8,6 +8,11 @@ import { Card, CardContent } from './ui/card'
 import { Button } from './ui/button'
 import { useCurrentCategory } from './CategoryProvider'
 import { convertFileSrc } from '@tauri-apps/api/core'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card"
 
 type DataPoint = Record<string, Value>
 
@@ -34,7 +39,14 @@ function renderCell(key: string, cell: Value) {
   if (key == '_imagePath' && isString(cell)) {
     const imgPath = convertFileSrc(cell);
     return (
-      <img src={imgPath}/>
+      <HoverCard>
+        <HoverCardTrigger>
+          <img src={imgPath}/>
+        </HoverCardTrigger>
+        <HoverCardContent className="w-1/2" side="right">
+          <img src={imgPath}/>
+        </HoverCardContent>
+      </HoverCard>
     )
   }
   switch (typeof cell) {

src/components/DynamicFeatureTable.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }