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),
@@ -36,40 +35,36 @@ export default function InfiniteCanvas() {
 
   return (
     <>
-      <>
+      <CardSelector />
-        <>
+      <MiniMap />
-          <CardSelector />
-          <MiniMap />
 
-          <div
+      <div
-            className="h-screen w-full absolute top-0 left-0"
+        className="h-screen w-full absolute top-0 left-0"
-          >
+      >
-            <div
+        <div
-              className="absolute top-0 left-0"
+          className="absolute top-0 left-0"
-              ref={containerRef}
+          ref={containerRef}
-              style={{
+          style={{
-                width: `${canvasDimentsion.value.width}px`,
+            width: `${canvasDimentsion.value.width}px`,
-                height: `${canvasDimentsion.value.width}px`,
+            height: `${canvasDimentsion.value.width}px`,
-                backgroundSize: "30px 30px",
+            backgroundSize: "30px 30px",
-                backgroundImage: "radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px)",
+            backgroundImage: "radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px)",
-              }}>
+          }}>
-              {Object.keys(NotesSigal.default.notes.value).map((itemKey: string) => {
+          {Object.keys(NotesSigal.default.notes.value).map((itemKey: string) => {
-                const item = NotesSigal.default.notes.value[itemKey]
+            const item = NotesSigal.default.notes.value[itemKey]
-                return (
+            return (
-                  <NoteCard key={itemKey} data={item} />
+              <NoteCard key={itemKey} data={item} />
-                )
+            )
-              })}
+          })}
 
-              {Object.keys(ImagesSignal.default.images.value).map((itemKey: string) => {
+          {Object.keys(ImagesSignal.default.images.value).map((itemKey: string) => {
-                const item = ImagesSignal.default.images.value[itemKey]
+            const item = ImagesSignal.default.images.value[itemKey]
-                return (
+            return (
-                  <ImageCard key={itemKey} data={item} />
+              <ImageCard key={itemKey} data={item} />
-                )
+            )
-              })}
+          })}
-            </div>
+        </div>
-          </div>
+      </div>
-        </>
-      </>
     </>
   )
 }

vite.config.ts

@@ -1,17 +1,9 @@
-import { defineConfig } from "vite";
+import { defineConfig } from "vite"
-import kaioken from "vite-plugin-kaioken";
+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/**"],
     },
   },
-});
+})