code/components/Repository.tsx

import { GithubLanguage } from '../types/github';

const image = {
  folder: 'folder.svg',
  star: 'star.svg',
};

function getLanguageColor(language: GithubLanguage) {
  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';
  }
}

interface Props {
  url: string;
  name: string;
  description: string;
  language: string;
  stars: number;
}

function Repository(props: Partial<Props>) {
  return (
    <div class="flex flex-col py-4 px-2 lg:px-0 opacity-80 hover:opacity-100 transition duration-500 ease-in-out">
      <div class="flex-1 text-sm hover:text-blue-300 font-bold transition duration-500 ease-in-out">
        <a href={props.url}>
          <div class="flex flex-row items-center">
            <div class="flex-initial">
              <img
                src={image.folder}
                class="text-black dark:text-white h-3 w-3 fill-current inline"
                alt="Repository"
              />
            </div>
            <div class="flex-initial px-4">
              { props.name }
            </div>
          </div>
        </a>
      </div>
      <div class="flex-2 text-xs opacity-80 lg:w-2/3">
        { props.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(props.language as GithubLanguage)}
                  />
                </svg>
              </div>
              <div class="flex-initial px-2">
                { props.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">
                { props.stars }
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Repository;