veza/apps/web/src/components/studio/projects/project-detail-view/ProjectDetailViewSidebar.tsx

/**
 * ProjectDetailView — sidebar (collaborators + versions).
 */
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Users, History } from 'lucide-react';

export function ProjectDetailViewSidebar() {
  return (
    <div className="space-y-6">
      <Card variant="glass">
        <h3 className="font-bold text-foreground mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
          <Users className="w-4 h-4 text-warning" /> Collaborators
        </h3>
        <div className="flex -space-x-4 mb-4">
          <div className="w-10 h-10 rounded-full border-2 border-card bg-muted" />
          <div className="w-10 h-10 rounded-full border-2 border-card bg-muted" />
          <div className="w-10 h-10 rounded-full border-2 border-card bg-card flex items-center justify-center text-xs text-muted-foreground font-bold">
            +2
          </div>
        </div>
        <Button
          variant="ghost"
          size="sm"
          className="w-full text-xs border border-border"
        >
          Manage Team
        </Button>
      </Card>

      <Card variant="default">
        <h3 className="font-bold text-foreground mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
          <History className="w-4 h-4 text-primary" /> Versions
        </h3>
        <div className="space-y-2">
          <div className="flex justify-between items-center text-sm p-2 bg-muted/50 rounded-xl">
            <span className="text-foreground">v1.4 (Current)</span>
            <span className="text-xs text-muted-foreground">2h ago</span>
          </div>
          <div className="flex justify-between items-center text-sm p-2 hover:bg-muted/50 rounded-xl cursor-pointer text-muted-foreground transition-colors duration-[var(--sumi-duration-normal)]">
            <span>v1.3</span>
            <span className="text-xs text-muted-foreground">1d ago</span>
          </div>
          <div className="flex justify-between items-center text-sm p-2 hover:bg-muted/50 rounded-xl cursor-pointer text-muted-foreground transition-colors duration-[var(--sumi-duration-normal)]">
            <span>v1.2</span>
            <span className="text-xs text-muted-foreground">3d ago</span>
          </div>
        </div>
      </Card>
    </div>
  );
}