
* [WIP] checkpoint before pull & merge - Added teams to sidebar - Refactored team settings - Improved team list UI This code will be partly reverted next commit. * [WIP] - Moved team code back to components - Removed team link from sidebar - Built new team manager screen based on Event Type designs - Component-ized frequently reused code (SettingInputContainer, FlatIconButton) * [WIP] - Created LinkIconButton as standalone component - Added functionality to sidebar of team settings - Fixed type bug on public team page induced by my normalization of members array in team query - Removed teams-old which was kept as refrence - Cleaned up loose ends * [WIP] - added create team model - fixed profile missing label due to my removal of default label from component * [WIP] - Fixed TeamCreateModal trigger - removed TeamShell, it didn't make the cut - added getPlaceHolderAvatar - renamed TeamCreate to TeamCreateModal - removed deprecated UsernameInput and replaced uses with suggested TextField * fix save button * [WIP] - Fixed drop down actions on team list - Cleaned up state updates * [WIP] converting teams to tRPC * [WIP] Finished refactor to tRPC * [WIP] Finishing touches * [WIP] Team availability beginning * team availability mvp * - added validation to change role - modified layout of team availability - corrected types * fix ui issue on team availability screen * - added virtualization to team availability - added flexChildrenContainer boolean to Shell to allow for flex on children * availability style fix * removed hard coded team type as teams now use inferred type from tRPC * Removed unneeded vscode settings * Reverted prisma schema * Fixed migrations * Removes unused dayjs plugins * Reverts type regression * Type fix * Type fixes * Type fixes * Moves team availability code to ee Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
import { ArrowRightIcon } from "@heroicons/react/outline";
|
|
import { ArrowLeftIcon } from "@heroicons/react/solid";
|
|
import classnames from "classnames";
|
|
import Link from "next/link";
|
|
import { TeamPageProps } from "pages/team/[slug]";
|
|
import React from "react";
|
|
|
|
import { useLocale } from "@lib/hooks/useLocale";
|
|
|
|
import Avatar from "@components/ui/Avatar";
|
|
import Button from "@components/ui/Button";
|
|
import Text from "@components/ui/Text";
|
|
|
|
type TeamType = TeamPageProps["team"];
|
|
type MembersType = TeamType["members"];
|
|
type MemberType = MembersType[number];
|
|
|
|
const Team = ({ team }: TeamPageProps) => {
|
|
const { t } = useLocale();
|
|
|
|
const Member = ({ member }: { member: MemberType }) => {
|
|
const classes = classnames(
|
|
"group",
|
|
"relative",
|
|
"flex flex-col",
|
|
"space-y-4",
|
|
"p-4",
|
|
"bg-white dark:bg-neutral-900 dark:border-0 dark:bg-opacity-8",
|
|
"border border-neutral-200",
|
|
"hover:cursor-pointer",
|
|
"hover:border-brand dark:border-neutral-700 dark:hover:border-neutral-600",
|
|
"rounded-sm",
|
|
"hover:shadow-md"
|
|
);
|
|
|
|
return (
|
|
<Link key={member.id} href={`/${member.username}`}>
|
|
<div className={classes}>
|
|
<ArrowRightIcon
|
|
className={classnames(
|
|
"text-black dark:text-white",
|
|
"absolute top-4 right-4",
|
|
"h-4 w-4",
|
|
"transition-opacity",
|
|
"opacity-0 group-hover:opacity-100 group-hover:block"
|
|
)}
|
|
/>
|
|
|
|
<div>
|
|
<Avatar alt={member.name || ""} imageSrc={member.avatar} className="w-12 h-12" />
|
|
<section className="space-y-2">
|
|
<Text variant="title">{member.name}</Text>
|
|
<Text variant="subtitle" className="w-6/8">
|
|
{member.bio}
|
|
</Text>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
const Members = ({ members }: { members: MembersType }) => {
|
|
if (!members || members.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<section className="flex flex-wrap justify-center max-w-5xl min-w-full mx-auto lg:min-w-lg gap-x-12 gap-y-6">
|
|
{members.map((member) => {
|
|
return member.username !== null && <Member key={member.id} member={member} />;
|
|
})}
|
|
</section>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Members members={team.members} />
|
|
{team.eventTypes.length > 0 && (
|
|
<aside className="mt-8 text-center dark:text-white">
|
|
<Button color="secondary" href={`/team/${team.slug}`} shallow={true} StartIcon={ArrowLeftIcon}>
|
|
{t("go_back")}
|
|
</Button>
|
|
</aside>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Team;
|