`components/membership/LoadingSkeleton.tsx`

47 lines
export default function LoadingSkeleton() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
      {/* Header Skeleton */}
      <div className="bg-black/30 backdrop-blur-sm border-b border-white/10">
        <div className="max-w-7xl mx-auto px-4 py-6">
          <div className="h-10 bg-white/10 rounded-lg w-3/4 mb-3 animate-pulse" />
          <div className="h-6 bg-white/5 rounded-lg w-full mb-4 animate-pulse" />
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {[1, 2, 3].map((i) => (
              <div key={i} className="h-6 bg-white/5 rounded-lg animate-pulse" />
            ))}
          </div>
        </div>
      </div>

      {/* Navigation Skeleton */}
      <div className="max-w-7xl mx-auto px-4 py-6">
        <div className="flex gap-2 mb-8 bg-black/20 p-2 rounded-xl backdrop-blur-sm">
          {[1, 2, 3, 4].map((i) => (
            <div key={i} className="flex-1 h-12 bg-white/10 rounded-lg animate-pulse" />
          ))}
        </div>

        {/* Content Skeleton */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {[1, 2, 3].map((i) => (
            <div
              key={i}
              className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20 animate-pulse"
            >
              <div className="h-6 bg-white/20 rounded w-3/4 mb-4" />
              <div className="space-y-3">
                <div className="h-4 bg-white/10 rounded w-full" />
                <div className="h-4 bg-white/10 rounded w-5/6" />
                <div className="h-4 bg-white/10 rounded w-4/6" />
              </div>
              <div className="mt-6 h-32 bg-white/5 rounded-lg" />
              <div className="mt-4 h-12 bg-gradient-to-r from-purple-500/20 to-pink-500/20 rounded-lg" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}