From ac8b2c04d83dfac5e45a6cb9468edc4b2674ec76 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Sat, 12 Jul 2025 11:41:32 +0300
Subject: [PATCH] format

---
 .../Backgrounds/GridMotion/GridMotion.vue     | 40 ++++++-------------
 src/demo/Backgrounds/GridMotionDemo.vue       |  1 -
 2 files changed, 12 insertions(+), 29 deletions(-)

diff --git a/src/content/Backgrounds/GridMotion/GridMotion.vue b/src/content/Backgrounds/GridMotion/GridMotion.vue
index ee33f4b..5ae8f86 100644
--- a/src/content/Backgrounds/GridMotion/GridMotion.vue
+++ b/src/content/Backgrounds/GridMotion/GridMotion.vue
@@ -68,40 +68,24 @@ onMounted(() => {
 
 <template>
   <div ref="gridRef" class="w-full h-full overflow-hidden">
-    <section
-      class="relative flex justify-center items-center w-full h-screen overflow-hidden"
-      :style="{
-        background: `radial-gradient(circle, ${gradientColor} 0%, transparent 100%)`,
-      }"
-    >
+    <section class="relative flex justify-center items-center w-full h-screen overflow-hidden" :style="{
+      background: `radial-gradient(circle, ${gradientColor} 0%, transparent 100%)`,
+    }">
       <div class="z-[4] absolute inset-0 bg-[length:250px] pointer-events-none"></div>
 
       <div
-        class="z-[2] relative flex-none gap-4 grid grid-cols-1 grid-rows-4 w-[150vw] h-[150vh] rotate-[-15deg] origin-center"
-      >
-        <div
-          v-for="rowIndex in 4"
-          :key="rowIndex"
-          class="gap-4 grid grid-cols-7"
-          :style="{ willChange: 'transform, filter' }"
-          ref="rowRefs"
-        >
+        class="z-[2] relative flex-none gap-4 grid grid-cols-1 grid-rows-4 w-[150vw] h-[150vh] rotate-[-15deg] origin-center">
+        <div v-for="rowIndex in 4" :key="rowIndex" class="gap-4 grid grid-cols-7"
+          :style="{ willChange: 'transform, filter' }" ref="rowRefs">
           <div v-for="itemIndex in 7" :key="itemIndex" class="relative">
             <div
-              class="relative flex justify-center items-center bg-[#111] rounded-[10px] w-full h-full overflow-hidden text-[1.5rem] text-white"
-            >
-              <div
-                v-if="isImage(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
-                class="top-0 left-0 absolute bg-cover bg-center w-full h-full"
-                :style="{
+              class="relative flex justify-center items-center bg-[#111] rounded-[10px] w-full h-full overflow-hidden text-[1.5rem] text-white">
+              <div v-if="isImage(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
+                class="top-0 left-0 absolute bg-cover bg-center w-full h-full" :style="{
                   backgroundImage: `url(${combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]})`,
-                }"
-              ></div>
-              <div
-                v-else-if="isTag(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])"
-                class="z-[2] p-4 text-center"
-                v-html="combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]"
-              ></div>
+                }"></div>
+              <div v-else-if="isTag(combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)])" class="z-[2] p-4 text-center"
+                v-html="combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)]"></div>
               <div v-else class="z-[1] p-4 text-center">
                 {{ combinedItems[(rowIndex - 1) * 7 + (itemIndex - 1)] }}
               </div>
diff --git a/src/demo/Backgrounds/GridMotionDemo.vue b/src/demo/Backgrounds/GridMotionDemo.vue
index 5d8654e..5dd0dd6 100644
--- a/src/demo/Backgrounds/GridMotionDemo.vue
+++ b/src/demo/Backgrounds/GridMotionDemo.vue
@@ -80,6 +80,5 @@ const items = [
   `<div key='item-1'>Custom Content</div>`,
   "https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
   "Item 14",
-  // Add more items as needed
 ];
 </script>