This is an automated email from the ASF dual-hosted git repository. leonardcs pushed a commit to branch feature/members-list in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
commit a93ec759c9276d93ccd6497f33be0d8a75e71391 Author: Leonard <[email protected]> AuthorDate: Wed Jul 12 17:19:02 2023 +0200 Add component --- src/components/tables/MembersTable/index.tsx | 76 ++++++++++++++++++++++ .../tables/MembersTable/style.module.css | 43 ++++++++++++ src/styles/globals.css | 5 ++ 3 files changed, 124 insertions(+) diff --git a/src/components/tables/MembersTable/index.tsx b/src/components/tables/MembersTable/index.tsx new file mode 100644 index 0000000..c1eb6d4 --- /dev/null +++ b/src/components/tables/MembersTable/index.tsx @@ -0,0 +1,76 @@ +import Link from 'next/link'; +import Image from 'next/image'; +import cn from 'clsx'; +import styles from './style.module.css'; + +interface Member { + name?: string; + apacheUsername?: string; + githubUsername?: string; + role: string; +} + +interface MembersTableProps { + members: Member[]; +} + +export const MembersTable: React.FC<MembersTableProps> = ({ members }) => { + return ( + <div + className={cn([ + styles.container, + 'nx-border', + 'dark:nx-border-neutral-800', + 'contrast-more:nx-border-neutral-400', + 'dark:contrast-more:nx-border-neutral-400' + ])} + > + <table className={styles.table}> + <thead className="nx-bg-black/[.05] dark:nx-bg-gray-50/10"> + <tr> + <th>GitHub</th> + <th>Name</th> + <th>Role</th> + </tr> + </thead> + <tbody> + {members.map((member, i) => ( + <tr key={i}> + <td className={styles['image-td']}> + <Link + className={cn([ + styles['image-link'], + member.githubUsername === null ? 'disabled' : '' + ])} + href={`https://github.com/${member.githubUsername || ''}`} + > + <div + className={cn([ + styles['image-container'], + 'nx-bg-black/[.05]', + 'dark:nx-bg-gray-50/10' + ])} + > + <Image + src={`https://github.com/${ + member.githubUsername || '' + }.png`} + alt={member.githubUsername} + fill + style={{ objectPosition: 'center' }} + onError={e => { + e.currentTarget.style.display = 'none'; + }} + /> + </div> + </Link> + </td> + <td>{member.name}</td> + <td>{member.role}</td> + </tr> + ))} + </tbody> + </table> + </div> + ); +}; diff --git a/src/components/tables/MembersTable/style.module.css b/src/components/tables/MembersTable/style.module.css new file mode 100644 index 0000000..6359600 --- /dev/null +++ b/src/components/tables/MembersTable/style.module.css @@ -0,0 +1,43 @@ +.container { + margin: 1rem 0; + border-radius: 4px; + overflow: hidden; +} + +.table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; +} + +.table th, +.table td { + text-align: left; + padding: 0.5rem 0.75rem; + vertical-align: middle; +} + +:global(.light) .table tr:not(:last-child) { + border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* nx-bg-black/[.05] */ +} + +:global(.dark) .table tr:not(:last-child) { + border-bottom: 1px solid rgba(249, 250, 251, 0.1); /* dark:nx-bg-gray-50/10 */ +} + +.image-td { + display: flex; + align-items: center; +} + +.image-link { + display: inline-block; +} + +.image-container { + width: 50px; + height: 50px; + border-radius: 50%; + position: relative; + overflow: hidden; +} diff --git a/src/styles/globals.css b/src/styles/globals.css index 2276d2e..dc8fac0 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -11,3 +11,8 @@ top: 10px; right: 15px; } + +a.disabled { + pointer-events: none; + cursor: default; +}
