| 1 | import Link from 'next/link' |
| 2 | import { formatDate, formatDateShort } from 'utils/date' |
| 3 | |
| 4 | export type BlogHeaderProps = { |
| 5 | author?: string |
| 6 | date?: Date |
| 7 | github?: string |
| 8 | slug: string |
| 9 | title: string |
| 10 | } |
| 11 | |
| 12 | export const BlogHeader = ({ |
| 13 | author, |
| 14 | date, |
| 15 | github, |
| 16 | slug, |
| 17 | title, |
| 18 | }: BlogHeaderProps) => ( |
| 19 | <div className="text-center text-gray-600"> |
| 20 | <Link href={`/blog/${slug}`}> |
| 21 | <h1 className="text-gradient text-3xl font-bold md:text-4xl">{title}</h1> |
| 22 | </Link> |
| 23 | {date && ( |
| 24 | <p className="mt-4"> |
| 25 | <time dateTime={formatDateShort(date)}>{formatDate(date)}</time> |
| 26 | </p> |
| 27 | )} |
| 28 | <p className="author"> |
| 29 | {(author || github) && ( |
| 30 | <> |
| 31 | {github && ( |
| 32 | <img |
| 33 | src={`https://github.com/${github}.png`} |
| 34 | alt={author || github} |
| 35 | className="mr-4 h-16 w-16 rounded-full bg-white shadow-md" |
| 36 | width={64} |
| 37 | height={64} |
| 38 | /> |
| 39 | )} |
| 40 | <span className="leading-relaxed"> |
| 41 | by{' '} |
| 42 | {author && ( |
| 43 | <> |
| 44 | {author} |
| 45 | {github && <br />} |
| 46 | </> |
| 47 | )} |
| 48 | {github && ( |
| 49 | <a |
| 50 | href={`https://github.com/${github}`} |
| 51 | target="_blank" |
| 52 | rel="noopener noreferrer" |
| 53 | > |
| 54 | @{github} |
| 55 | </a> |
| 56 | )} |
| 57 | </span> |
| 58 | </> |
| 59 | )} |
| 60 | <style jsx>{` |
| 61 | .author { |
| 62 | @apply -mx-6 mt-5 flex items-center text-left; |
| 63 | } |
| 64 | |
| 65 | .author::before, |
| 66 | .author::after { |
| 67 | @apply mx-6 block h-px flex-1 bg-gray-400; |
| 68 | |
| 69 | content: ''; |
| 70 | } |
| 71 | |
| 72 | .author:empty { |
| 73 | @apply mx-0 h-px; |
| 74 | } |
| 75 | |
| 76 | .author:empty::before, |
| 77 | .author:empty::after { |
| 78 | @apply mx-0; |
| 79 | } |
| 80 | `}</style> |
| 81 | </p> |
| 82 | </div> |
| 83 | ) |
| 84 |