Feat: Change deck management UI

app/components/ui/mtg-card-text-hover.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+import type { carte } from '@prisma/client'
+import { Spinner } from "./spinner"
+
+interface carteWithProps {
+  carte:      carte
+  className?: string
+}
+
+const MTGCardTextHover = ({ carte, className }: carteWithProps) => {
+  const [loaded, setLoaded] = React.useState(false)
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col group cursor-pointer",
+        className
+      )}
+    >
+      <span className="w-fit border-transparent border-dotted border-b-stone-500 border-b-2">{carte.name}</span>
+      <div className="MTGCardTooltip absolute hidden group-hover:block group-active:block">
+        {!loaded && 
+          <div className="mt-8 flex flex-col items-center justify-center h-96 w-64 bg-stone-500 rounded-md">
+            <Spinner />
+          </div>
+        }
+        <img src={carte.normal_image} className={ loaded ? "rounded-md mt-8 h-96" : "absolute opacity-0 h-96" } onLoad={() => {setLoaded(true)}} loading="lazy" />
+      </div>
+    </div>
+  )}
+MTGCardTextHover.displayName = "MTGCardTextHover"
+
+export { MTGCardTextHover }