Preview

midday-ai · Dec 13, 2023 · 2cf8364 · 2cf8364
1 parent 95e99b8
commit 2cf8364
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 33 deletions.
diff --git a/apps/dashboard/src/components/attachments.tsx b/apps/dashboard/src/components/attachments.tsx
@@ -7,32 +7,44 @@ import { formatSize } from "@/utils/format";
 import { createClient } from "@midday/supabase/client";
 import { getCurrentUserTeamQuery } from "@midday/supabase/queries";
 import { Button } from "@midday/ui/button";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@midday/ui/hover-card";
 import { cn } from "@midday/ui/utils";
-import { AnimatePresence, motion } from "framer-motion";
 import { File, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useDropzone } from "react-dropzone";
 
 const Item = ({ file, onDelete, id }) => {
-  const animations = {
-    initial: { opacity: 0 },
-    animate: { opacity: 1 },
-    exit: {
-      opacity: 0,
-    },
-    transition: { opacity: { duration: 0.4 } },
-  };
-
   return (
-    <motion.li
-      {...animations}
-      layout
-      className="flex items-center justify-between"
-    >
+    <div className="flex items-center justify-between">
       <div className="flex space-x-4 items-center">
-        <div className="rounded-md border w-[40px] h-[40px] flex items-center justify-center">
-          <File size={18} />
-        </div>
+        <HoverCard openDelay={300}>
+          <HoverCardTrigger>
+            <div className="rounded-md border w-[40px] h-[40px] flex items-center justify-center overflow-hidden cursor-pointer">
+              {/* <File size={18} /> */}
+
+              <embed
+                src={`https://service.midday.ai/storage/v1/object/public/vault/${file.path}#toolbar=0`}
+                title={file.name}
+                className="w-[40px] h-[40px] pointer-none"
+              />
+            </div>
+          </HoverCardTrigger>
+          <HoverCardContent
+            className="w-70 h-[350px]"
+            side="left"
+            sideOffset={55}
+          >
+            <embed
+              src={`https://service.midday.ai/storage/v1/object/public/vault/${file.path}#toolbar=0`}
+              title={file.name}
+              className="w-80 h-full"
+            />
+          </HoverCardContent>
+        </HoverCard>
 
         <div className="flex flex-col space-y-0.5 w-80">
           <a
@@ -56,7 +68,7 @@ const Item = ({ file, onDelete, id }) => {
       >
         <X size={14} />
       </Button>
-    </motion.li>
+    </div>
   );
 };
 
@@ -138,18 +150,17 @@ export function Attachments({ id, data }) {
           </div>
         )}
       </div>
-      <AnimatePresence>
-        <ul className="mt-4 space-y-4">
-          {files.map((file) => (
-            <Item
-              key={file.name}
-              id={id}
-              file={file}
-              onDelete={() => handleOnDelete(file.id)}
-            />
-          ))}
-        </ul>
-      </AnimatePresence>
+
+      <ul className="mt-4 space-y-4">
+        {files.map((file) => (
+          <Item
+            key={file.name}
+            id={id}
+            file={file}
+            onDelete={() => handleOnDelete(file.id)}
+          />
+        ))}
+      </ul>
     </div>
   );
 }
diff --git a/apps/dashboard/src/components/donwload-desktop.tsx b/apps/dashboard/src/components/donwload-desktop.tsx
@@ -2,7 +2,6 @@
 
 import { Button } from "@midday/ui/button";
 import { cn } from "@midday/ui/utils";
-import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { OnboardingStep } from "./onboarding-step";
 
@@ -19,7 +18,7 @@ export function DownloadDesktop() {
         className={cn(
           "flex items-between opacity-30",
           active && "opacity-1",
-          done && "opacity-1",
+          done && "opacity-1"
         )}
       >
         <OnboardingStep active={active} done={done} />

diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -27,6 +27,7 @@
     "./alert": "./src/components/alert.tsx",
     "./alert-dialog": "./src/components/alert-dialog.tsx",
     "./avatar": "./src/components/avatar.tsx",
+    "./hover-card": "./src/components/hover-card.tsx",
     "./toast": "./src/components/toast.tsx",
     "./toaster": "./src/components/toaster.tsx",
     "./use-toast": "./src/components/use-toast.tsx",
@@ -67,6 +68,7 @@
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",

diff --git a/packages/ui/src/components/hover-card.tsx b/packages/ui/src/components/hover-card.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import * as React from "react";
+import { cn } from "../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 };