UX improvement to public facing team pages
- Added default member avatars - Fixed member item spacing - Added team description (#1305)
This commit is contained in:
parent
25372b3c9e
commit
4ce879e5dc
3 changed files with 23 additions and 8 deletions
|
@ -5,6 +5,7 @@ import Link from "next/link";
|
||||||
import { TeamPageProps } from "pages/team/[slug]";
|
import { TeamPageProps } from "pages/team/[slug]";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
|
import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
|
||||||
import { useLocale } from "@lib/hooks/useLocale";
|
import { useLocale } from "@lib/hooks/useLocale";
|
||||||
|
|
||||||
import Avatar from "@components/ui/Avatar";
|
import Avatar from "@components/ui/Avatar";
|
||||||
|
@ -25,6 +26,7 @@ const Team = ({ team }: TeamPageProps) => {
|
||||||
"flex flex-col",
|
"flex flex-col",
|
||||||
"space-y-4",
|
"space-y-4",
|
||||||
"p-4",
|
"p-4",
|
||||||
|
"min-w-full sm:min-w-64 sm:max-w-64",
|
||||||
"bg-white dark:bg-neutral-900 dark:border-0 dark:bg-opacity-8",
|
"bg-white dark:bg-neutral-900 dark:border-0 dark:bg-opacity-8",
|
||||||
"border border-neutral-200",
|
"border border-neutral-200",
|
||||||
"hover:cursor-pointer",
|
"hover:cursor-pointer",
|
||||||
|
@ -47,11 +49,15 @@ const Team = ({ team }: TeamPageProps) => {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<Avatar alt={member.name || ""} imageSrc={member.avatar} className="w-12 h-12" />
|
<Avatar
|
||||||
<section className="space-y-2">
|
alt={member.name || ""}
|
||||||
|
imageSrc={getPlaceholderAvatar(member.avatar, member.username)}
|
||||||
|
className="w-12 h-12 -mt-4"
|
||||||
|
/>
|
||||||
|
<section className="w-full mt-2 space-y-1">
|
||||||
<Text variant="title">{member.name}</Text>
|
<Text variant="title">{member.name}</Text>
|
||||||
<Text variant="subtitle" className="w-6/8">
|
<Text variant="subtitle" className="">
|
||||||
{member.bio}
|
{member.bio || t("user_from_team", { user: member.name, team: team.name })}
|
||||||
</Text>
|
</Text>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
@ -66,7 +72,7 @@ const Team = ({ team }: TeamPageProps) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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">
|
<section className="flex flex-wrap justify-center max-w-5xl min-w-full mx-auto lg:min-w-lg gap-x-6 gap-y-6">
|
||||||
{members.map((member) => {
|
{members.map((member) => {
|
||||||
return member.username !== null && <Member key={member.id} member={member} />;
|
return member.username !== null && <Member key={member.id} member={member} />;
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -3,6 +3,7 @@ import { GetServerSidePropsContext } from "next";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
|
import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
|
||||||
import { useLocale } from "@lib/hooks/useLocale";
|
import { useLocale } from "@lib/hooks/useLocale";
|
||||||
import useTheme from "@lib/hooks/useTheme";
|
import useTheme from "@lib/hooks/useTheme";
|
||||||
import { useToggleQuery } from "@lib/hooks/useToggleQuery";
|
import { useToggleQuery } from "@lib/hooks/useToggleQuery";
|
||||||
|
@ -63,9 +64,16 @@ function TeamPage({ team }: TeamPageProps) {
|
||||||
<div>
|
<div>
|
||||||
<HeadSeo title={teamName} description={teamName} />
|
<HeadSeo title={teamName} description={teamName} />
|
||||||
<div className="px-4 pt-24 pb-12">
|
<div className="px-4 pt-24 pb-12">
|
||||||
<div className="mb-8 text-center">
|
<div className="mx-auto mb-8 text-center max-w-96">
|
||||||
<Avatar alt={teamName} imageSrc={team.logo} className="w-20 h-20 mx-auto mb-4 rounded-full" />
|
<Avatar
|
||||||
<Text variant="headline">{teamName}</Text>
|
alt={teamName}
|
||||||
|
imageSrc={getPlaceholderAvatar(team.logo, team.name)}
|
||||||
|
className="w-20 h-20 mx-auto mb-4 rounded-full"
|
||||||
|
/>
|
||||||
|
<Text variant="largetitle">{teamName}</Text>
|
||||||
|
<Text variant="subtitle" className="mt-2">
|
||||||
|
{team.bio}
|
||||||
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
{(showMembers.isOn || !team.eventTypes.length) && <Team team={team} />}
|
{(showMembers.isOn || !team.eventTypes.length) && <Team team={team} />}
|
||||||
{!showMembers.isOn && team.eventTypes.length > 0 && (
|
{!showMembers.isOn && team.eventTypes.length > 0 && (
|
||||||
|
|
|
@ -427,6 +427,7 @@
|
||||||
"leave_team": "Leave team",
|
"leave_team": "Leave team",
|
||||||
"confirm_leave_team": "Yes, leave team",
|
"confirm_leave_team": "Yes, leave team",
|
||||||
"leave_team_confirmation_message": "Are you sure you want to leave this team? You will no longer be able to book using it.",
|
"leave_team_confirmation_message": "Are you sure you want to leave this team? You will no longer be able to book using it.",
|
||||||
|
"user_from_team": "{{user}} from {{team}}",
|
||||||
"preview": "Preview",
|
"preview": "Preview",
|
||||||
"link_copied": "Link copied!",
|
"link_copied": "Link copied!",
|
||||||
"title": "Title",
|
"title": "Title",
|
||||||
|
|
Loading…
Reference in a new issue