make images look better

src/components/ImageCard.tsx

@@ -21,7 +21,6 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
 
   function updateLocalStorage(time?: number) {
     debounce(() => {
-      console.log(itemKey, "updated storage")
       localStorage.setItem("images", JSON.stringify(images.images.value))
     }, time)
   }
@@ -61,23 +60,20 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
       className="select-none transition flex flex-col justify-stretch shadow-lg rounded border border-[#3c3c3c] absolute"
       style={{
         zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`,
-        width: `${item.dimensions.w}px`,
-        height: `${item.dimensions.h}px`,
         top: `${item.position.y}px`,
         left: `${item.position.x}px`,
+        maxWidth: '300px',
         backgroundColor: '#181818'
       }}
     >
 
-      <button className="text-md" onclick={(_e: Event) => {
+      <button className="flex justify-center items-center hover:bg-blue-500 w-5 h-5 text-white text-md absolute right-0 top-0" onclick={(_e: Event) => {
         ImagesSignal.default.removeImage(item.id)
         ImagesSignal.default.images.notify()
         updateLocalStorage()
       }}>x</button>
       <img
         src={item.contents}
-        width={'100%'}
-        height={'100%'}
         alt={item.title}
       />
     </div >

src/components/InfinateCanvas.tsx

@@ -10,7 +10,6 @@ import images from "../signals/images"
 export default function InfiniteCanvas() {
   const containerRef = useRef<HTMLDivElement>(null)
 
-
   useEffect(() => {
     window.scrollTo({
       left: (canvasDimentsion.value.width / 2) - (window.innerWidth / 2),
@@ -35,8 +34,6 @@ export default function InfiniteCanvas() {
   }, [])
 
   return (
-    <>
-      <>
     <>
       <CardSelector />
       <MiniMap />
@@ -69,7 +66,5 @@ export default function InfiniteCanvas() {
         </div>
       </div>
     </>
-      </>
-    </>
   )
 }

vite.config.ts

@@ -1,17 +1,9 @@
-import { defineConfig } from "vite";
-import kaioken from "vite-plugin-kaioken";
+import { defineConfig } from "vite"
+import kaioken from "vite-plugin-kaioken"
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [kaioken()],
-  esbuild: {
-    jsxInject: `import * as kaioken from "kaioken"`,
-    jsx: "transform",
-    jsxFactory: "kaioken.createElement",
-    jsxFragment: "kaioken.fragment",
-    loader: "tsx",
-    include: ["**/*.tsx", "**/*.ts", "**/*.jsx", "**/*.js"],
-  },
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   //
   // 1. prevent vite from obscuring rust errors
@@ -25,4 +17,4 @@ export default defineConfig({
       ignored: ["**/src-tauri/**"],
     },
   },
-});
+})