From 8a647801354b5f27bb1c7b3443332818ef467fe2 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Fri, 30 Jan 2026 11:20:47 +0700
Subject: [PATCH] fix(FE): adding margin on data state skeleton

---
 .../helper/skeleton/DataStateSkeleton.tsx     |  8 +++++-
 .../helper/skeleton/IconSkeleton.tsx          | 26 ++++++++++++++++---
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/helper/skeleton/DataStateSkeleton.tsx b/src/components/helper/skeleton/DataStateSkeleton.tsx
index cea68b82..cd5474e0 100644
--- a/src/components/helper/skeleton/DataStateSkeleton.tsx
+++ b/src/components/helper/skeleton/DataStateSkeleton.tsx
@@ -12,7 +12,13 @@ const DataStateSkeleton = ({
 }) => {
   return (
     <div className='flex flex-col items-center justify-center'>
-      <IconSkeleton>{icon}</IconSkeleton>
+      <IconSkeleton
+        className={{
+          outer: 'mb-2.25',
+        }}
+      >
+        {icon}
+      </IconSkeleton>
       <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
         {title}
       </h3>
diff --git a/src/components/helper/skeleton/IconSkeleton.tsx b/src/components/helper/skeleton/IconSkeleton.tsx
index 0100f14b..7fde0cd8 100644
--- a/src/components/helper/skeleton/IconSkeleton.tsx
+++ b/src/components/helper/skeleton/IconSkeleton.tsx
@@ -1,9 +1,29 @@
+import { cn } from '@/lib/helper';
 import { ReactNode } from 'react';
 
-const IconSkeleton = ({ children }: { children: ReactNode }) => {
+const IconSkeleton = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: {
+    outer?: string;
+    inner?: string;
+  };
+}) => {
   return (
-    <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
-      <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
+    <div
+      className={cn(
+        'w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center',
+        className?.outer
+      )}
+    >
+      <div
+        className={cn(
+          'w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]',
+          className?.inner
+        )}
+      >
         {children}
       </div>
     </div>