Skip to content

Commit

Permalink
fix formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
Duosi-Dai committed Aug 11, 2024
1 parent 0de2084 commit b691209
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 104 deletions.
92 changes: 46 additions & 46 deletions src/app/about/_components/OrganizationList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,55 +6,55 @@ import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
import { useState } from "react"

const OrganizationList = ({ group }: { group: Organization }) => {
const [showOTs, setShowOTs] = useState(false)
const [showOTs, setShowOTs] = useState(false)

const handleButtonClick = () => {
setShowOTs(prevState => !prevState)
}
const handleButtonClick = () => {
setShowOTs(prevState => !prevState)
}

const projectGroup = group.people.filter(
person =>
person.role.toLowerCase().includes("project group") ||
person.role.toLowerCase().includes("project manager")
)
const operationTeam = group.people.filter(person =>
person.role.toLowerCase().includes("operation team")
)
const projectGroup = group.people.filter(
person =>
person.role.toLowerCase().includes("project group") ||
person.role.toLowerCase().includes("project manager")
)
const operationTeam = group.people.filter(person =>
person.role.toLowerCase().includes("operation team")
)

return (
<div key={group.name} className="mt-16">
<h2 className="font-bebas-neue text-3xl">{group.name}</h2>
<div className="mt-5 flex flex-wrap items-start justify-center gap-6 md:justify-start">
{projectGroup.map(person => (
<PersonCard key={person.id} person={person} />
))}
{showOTs &&
operationTeam.map(person => (
<PersonCard key={person.id} person={person} />
))}
<div className="my-20 flex justify-center">
{group.name === "Project Manager" ? null : (
<Button
variant={"secondary"}
className="dark:bg-liqorice-700"
onClick={handleButtonClick}>
{showOTs ? (
<>
<ArrowLeftIcon className="mr-4 h-4 w-4" />
See Less Members
</>
) : (
<>
See More Members
<ArrowRightIcon className="ml-4 h-4 w-4" />
</>
)}
</Button>
)}
</div>
</div>
</div>
)
return (
<div key={group.name} className="mt-16">
<h2 className="font-bebas-neue text-3xl">{group.name}</h2>
<div className="mt-5 flex flex-wrap items-start justify-center gap-6 md:justify-start">
{projectGroup.map(person => (
<PersonCard key={person.id} person={person} />
))}
{showOTs &&
operationTeam.map(person => (
<PersonCard key={person.id} person={person} />
))}
<div className="my-20 flex justify-center">
{group.name === "Project Manager" ? null : (
<Button
variant={"secondary"}
className="dark:bg-liqorice-700"
onClick={handleButtonClick}>
{showOTs ? (
<>
<ArrowLeftIcon className="mr-4 h-4 w-4" />
See Less Members
</>
) : (
<>
See More Members
<ArrowRightIcon className="ml-4 h-4 w-4" />
</>
)}
</Button>
)}
</div>
</div>
</div>
)
}

export default OrganizationList
88 changes: 44 additions & 44 deletions src/app/about/_components/PersonCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,49 +5,49 @@ import Image from "next/image"
import Link from "next/link"

const PersonCard = ({ person }: { person: Person }) => {
return (
<>
<div key={person.id} className="w-52">
{person.picture == null || person.picture.includes("no-image") ? (
<div className="flex aspect-square w-52 flex-1 items-center justify-center">
<PersonIcon className="m-auto h-20 w-20 text-melon-700" />
</div>
) : (
<div className="overflow-hidden rounded-lg">
<Image
loading="lazy"
src={person.picture}
alt={person.name}
width={200}
height={200}
className="aspect-square w-full object-cover transition-all duration-200 hover:scale-105"
style={{
maxWidth: "100%",
height: "auto"
}}
/>
</div>
)}
<div className="mt-2">
<p className="text-melon-700">{person.name}</p>
<p className="mt-1 text-sm text-stone-400">
{person.role.split("–")[1]}
</p>
<div className="mt-2 flex gap-x-2">
{person.email != null && (
<Link href={`mailto:${person.email}`}>
<MailIcon className="mr-2 inline-block aspect-square w-5" />
</Link>
)}
{person.linkedin_url != null && (
<Link href={person.linkedin_url}>
<LinkedinIcon className="inline-block aspect-square w-5" />
</Link>
)}
</div>
</div>
</div>
</>
)
return (
<>
<div key={person.id} className="w-52">
{person.picture == null || person.picture.includes("no-image") ? (
<div className="flex aspect-square w-52 flex-1 items-center justify-center">
<PersonIcon className="m-auto h-20 w-20 text-melon-700" />
</div>
) : (
<div className="overflow-hidden rounded-lg">
<Image
loading="lazy"
src={person.picture}
alt={person.name}
width={200}
height={200}
className="aspect-square w-full object-cover transition-all duration-200 hover:scale-105"
style={{
maxWidth: "100%",
height: "auto"
}}
/>
</div>
)}
<div className="mt-2">
<p className="text-melon-700">{person.name}</p>
<p className="mt-1 text-sm text-stone-400">
{person.role.split("–")[1]}
</p>
<div className="mt-2 flex gap-x-2">
{person.email != null && (
<Link href={`mailto:${person.email}`}>
<MailIcon className="mr-2 inline-block aspect-square w-5" />
</Link>
)}
{person.linkedin_url != null && (
<Link href={person.linkedin_url}>
<LinkedinIcon className="inline-block aspect-square w-5" />
</Link>
)}
</div>
</div>
</div>
</>
)
}
export default PersonCard
27 changes: 13 additions & 14 deletions src/app/about/team/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,18 @@ export default async function TeamPage() {
revalidate: 3600 * 24 * 6 // 6 days (S3 caches the images for 7 days exactly, we want to revalidate before that, otherwise the images will not be loaded)
}
})

return (
<Page.Background withIndents className="justify-start">
<Page.Boundary>
<Page.Header>Meet the team</Page.Header>
<div className="">
{organization.map(group => (
<OrganizationList key={group.name} group={group} />
))}
</div>
</Page.Boundary>
<div className="h-20" />
</Page.Background>
)

return (
<Page.Background withIndents className="justify-start">
<Page.Boundary>
<Page.Header>Meet the team</Page.Header>
<div className="">
{organization.map(group => (
<OrganizationList key={group.name} group={group} />
))}
</div>
</Page.Boundary>
<div className="h-20" />
</Page.Background>
)
}

0 comments on commit b691209

Please sign in to comment.