Create Teams page matching site theme
cgen-0d85ca21950e4961b35e0fc2e33d6108
This commit is contained in:
Builder.io
parent
00d7310089
commit
2325a7a303
1 changed files with 129 additions and 0 deletions
129
client/pages/Teams.tsx
Normal file
129
client/pages/Teams.tsx
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { aethexCollabService } from "@/lib/aethex-collab-service";
|
||||
import LoadingScreen from "@/components/LoadingScreen";
|
||||
|
||||
export default function Teams() {
|
||||
const { user, profile, loading } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [teams, setTeams] = useState<any[]>([]);
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && !user) navigate("/login", { replace: true });
|
||||
}, [loading, user, navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
if (!user?.id) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const myTeams = await aethexCollabService.listMyTeams(user.id);
|
||||
setTeams(myTeams);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
load();
|
||||
}, [user?.id]);
|
||||
|
||||
const canCreate = useMemo(() => name.trim().length > 2 && !creating, [name, creating]);
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!user?.id) return;
|
||||
if (!canCreate) return;
|
||||
setCreating(true);
|
||||
try {
|
||||
const team = await aethexCollabService.createTeam(user.id, name.trim(), description.trim() || null, "private");
|
||||
setName("");
|
||||
setDescription("");
|
||||
setTeams((prev) => [{ team_id: team.id, teams: team }, ...prev]);
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading || isLoading) return <LoadingScreen message="Loading teams..." showProgress duration={800} />;
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(110,141,255,0.12),transparent_60%)] py-10">
|
||||
<div className="mx-auto w-full max-w-6xl px-4 lg:px-6 space-y-6">
|
||||
<section className="rounded-3xl border border-border/40 bg-background/80 p-6 shadow-2xl backdrop-blur">
|
||||
<h1 className="text-3xl font-semibold text-foreground">Teams</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">Create a team and collaborate with members across projects.</p>
|
||||
</section>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
|
||||
<div className="space-y-6">
|
||||
<Card className="rounded-3xl border-border/40 bg-background/70 shadow-xl backdrop-blur-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Your teams</CardTitle>
|
||||
<CardDescription>Teams you belong to</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{teams.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No teams yet. Create one to get started.</p>
|
||||
) : (
|
||||
teams.map((t) => {
|
||||
const team = (t as any).teams || t;
|
||||
return (
|
||||
<div key={team.id} className="flex items-center justify-between rounded-2xl border border-border/30 bg-background/60 p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="h-10 w-10">
|
||||
<AvatarImage src={undefined} />
|
||||
<AvatarFallback>{team.name?.[0]?.toUpperCase() || "T"}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<div className="font-medium text-foreground">{team.name}</div>
|
||||
<div className="text-xs text-muted-foreground">{team.visibility || "private"}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="border-border/50">Team</Badge>
|
||||
<Button variant="outline" size="sm" onClick={() => navigate(`/projects/new`)}>New project</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<aside className="space-y-6">
|
||||
<Card className="rounded-3xl border-border/40 bg-background/70 shadow-xl backdrop-blur-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Create a team</CardTitle>
|
||||
<CardDescription>Private by default; you can invite members later.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Input placeholder="Team name" value={name} onChange={(e) => setName(e.target.value)} />
|
||||
<Textarea placeholder="Short description (optional)" value={description} onChange={(e) => setDescription(e.target.value)} />
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={handleCreate} disabled={!canCreate} className="rounded-full bg-gradient-to-r from-aethex-500 to-neon-blue text-white">
|
||||
{creating ? "Creating..." : "Create team"}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue