blog card

src/components/GridWrapper.tsx

@@ -5,8 +5,8 @@ type GridWrapperProps = {
     children: React.ReactNode;
     desktop: number; // تعداد ستون‌ها در دسکتاپ
     mobile: number; // تعداد ستون‌ها در موبایل
-    gapDesktop?: number; // فاصله بین آیتم‌ها در دسکتاپ (بر اساس scale پیش‌فرض Tailwind)
-    gapMobile?: number; // فاصله بین آیتم‌ها در موبایل
+    gapDesktop?: number; // فاصله بین آیتم‌ها در دسکتاپ. اگر مقدار > 12 باشد به عنوان px تفسیر می‌شود (مثلاً 24 => 24px)
+    gapMobile?: number; // فاصله بین آیتم‌ها در موبایل. اگر مقدار > 12 باشد به عنوان px تفسیر می‌شود
     className?: string;
 };
 
@@ -56,7 +56,7 @@ const LG_GRID_COLS_CLASS: Record<number, string> = {
     12: "lg:grid-cols-12",
 };
 
-// Gap mapping (scale رایج Tailwind)
+// نگاشت Gap بر اساس scale رایج Tailwind: gap-N که هر N معادل 4px است (N * 4px)
 const GAP_CLASS: Record<number, string> = {
     0: "gap-0", 1: "gap-1", 2: "gap-2", 3: "gap-3", 4: "gap-4", 5: "gap-5",
     6: "gap-6", 7: "gap-7", 8: "gap-8", 9: "gap-9", 10: "gap-10", 11: "gap-11",
@@ -92,13 +92,16 @@ function getMdGridColsClass(count: number): string {
 
 function getGapClass(value?: number): string | undefined {
     if (value === undefined) return undefined;
-    const safe = clampToRange(value, 0, 12);
+    // اگر کاربر مقدار را به صورت px فرستاده باشد (بزرگ‌تر از 12)، آن را به scale تبدیل می‌کنیم: N = round(px/4)
+    const interpretedAsScale = value > 12 ? Math.round(value / 4) : value;
+    const safe = clampToRange(interpretedAsScale, 0, 24);
     return GAP_CLASS[safe];
 }
 
 function getLgGapClass(value?: number): string | undefined {
     if (value === undefined) return undefined;
-    const safe = clampToRange(value, 0, 12);
+    const interpretedAsScale = value > 12 ? Math.round(value / 4) : value;
+    const safe = clampToRange(interpretedAsScale, 0, 24);
     return LG_GAP_CLASS[safe];
 }