⬅️ Back to Table of Contents

📄 TeamBio.tsx

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	2
💠 JSX Elements	8
📐 Interfaces	1

📚 Table of Contents

• Imports
• JSX Elements
• Functions
• Interfaces

🛠️ File Location:

📂 packages/website/src/components/team/TeamBio.tsx

📦 Imports

Name	Source
React	react
styles	./TeamBio.module.css

---

JSX Elements

Component	Type	Props	Children
li	element	className={styles.teamBio}	, ,
img	element	alt="", className={styles.profilePhoto}, src={/img/team/${username}.jpg}	none
div	element	className={styles.texts}	,
strong	element	className={styles.name}	{name}
p	element	className={styles.description}	{description}
ol	element	className={styles.services}	{[['github', https://github.com/${username}] as const, ...links]
.sort(([a], [b]) => a.localeCompare(b))
.map(([service, url]) => (
<a
aria-label={${service}-link}
className={image-link ${service}-link social-link-icon ${styles.serviceIconLink}}
href={url}
target="_blank"
/>
))}
li	element	key={service}
a	element	aria-label={${service}-link}, className={image-link ${service}-link social-link-icon ${styles.serviceIconLink}}, href={url}, target="_blank"	none

---

Functions

`TeamBio({

description, links = [], name, username, }: BioEntry): React.JSX.Element`

Code

export function TeamBio({
  description,
  links = [],
  name,
  username,
}: BioEntry): React.JSX.Element {
  return (
    <li className={styles.teamBio}>
      <img
        alt=""
        className={styles.profilePhoto}
        src={`/img/team/${username}.jpg`}
      />
      <div className={styles.texts}>
        <strong className={styles.name}>{name}</strong>
        <p className={styles.description}> {description}</p>
      </div>
      <ol className={styles.services}>
        {[['github', `https://github.com/${username}`] as const, ...links]
          .sort(([a], [b]) => a.localeCompare(b))
          .map(([service, url]) => (
            <li key={service}>
              <a
                aria-label={`${service}-link`}
                className={`image-link ${service}-link social-link-icon ${styles.serviceIconLink}`}
                href={url}
                target="_blank"
              />
            </li>
          ))}
      </ol>
    </li>
  );
}

• Parameters:
• { description, links = [], name, username, }: BioEntry
• Return Type: React.JSX.Element
• Calls:
• [['github',https://github.com/${username}] as const, ...links] .sort(([a], [b]) => a.localeCompare(b)) .map

---

Interfaces

BioEntry

Interface Code

export interface BioEntry {
  description: string;
  links?: [string, string][];
  name: string;
  username: string;
}

Properties

Name	Type	Optional	Description
description	string	✗
links	[string, string][]	✓
name	string	✗
username	string	✗

---