From bd902d67b413e3cae8d5cea81fc51297a71c82c4 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Thu, 10 Oct 2024 13:02:35 +0900
Subject: [PATCH] Try fixing build

---
 src/components/ui/link-preview.tsx | 100 +++++++++++++----------------
 1 file changed, 43 insertions(+), 57 deletions(-)

diff --git a/src/components/ui/link-preview.tsx b/src/components/ui/link-preview.tsx
index e611e2c..bf4fccc 100644
--- a/src/components/ui/link-preview.tsx
+++ b/src/components/ui/link-preview.tsx
@@ -1,28 +1,20 @@
-"use client";
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import {
-  AnimatePresence,
-  motion,
-  useMotionValue,
-  useSpring,
-} from "framer-motion";
-import Image from "next/image";
-import Link from "next/link";
-import { encode } from "qss";
-import React from "react";
-import { cn } from "~/lib/utils";
+'use client'
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+import { AnimatePresence, motion, useMotionValue, useSpring } from 'framer-motion'
+import Image from 'next/image'
+import Link from 'next/link'
+import { encode } from 'qss'
+import React from 'react'
+import { cn } from '~/lib/utils'
 
 type LinkPreviewProps = {
-  children: React.ReactNode;
-  url: string;
-  className?: string;
-  width?: number;
-  height?: number;
-  quality?: number;
-} & (
-  | { isStatic: true; imageSrc: string }
-  | { isStatic?: false; imageSrc?: never }
-);
+  children: React.ReactNode
+  url: string
+  className?: string
+  width?: number
+  height?: number
+  quality?: number
+} & ({ isStatic: true; imageSrc: string } | { isStatic?: false; imageSrc?: never })
 
 export const LinkPreview = ({
   children,
@@ -32,43 +24,44 @@ export const LinkPreview = ({
   height = 125,
   quality = 50,
   isStatic = false,
-  imageSrc = "",
+  imageSrc = '',
 }: LinkPreviewProps) => {
-  let src;
+  let src
   if (!isStatic) {
     const params = encode({
       url,
       screenshot: true,
       meta: false,
-      embed: "screenshot.url",
-      colorScheme: "dark",
-      "viewport.isMobile": true,
-      "viewport.deviceScaleFactor": 1,
-      "viewport.width": width * 3,
-      "viewport.height": height * 3,
-    });
-    src = `https://api.microlink.io/?${params}`;
+      embed: 'screenshot.url',
+      colorScheme: 'dark',
+      'viewport.isMobile': true,
+      'viewport.deviceScaleFactor': 1,
+      'viewport.width': width * 3,
+      'viewport.height': height * 3,
+    })
+    src = `https://api.microlink.io/?${params}`
   } else {
-    src = imageSrc;
+    src = imageSrc
   }
 
-  const [isOpen, setOpen] = React.useState(false);
+  const [isOpen, setOpen] = React.useState(false)
 
-  const [isMounted, setIsMounted] = React.useState(false);
+  const [isMounted, setIsMounted] = React.useState(false)
 
   React.useEffect(() => {
-    setIsMounted(true);
-  }, []);
+    setIsMounted(true)
+  }, [])
 
-  const springConfig = { stiffness: 100, damping: 15 };
-  const x = useMotionValue(0);
+  const springConfig = { stiffness: 100, damping: 15 }
+  const x = useMotionValue(0)
 
-  const translateX = useSpring(x, springConfig);
+  const translateX = useSpring(x, springConfig)
 
-  const handleMouseMove = (event: any) => {
-    const targetRect = event.target.getBoundingClientRect();
+  const handleMouseMove = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    const target = event.currentTarget;
+    const targetRect = target.getBoundingClientRect();
     const eventOffsetX = event.clientX - targetRect.left;
-    const offsetFromCenter = (eventOffsetX - targetRect.width / 2) / 2; // Reduce the effect to make it subtle
+    const offsetFromCenter = (eventOffsetX - targetRect.width / 2) / 2;
     x.set(offsetFromCenter);
   };
 
@@ -76,14 +69,7 @@ export const LinkPreview = ({
     <>
       {isMounted ? (
         <div className="hidden">
-          <Image
-            src={src}
-            width={width}
-            height={height}
-            quality={quality}
-            priority={true}
-            alt="hidden image"
-          />
+          <Image src={src} width={width} height={height} quality={quality} priority={true} alt="hidden image" />
         </div>
       ) : null}
 
@@ -91,12 +77,12 @@ export const LinkPreview = ({
         openDelay={50}
         closeDelay={100}
         onOpenChange={(open) => {
-          setOpen(open);
+          setOpen(open)
         }}
       >
         <HoverCardPrimitive.Trigger
           onMouseMove={handleMouseMove}
-          className={cn("text-black dark:text-white", className)}
+          className={cn('text-black dark:text-white', className)}
           href={url}
         >
           {children}
@@ -118,7 +104,7 @@ export const LinkPreview = ({
                   y: 0,
                   scale: 1,
                   transition: {
-                    type: "spring",
+                    type: 'spring',
                     stiffness: 260,
                     damping: 20,
                   },
@@ -150,5 +136,5 @@ export const LinkPreview = ({
         </HoverCardPrimitive.Content>
       </HoverCardPrimitive.Root>
     </>
-  );
-};
+  )
+}