45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { PhotoCircle } from "./PhotoCircle.tsx";
|
|
|
|
export default function AuthorCard({
|
|
author,
|
|
isIdentified,
|
|
}: {
|
|
author: Author;
|
|
isIdentified?: boolean;
|
|
}) {
|
|
return (
|
|
<div
|
|
class={
|
|
isIdentified
|
|
? "p-6 bg-[#313244] shadow-md"
|
|
: "p-6 bg-[#313244] shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105"
|
|
}
|
|
>
|
|
<div class="min-w-screen flex flex-col items-center justify-between bg-[#45475a] rounded-lg shadow-md">
|
|
<div class="sm:mt-14 sm:mb-14 mt-12 mb-4 flex flex-col items-center gap-y-5 gap-x-10 md:flex-row">
|
|
<PhotoCircle
|
|
src={author.image ?? "/logo.svg"}
|
|
alt="Author's profile photo"
|
|
/>
|
|
<div class="space-y-2 text-center md:text-left">
|
|
<p class="text-2xl text-[#f5e0dc] font-bold sm:text-4xl">
|
|
{author.first_name} {author.last_name}
|
|
</p>
|
|
<p class="text-md font-medium text-[#f2cdcd] sm:text-xl">
|
|
{author.bio}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export type Author = {
|
|
author_id: number;
|
|
first_name: string;
|
|
last_name: string;
|
|
bio: string;
|
|
image?: string;
|
|
};
|