66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import { IconBrandBluesky, IconBrandXFilled } from "@tabler/icons-react";
|
|
import Image from "next/image";
|
|
|
|
export interface AuthorChipParams {
|
|
displayName: string;
|
|
avatarUrl: string;
|
|
bluesky?: string;
|
|
x?: string;
|
|
}
|
|
|
|
export default function AuthorChip({
|
|
displayName,
|
|
avatarUrl,
|
|
bluesky,
|
|
x,
|
|
}: AuthorChipParams) {
|
|
return (
|
|
<>
|
|
<div className="group block flex-shrink-0 mb-4">
|
|
<div className="flex items-center">
|
|
<div>
|
|
<Image
|
|
alt={`Picture of ${displayName}`}
|
|
src={avatarUrl}
|
|
width={64}
|
|
height={64}
|
|
className="inline-block h-9 w-9 rounded-full"
|
|
/>
|
|
</div>
|
|
<div className="ml-3">
|
|
<p className="text-sm font-medium text-gray-700 group-hover:text-gray-900">
|
|
{displayName}
|
|
</p>
|
|
{bluesky !== undefined && (
|
|
<>
|
|
<div className="text-sm font-medium text-gray-700 group-hover:text-gray-900">
|
|
<a href={`https://bsky.app/profile/${bluesky}`}>
|
|
<IconBrandBluesky
|
|
size={16}
|
|
fill="gray-700"
|
|
className="inline-block"
|
|
/>{" "}
|
|
@{bluesky}
|
|
</a>
|
|
</div>
|
|
</>
|
|
)}
|
|
{x !== undefined && (
|
|
<div className="text-sm font-medium text-gray-700 group-hover:text-gray-900">
|
|
<a href={`https://bsky.app/profile/${bluesky}`}>
|
|
<IconBrandXFilled
|
|
size={16}
|
|
fill="gray-700"
|
|
className="inline-block"
|
|
/>{" "}
|
|
@{x}
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|