code/components/Repository.jsx

function Repository({url, name, stars, language, description}) {
  const image = {
    folder: 'folder.svg',
    star: 'star.svg',
  };

  function getLanguageColor() {
    if (!language) {
      return;
    }

    switch (language.toLowerCase()) {
      case 'go':
        return '#a1d5ed';

      case 'julia':
        return '#d35bde';

      case 'javascript':
        return '#e4f060';

      case 'typescript':
        return '#4e85de';

      case 'vue':
        return '#4ede85';

      case 'shell':
        return '#9dde4e';

      case 'html':
        return '#de704e';

      default:
        return '#bab7b6';
    }
  }

  return (
    <div class="flex flex-col py-4 px-2 lg:px-0 hover:opacity-100">
      <div class="flex-1 text-sm hover:text-blue-300 font-bold">
        <a href={url}>
          <div class="flex flex-row items-center">
            <div class="flex-initial">
              <img
                src={image.folder}
                class="text-white h-3 w-3 fill-current inline"
                alt="Repository"
              />
            </div>
            <div class="flex-initial px-4">
              { name }
            </div>
          </div>
        </a>
      </div>
      <div class="flex-2 text-xs opacity-80 lg:w-2/3">
        { description }
      </div>
      <div class="flex-1">
        <div class="flex flex-row items-center">
          <div class="flex-1 text-xs">
            <div class="flex flex-row items-center content-center">
              <div class="flex-initial">
                <svg
                  v-show="language"
                  class="h-2 w-2 inline"
                  viewBox="0 0 100 100"
                >
                  <circle
                    cx="50"
                    cy="50"
                    r="40"
                    fill={getLanguageColor()}
                  />
                </svg>
              </div>
              <div class="flex-initial px-2">
                { language }
              </div>
            </div>
          </div>
          <div
            v-show="stars > 0"
            class="flex-2 text-xs"
          >
            <div class="flex flex-row items-center content-center">
              <div class="flex-initial">
                <img
                  src={image.star}
                  class="text-white font-bold h-3 w-3 fill-current -inset-y-1"
                  alt="Stargazers"
                />
              </div>
              <div class="flex-initial px-2">
                { stars }
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Repository;