lti-web-client/src/components/helper/skeleton/IconSkeleton.tsx

import { cn } from '@/lib/helper';
import { ReactNode } from 'react';

const IconSkeleton = ({
  children,
  className,
}: {
  children: ReactNode;
  className?: {
    outer?: string;
    inner?: string;
  };
}) => {
  return (
    <div
      className={cn(
        'w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[0.875rem] 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>
  );
};

export default IconSkeleton;