{"size": 1010, "ext": "js", "max_stars_repo_path": "src/components/Author.js", "max_stars_repo_name": "peterj/k8s-mini-course", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Author.js", "max_issues_repo_name": "peterj/k8s-mini-course", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Author.js", "max_forks_repo_name": "peterj/k8s-mini-course", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 30.6060606061, "max_line_length": 85, "alphanum_fraction": 0.5564356436}
import { author, authorImg, authorTitle, shortBio, social } from '@config';
import React from 'react';
import { SocialIcons } from './';

const Author = () => {
  return (
    <div className='text-white bg-gray-700 md:flex md:flex-row'>
      <div className='w-48 p-8 md:flex-shrink-0'>
        <a href={social.website} target='_blank'>
          <img
            className='inline-block object-cover h-32 rounded-full ring-2 ring-white'
            src={authorImg}
            alt={author}
          />
        </a>
      </div>
      <div className='self-center px-8 pb-8 md:pt-8 md:pl-0'>
        <h3 className='mb-2 text-lg leading-4'>
          <a href={social.website} target='_blank' className=' hover:underline'>
            {author}
          </a>
          <br />
          <span className='text-xs text-gray-300 uppercase'>{authorTitle}</span>
        </h3>
        <p className='text-sm text-gray-200 '>{shortBio}</p>
        <SocialIcons />
      </div>
    </div>
  );
};

export default Author;
