export const PagesLoader = () => (
  <div className="flex h-full flex-col space-y-5 overflow-hidden p-6">
    <div className="flex justify-between gap-4">
      <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
    </div>
    <div className="flex items-center gap-3">
      {[...Array(5)].map(() => (
        <span className="h-8 w-20 bg-custom-background-80 rounded-full" />
      ))}
    </div>
    <div className="divide-y divide-custom-border-200">
      {[...Array(5)].map(() => (
        <div className="h-12 w-full flex items-center justify-between px-3">
          <div className="flex items-center gap-1.5">
            <span className="h-5 w-5 bg-custom-background-80 rounded" />
            <span className="h-5 w-20 bg-custom-background-80 rounded" />
          </div>
          <div className="flex items-center gap-1.5">
            <span className="h-5 w-16 bg-custom-background-80 rounded" />
            <span className="h-5 w-5 bg-custom-background-80 rounded" />
            <span className="h-5 w-5 bg-custom-background-80 rounded" />
            <span className="h-5 w-5 bg-custom-background-80 rounded" />
          </div>
        </div>
      ))}
    </div>
  </div>
);