forked from github/plane
651b252c23
* chore: svg icons added in plane/ui package * chore: swap priority and state icon with plane/ui icons * chore: replace core folder icons with lucide and plane ui icons * style: priority icon size * chore: replace icons with lucide and plane/ui icons * chore: replace cycle folder icons with lucide and plane/ui icons * chore: replace existing icons with lucide and plane/ui icons * chore: replace existing icons with lucide and plane/ui icons * chore: replace existing icons with lucide and plane/ui icons * chore: replace existing icons with lucide and plane/ui icons * chore: replace existing icons with lucide and plane/ui icons * fix: build error * fix: build error * fix: build error
68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import { useRouter } from "next/router";
|
|
import Link from "next/link";
|
|
|
|
// ui
|
|
import { CreateIcon, LayerStackIcon, Loader } from "@plane/ui";
|
|
import { UserCircle2 } from "lucide-react";
|
|
// types
|
|
import { IUserProfileData } from "types";
|
|
|
|
type Props = {
|
|
userProfile: IUserProfileData | undefined;
|
|
};
|
|
|
|
export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
|
|
const router = useRouter();
|
|
const { workspaceSlug, userId } = router.query;
|
|
|
|
const overviewCards = [
|
|
{
|
|
icon: CreateIcon,
|
|
route: "created",
|
|
title: "Issues created",
|
|
value: userProfile?.created_issues ?? "...",
|
|
},
|
|
{
|
|
icon: UserCircle2,
|
|
route: "assigned",
|
|
title: "Issues assigned",
|
|
value: userProfile?.assigned_issues ?? "...",
|
|
},
|
|
{
|
|
icon: LayerStackIcon,
|
|
route: "subscribed",
|
|
title: "Issues subscribed",
|
|
value: userProfile?.subscribed_issues ?? "...",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<h3 className="text-lg font-medium">Overview</h3>
|
|
{userProfile ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{overviewCards.map((card) => (
|
|
<Link key={card.route} href={`/${workspaceSlug}/profile/${userId}/${card.route}`}>
|
|
<a className="flex items-center gap-3 p-4 rounded border border-custom-border-100 whitespace-nowrap">
|
|
<div className="h-11 w-11 bg-custom-background-90 rounded grid place-items-center">
|
|
<card.icon className="h-5 w-5" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="text-custom-text-400 text-sm">{card.title}</p>
|
|
<p className="text-xl font-semibold">{card.value}</p>
|
|
</div>
|
|
</a>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Loader className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<Loader.Item height="80px" />
|
|
<Loader.Item height="80px" />
|
|
<Loader.Item height="80px" />
|
|
</Loader>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|