42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import type { BlogAuthor } from '@nx/nx-dev/data-access-documents/node-only';
|
|
import { GithubIcon, XIcon } from '@nx/nx-dev/ui-common';
|
|
import Image from 'next/image';
|
|
|
|
interface AuthorDetailProps {
|
|
author: BlogAuthor;
|
|
}
|
|
|
|
export default function AuthorDetail({ author }: AuthorDetailProps) {
|
|
return (
|
|
<div className="space-between invisible absolute left-[65%] right-0 z-30 mt-2 flex w-60 translate-x-[-50%] items-center gap-4 rounded bg-slate-50 p-4 text-sm text-slate-700 opacity-0 shadow-lg ring-1 ring-slate-200 transition-all delay-75 duration-300 ease-in-out md:group-hover:visible md:group-hover:opacity-100 dark:bg-slate-900 dark:text-slate-400 dark:ring-slate-800">
|
|
<span>
|
|
<Image
|
|
alt={author.name}
|
|
title={author.name}
|
|
loading="lazy"
|
|
width="40"
|
|
height="40"
|
|
decoding="async"
|
|
src={`/documentation/blog/images/authors/${author.name}.jpeg`}
|
|
className="rounded-full ring-1 ring-white grayscale dark:ring-slate-900"
|
|
/>
|
|
</span>
|
|
<span className="text-balance">{author.name}</span>
|
|
<a
|
|
href={`https://twitter.com/${author.twitter}`}
|
|
target="_blank"
|
|
aria-label={`Follow ${author.name} on X`}
|
|
>
|
|
<XIcon aria-hidden="true" className="h-5 w-5" />
|
|
</a>
|
|
<a
|
|
href={`https://github.com/${author.github}`}
|
|
target="_blank"
|
|
aria-label={`View ${author.name}'s GitHub profile`}
|
|
>
|
|
<GithubIcon aria-hidden="true" className="h-5 w-5" />
|
|
</a>
|
|
</div>
|
|
);
|
|
}
|