Team

A section which is used to introduce the individuals to site visitors showcasing the highlights of those personnels.

Preview

Usage

npm i react-hartan

import { Team } from "react-hartan"

function App() {

  return (
    <>
      <Team></Team>
    </>
  )
}

export default App

Customization With Props

• memberList -> Accepts an array of object, each element of the structure:

{
    memberImg: "", // string
    memberName: "", // string
    memberPosition: "", // string
}

NOTE: Keep the keys of the object same as above.

• teamSectionHeading -> Accepts a string value, used as the section heading.

• teamSectionContent -> Accepts a string value, paragraph content below the section heading.

• imgState -> Accepts a boolean value, used to show or hide image based on user input.

• id -> The id prop is similar to the id attribute in HTML. It allows to provide overall component id.

• imgLoad -> The imgLoad prop is mapped to the loading attribute in HTML img tag. It allows to provide overall the value for loading attribute, "lazy" | "eager".

• userTeamStyle -> Accepts class name(s) as string, custom styling prop for the team section container.

• userTeamDetailsCaptionStyle -> Accepts class name(s) as string, custom styling prop for the container containing heading and content.

• userTeamMembersStyle -> Accepts class name(s) as string, custom styling prop for the container containing each member card.

• userTeamMemberCardStyle -> Accepts class name(s) as string, custom styling prop for each card inside the team member container.

• userTeamMemberNameStyle -> Accepts class name(s) as string, custom styling prop for the name text of the member.

• userTeamMemberPositionStyle -> Accepts class name(s) as string, custom styling prop for the designation text of the member.

Default

import { Team } from "react-hartan"

function App() {

  return (
    <>
      <Team></Team>
    </>
  )
}

export default App

With Custom Props

// App.css
.bg-red{
   padding: 2rem;
   background-color: red;
}

.bg-pink{
   background-color: pink;
}


// App.jsx
import { Team } from "react-hartan"

function App() {

  return (
    <>
      <Team userTeamMembersStyle={"bg-red"} userTeamMemberCardStyle={"bg-pink"}></Team>
    </>
  )
}

export default App

Component Code

This is the code for the Team component.

Team.jsx

import teamStyle from "./Team.module.css"
import PropTypes from "prop-types"

const list = [
    {
        memberImg: "https://dummyimage.com/75x75",
        memberName: "Hartan",
        memberPosition: "UI/UX Designer"
    },
    {
        memberImg: "https://dummyimage.com/75x75",
        memberName: "Hartan",
        memberPosition: "UI/UX Designer"
    },
    {
        memberImg: "https://dummyimage.com/75x75",
        memberName: "Hartan",
        memberPosition: "UI/UX Designer"
    },
    {
        memberImg: "https://dummyimage.com/75x75",
        memberName: "Hartan",
        memberPosition: "UI/UX Designer"
    },
    {
        memberImg: "https://dummyimage.com/75x75",
        memberName: "Hartan",
        memberPosition: "UI/UX Designer"
    },
    {
        memberImg: "https://dummyimage.com/75x75",
        memberName: "Hartan",
        memberPosition: "UI/UX Designer"
    },
    {
        memberImg: "https://dummyimage.com/75x75",
        memberName: "Hartan",
        memberPosition: "UI/UX Designer"
    },
    {
        memberImg: "https://dummyimage.com/75x75",
        memberName: "Hartan",
        memberPosition: "UI/UX Designer"
    }
];

export default function Team({ memberList = list, teamSectionHeading = "Our Team", teamSectionContent = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut dicta molestias, ad delectus qui corrupti aliquid minus a quo ipsa cumque aspernatur, veritatis dolorum ipsam!", imgState = true, id, imgLoad, userTeamStyle, userTeamDetailsCaptionStyle, userTeamMembersStyle, userTeamMemberCardStyle, userTeamMemberNameStyle, userTeamMemberPositionStyle }) {

    return (
        <section className={`${teamStyle.team} ${userTeamStyle}`}>
            <div className={`${teamStyle.teamDetailsCaption} ${userTeamDetailsCaptionStyle}`}>
                <h1>{teamSectionHeading}</h1>
                <p>{teamSectionContent}</p>
            </div>

            <div className={`${teamStyle.teamMembers} ${userTeamMembersStyle}`}>
                {
                    memberList.map((member, id) => {
                        return (
                            <div key={id} className={`${teamStyle.teamMemberCard} ${userTeamMemberCardStyle}`}>
                                {
                                    imgState &&
                                    <figure>
                                        <img src={member.memberImg} alt={member.memberName} loading={imgLoad}/>
                                    </figure>
                                }
                                
                                <div>
                                    <p className={`${teamStyle.teamMemberName} ${userTeamMemberNameStyle}`}>{member.memberName}</p>
                                    <p className={`${teamStyle.teamMemberPosition}  ${userTeamMemberPositionStyle}`}>{member.memberPosition}</p>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        </section>
    )
}

Team.propTypes = {
    memberList: PropTypes.arrayOf(PropTypes.shape({
        memberImg: PropTypes.string,
        memberName: PropTypes.string,
        memberPosition: PropTypes.string
    })),
    teamSectionHeading: PropTypes.node,
    teamSectionContent: PropTypes.node,
    id: PropTypes.string,
    userTeamStyle: PropTypes.string,
    userTeamDetailsCaptionStyle: PropTypes.string,
    userTeamMembersStyle: PropTypes.string,
    userTeamMemberCardStyle: PropTypes.string,
    userTeamMemberNameStyle: PropTypes.string,
    userTeamMemberPositionStyle: PropTypes.string
};

Team.module.css

/* Team Styling */

/* team section container */
.team {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    justify-content: center;
    align-items: center;
}

/* team section content */
.teamDetailsCaption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.teamDetailsCaption h1 {
    font-size: 3rem;
}

.teamDetailsCaption p {
    font-size: 1.5rem;
    color: #484747;
    font-weight: 500;
}

/* team member card container */
.teamMembers {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

/* each member card */
.teamMemberCard {
    width: 35rem;
    padding: 1rem;
    border: 2px solid #e8e4e4;
    border-radius: .5rem;
    display: flex;
    justify-content: start;
    gap: 2.5rem;
    align-items: center;
}

/* figure inside each card */
.teamMemberCard figure {
    display: flex;
    justify-content: center;
    align-items: center;
}

.teamMemberCard figure img {
    border-radius: 50%;
}

/* text content inside each card */
.teamMemberName {
    font-size: 2rem;
    font-weight: 500;
}

.teamMemberPosition {
    font-size: 1.75rem;
    font-weight: 500;
    color: #565454;
}