veza/apps/web/src/components/studio/projects/create-project-modal/CreateProjectModalSkeleton.tsx

/**
 * Skeleton for CreateProjectModal — layout primitive, no arbitrary values.
 */
export function CreateProjectModalSkeleton() {
  return (
    <div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl overflow-hidden animate-pulse">
      <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
        <div className="h-6 w-32 rounded bg-muted" />
        <div className="h-5 w-5 rounded bg-muted" />
      </div>
      <div className="p-6 space-y-6">
        <div className="space-y-2">
          <div className="h-4 w-24 rounded bg-muted" />
          <div className="h-11 w-full rounded-lg bg-muted" />
        </div>
        <div className="space-y-2">
          <div className="h-4 w-40 rounded bg-muted" />
          <div className="grid grid-cols-3 gap-4">
            <div className="h-14 rounded-lg bg-muted" />
            <div className="h-14 rounded-lg bg-muted" />
            <div className="h-14 rounded-lg bg-muted" />
          </div>
        </div>
        <div className="grid grid-cols-2 gap-4">
          <div className="h-11 rounded-lg bg-muted" />
          <div className="h-11 rounded-lg bg-muted" />
        </div>
        <div className="space-y-2">
          <div className="h-4 w-24 rounded bg-muted" />
          <div className="h-24 w-full rounded-lg bg-muted" />
        </div>
      </div>
      <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
        <div className="h-10 w-20 rounded-lg bg-muted" />
        <div className="h-10 w-28 rounded-lg bg-muted" />
      </div>
    </div>
  );
}