import { Meta } from "@storybook/addon-docs/blocks";
import members from "./members.json";
import { getAvatar, languageNameFor, minimizedLink } from "./helpers.js";

<Meta title="Team" />

<style>{`
  a {
    color: #5ECE7B !important;
  }

  .alert {
    background: #efeded;
    padding: 1rem;
    margin: 0.5rem 0 1rem;
  }

  .tip {
    border-left: 5px solid #5ECE7B;
  }

	.warning {
		border-left: 5px solid #ffc107;
		background-color: #fff4d5;
	}
  
  li.member {
    display: flex;
    padding: 1.5rem 0;
    border-bottom: 1px dashed #ececec;

  }

  .profile {
    margin-left: 1rem;
    flex: 1;
  }

  .avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }

  h3 {
    margin-bottom: 0.5rem;
    margin-top: 0;
  }

  .row {
    font-size: 1em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
  }

  .icon {
    margin-right: 0.5rem;
  }

  .role {
    text-transform: uppercase;
    font-size: 0.84em;
    font-weight: 600;
  }

  .sublist {
    list-style-type: none;
    padding-left: 0;
    font-weight: 600;
    margin: 0;
  }

  li {
    display: inline-block;
  }

  .dot {
    margin: 0 0.8rem;
  }

  .social-medias a {
    margin-right: 0.5rem;
  }
  
  .maintainers-work {
    display: flex;
  }
`}</style>

# Meet the team

These are the awesome people who are maintaining Storefront UI by:

<ul>
  <li class="maintainers-work">Running the project according to Roadmap</li>
  <li class="maintainers-work">Processing Github issues</li>
  <li class="maintainers-work">Reviewing pull requests</li>
  <li class="maintainers-work">Answering and assisting your needs whenever possible</li>
</ul>

Besides, some of our maintainers are multi-lingual. So don't hesistate to connect even if you are not comfortable speaking in English.

<div class="alert tip">

Join us in [Our Discord Server](https://discord.com/invite/TJpdzzN6q5)

</div>

## Our Core Maintainers

<ul style={{ listStyle: "none" }}>
  {members
    .filter((member) => member.active)
    .map((member, index) => (
      <li key={index} class="member">
        <div class="avatar">
          <img src={getAvatar(member)} alt={member.name} class="avatar-img" />
        </div>
        <div class="profile">
          <h3>{member.name}</h3>
          <div class="info">
            <div class="role row">{member.role}</div>
            {member.work && (
              <div class="job-title-container row">
                <div class="icon">
                  <img
                    src="https://res.cloudinary.com/mayashavin/image/upload/w_14,h_14,c_scale/v1567454220/StorefrontUI/briefcase-solid.jpg"
                    alt="Job title"
                  />
                </div>
                <div class="job-title">
                  <span>{member.work.title}</span>
                  {member.work.org && <span> @ </span>}
                  {member.work.org && (
                    <a
                      href={member.work.orgUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      {member.work.org}
                    </a>
                  )}
                  {member.work.subTitle && <span>{member.work.subTitle}</span>}
                </div>
              </div>
            )}
            {member.location && (
              <div class="location row">
                <div class="icon">
                  <img
                    src="https://res.cloudinary.com/mayashavin/image/upload/w_14,h_14,c_scale/v1567454220/StorefrontUI/map-marked-alt-solid.jpg"
                    alt="Location"
                  />
                </div>
                <span>{member.location}</span>
              </div>
            )}
            {member.languages && (
              <div class="languages row">
                <div class="icon">
                  <img
                    src="https://res.cloudinary.com/mayashavin/image/upload/w_14,h_14,c_scale/v1567454220/StorefrontUI/globe-solid.jpg"
                    alt="Spoken languages"
                  />
                </div>
                <ul class="sublist">
                  {(member.languages || [])
                    .filter((code) => !!languageNameFor[code])
                    .map((code, index) => (
                      <li key={code}>
                        {index > 0 && index < member.languages.length && (
                          <span class="dot">&middot;</span>
                        )}
                        {languageNameFor[code]}
                      </li>
                    ))}
                </ul>
              </div>
            )}
            {member.links && member.links.length > 0 && (
              <div class="links row">
                <div class="icon">
                  <img
                    src="https://res.cloudinary.com/mayashavin/image/upload/w_14,h_14,c_scale/v1567454220/StorefrontUI/link-solid.jpg"
                    alt="Other links"
                  />
                </div>
                <ul class="links-options sublist">
                  {member.links.map((link, index) => (
                    <li key={index}>
                      {index > 0 && index < member.links.length && (
                        <span class="dot">&middot;</span>
                      )}
                      <a href={link} target="_blank">
                        {minimizedLink(link)}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            )}
            {member.socials && (
              <div class="social-medias row">
                {member.socials.github && (
                  <a
                    href={`https://github.com/${member.socials.github}/`}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <img
                      src="https://res.cloudinary.com/mayashavin/image/upload/h_20,c_thumb,g_auto/v1565642096/433-github.jpg"
                      alt="Github"
                    />
                  </a>
                )}
                {member.socials.twitter && (
                  <a
                    href={`https://twitter.com/${member.socials.twitter}`}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <img
                      src="https://res.cloudinary.com/mayashavin/image/upload/w_20,c_scale/v1567327341/Twitter_Logo_new.jpg"
                      alt="Twitter"
                    />
                  </a>
                )}
                {member.socials.linkedIn && (
                  <a
                    href={`https://www.linkedin.com/in/${membersocials.linkedIn}`}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <img src="" alt="LinkedIn" />
                  </a>
                )}
              </div>
            )}
          </div>
        </div>
      </li>
    ))}
</ul>

### Our core emeretis

<div>
  {members
    .filter((member) => !member.active)
    .map((member, index) => (
      <li key={index} class="member">
        <div class="avatar">
          <img src={getAvatar(member)} alt={member.name} class="avatar-img" />
        </div>
        <div class="profile">
          <h3>{member.name}</h3>
          <div class="info">
            <div class="role row">{member.role}</div>
            {member.work && (
              <div class="job-title-container row">
                <div class="icon">
                  <img
                    src="https://res.cloudinary.com/mayashavin/image/upload/w_14,h_14,c_scale/v1567454220/StorefrontUI/briefcase-solid.jpg"
                    alt="Job title"
                  />
                </div>
                <div class="job-title">
                  <span>{member.work.title}</span>
                  {member.work.org && <span> @ </span>}
                  {member.work.org && (
                    <a
                      href={member.work.orgUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      {member.work.org}
                    </a>
                  )}
                  {member.work.subTitle && <span>{member.work.subTitle}</span>}
                </div>
              </div>
            )}
            {member.location && (
              <div class="location row">
                <div class="icon">
                  <img
                    src="https://res.cloudinary.com/mayashavin/image/upload/w_14,h_14,c_scale/v1567454220/StorefrontUI/map-marked-alt-solid.jpg"
                    alt="Location"
                  />
                </div>
                <span>{member.location}</span>
              </div>
            )}
            {member.languages && (
              <div class="languages row">
                <div class="icon">
                  <img
                    src="https://res.cloudinary.com/mayashavin/image/upload/w_14,h_14,c_scale/v1567454220/StorefrontUI/globe-solid.jpg"
                    alt="Spoken languages"
                  />
                </div>
                <ul class="sublist">
                  {(member.languages || [])
                    .filter((code) => !!languageNameFor[code])
                    .map((code, index) => (
                      <li key={code}>
                        {index > 0 && index < member.languages.length && (
                          <span class="dot">&middot;</span>
                        )}
                        {languageNameFor[code]}
                      </li>
                    ))}
                </ul>
              </div>
            )}
            {member.links && member.links.length > 0 && (
              <div class="links row">
                <div class="icon">
                  <img
                    src="https://res.cloudinary.com/mayashavin/image/upload/w_14,h_14,c_scale/v1567454220/StorefrontUI/link-solid.jpg"
                    alt="Other links"
                  />
                </div>
                <ul class="links-options sublist">
                  {member.links.map((link, index) => (
                    <li key={index}>
                      {index > 0 && index < member.links.length && (
                        <span class="dot">&middot;</span>
                      )}
                      <a href={link} target="_blank">
                        {minimizedLink(link)}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            )}
            {member.socials && (
              <div class="social-medias row">
                {member.socials.github && (
                  <a
                    href={`https://github.com/${member.socials.github}/`}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <img
                      src="https://res.cloudinary.com/mayashavin/image/upload/h_20,c_thumb,g_auto/v1565642096/433-github.jpg"
                      alt="Github"
                    />
                  </a>
                )}
                {member.socials.twitter && (
                  <a
                    href={`https://twitter.com/${member.socials.twitter}`}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <img
                      src="https://res.cloudinary.com/mayashavin/image/upload/w_20,c_scale/v1567327341/Twitter_Logo_new.jpg"
                      alt="Twitter"
                    />
                  </a>
                )}
                {member.socials.linkedIn && (
                  <a
                    href={`https://www.linkedin.com/in/${membersocials.linkedIn}`}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <img src="" alt="LinkedIn" />
                  </a>
                )}
              </div>
            )}
          </div>
        </div>
      </li>
    ))}
</div>

And of course, without these awesome [contributors](https://github.com/vuestorefront/storefront-ui/graphs/contributors) committing their time, there won't be Storefront UI ❤️.

## Become a maintainer?

StorefrontUI is a completely new approach for component libraries oriented around customization possibilities instead of out of the box possibilities.
It's a great goal but it will take a lot of time to achieve it only by ourselves.

If you are interested in becoming a core maintainer, please [email us](mailto:ui@vuestorefront.io).