rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style for people page

Browse Source 
Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-02-09 19:16:54 -08:00
parent 133b5a5404
commit 08499d4942
1 changed files with 77 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
apps/console/src/pages/PeoplesPage.tsx
View File

@@ -5,6 +5,9 @@ import {
usePreloadedQuery,
useQueryLoader,
} from "react-relay";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { CircleUser, Globe, Shield } from "lucide-react";
import type { PeoplesPageQuery as PeoplesPageQueryType } from "./__generated__/PeoplesPageQuery.graphql";
const PeoplesPageQuery = graphql`
@@ -35,13 +38,85 @@ function PeoplesPageContent({
queryRef: PreloadedQuery<PeoplesPageQueryType>;
}) {
const data = usePreloadedQuery(PeoplesPageQuery, queryRef);
const peoples = data.node?.peoples?.edges?.map(edge => edge?.node) ?? [];
return (
<pre>{JSON.stringify(data, null, 2)}</pre>
<div className="p-6 space-y-6">
<div className="space-y-1">
<h2 className="text-2xl font-semibold tracking-tight">Employees</h2>
<p className="text-sm text-muted-foreground">
Keep track of your company's workforce and their progress towards completing tasks assigned to them.
</p>
</div>
<div className="space-y-2">
{peoples.map((person) => (
<div
key={person?.id}
className="flex items-center justify-between p-4 rounded-lg border bg-card text-card-foreground shadow-sm"
>
<div className="flex items-center gap-4">
<Avatar className="h-10 w-10">
<AvatarFallback>{person?.fullName?.[0]}</AvatarFallback>
</Avatar>
<div className="space-y-1">
<p className="text-sm font-medium leading-none">{person?.fullName}</p>
<p className="text-sm text-muted-foreground">{person?.primaryEmailAddress}</p>
</div>
</div>
<div className="flex items-center gap-4">
<Badge variant="secondary" className="font-medium">
Admin
</Badge>
<div className="flex gap-1">
<CircleUser className="h-4 w-4 text-muted-foreground" />
<Globe className="h-4 w-4 text-muted-foreground" />
<Shield className="h-4 w-4 text-muted-foreground" />
</div>
<Badge variant="outline" className="text-muted-foreground">
Not onboarded
</Badge>
</div>
</div>
))}
</div>
</div>
);
}
function PeoplesPageFallback() {
return <div>Loading...</div>;
return (
<div className="p-6 space-y-6">
<div className="space-y-1">
<div className="h-8 w-48 bg-muted animate-pulse rounded" />
<div className="h-4 w-96 bg-muted animate-pulse rounded" />
</div>
<div className="space-y-2">
{[1,2,3].map((i) => (
<div
key={i}
className="flex items-center justify-between p-4 rounded-lg border bg-card text-card-foreground shadow-sm"
>
<div className="flex items-center gap-4">
<div className="h-10 w-10 rounded-full bg-muted animate-pulse" />
<div className="space-y-1">
<div className="h-4 w-32 bg-muted animate-pulse rounded" />
<div className="h-3 w-48 bg-muted animate-pulse rounded" />
</div>
</div>
<div className="flex items-center gap-4">
<div className="h-6 w-16 bg-muted animate-pulse rounded-full" />
<div className="flex gap-1">
{[1,2,3].map((j) => (
<div key={j} className="h-4 w-4 bg-muted animate-pulse rounded" />
))}
</div>
<div className="h-6 w-24 bg-muted animate-pulse rounded-full" />
</div>
</div>
))}
</div>
</div>
);
}
export default function PeoplesPage() {