import React from "react";

export default function SideNavLoader() {
  return (
    <div className="flex flex-col gap-4 px-4">
      <div className="flex items-center gap-4">
        <div className="h-3 w-4 rounded-full bg-slate-50/10 animate-pulse"></div>
        <div className="h-4 w-full bg-slate-50/10 rounded animate-pulse"></div>
      </div>
      <div className="flex items-center gap-4">
        <div className="h-3 w-4 rounded-full bg-slate-50/10 animate-pulse"></div>
        <div className="h-4 w-full bg-slate-50/10 rounded animate-pulse"></div>
      </div>
      <div className="flex items-center gap-4">
        <div className="h-3 w-4 rounded-full bg-slate-50/10 animate-pulse"></div>
        <div className="h-4 w-full bg-slate-50/10 rounded animate-pulse"></div>
      </div>
      <div className="flex items-center gap-4">
        <div className="h-3 w-4 rounded-full bg-slate-50/10 animate-pulse"></div>
        <div className="h-4 w-full bg-slate-50/10 rounded animate-pulse"></div>
      </div>
      <div className="flex items-center gap-4">
        <div className="h-3 w-4 rounded-full bg-slate-50/10 animate-pulse"></div>
        <div className="h-4 w-full bg-slate-50/10 rounded animate-pulse"></div>
      </div>
      <div className="flex items-center gap-4">
        <div className="h-3 w-4 rounded-full bg-slate-50/10 animate-pulse"></div>
        <div className="h-4 w-full bg-slate-50/10 rounded animate-pulse"></div>
      </div>
      <div className="flex items-center gap-4">
        <div className="h-3 w-4 rounded-full bg-slate-50/10 animate-pulse"></div>
        <div className="h-4 w-full bg-slate-50/10 rounded animate-pulse"></div>
      </div>
      <div className="flex items-center gap-4">
        <div className="h-3 w-4 rounded-full bg-slate-50/10 animate-pulse"></div>
        <div className="h-4 w-full bg-slate-50/10 rounded animate-pulse"></div>
      </div>
      <div className="flex items-center gap-4">
        <div className="h-3 w-4 rounded-full bg-slate-50/10 animate-pulse"></div>
        <div className="h-4 w-full bg-slate-50/10 rounded animate-pulse"></div>
      </div>
      <div className="flex items-center gap-4">
        <div className="h-3 w-4 rounded-full bg-slate-50/10 animate-pulse"></div>
        <div className="h-4 w-full bg-slate-50/10 rounded animate-pulse"></div>
      </div>
    </div>
  );
}
