code dump frontend

frontend/components/AuthorCard.tsx

@@ -0,0 +1,42 @@
+import { PhotoCircle } from "./PhotoCircle.tsx";
+
+export default function AuthorCard({
+  author,
+  isIdentified,
+}: {
+  author: Author;
+  isIdentified?: boolean;
+}) {
+  return (
+    <div
+      class={isIdentified
+        ? "p-6 bg-[#45475a] rounded-lg shadow-md"
+        : "p-6 bg-[#45475a] rounded-lg 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-[#313244] sm:min-h-screen">
+        <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;
+};