Create author component

astro/src/components/Author.astro

@@ -0,0 +1,27 @@
+---
+import { Image } from "@astrojs/image/components";
+import type { Author } from "@/types/payload-types";
+
+interface Props {
+    author: Author;
+}
+
+const { author } = Astro.props;
+---
+{ (author)  &&
+    <div class="flex gap-6 border-t-2 border-secondary py-4 text-secondary">
+        {(typeof author.avatar === 'object') &&
+            <Image
+                src={author.avatar.url || ""}
+                width={150}
+                height={150}
+                aspectRatio={1}
+                alt={author.avatar.alt || ""}
+            />
+        }
+        <div class="flex flex-col">
+            <h3 class="font-semibold text-base">{author.name}</h3>
+            <p class="text-sm font-light">{author.bio}</p>
+        </div>
+    </div>
+}

astro/src/pages/posts/[id].astro

@@ -1,8 +1,9 @@
 ---
 import ContentLayout from "@/layouts/ContentLayout.astro";
 import Content from "@/components/Content.astro";
-import type { Post } from "@/types";
+import type { Post } from "@/types/payload-types";
 import { getPost, getPosts } from "@/utils/payload";
+import Author from "@/components/Author.astro";
 
 export async function getStaticPaths() {
   const posts = await getPosts();
@@ -18,11 +19,15 @@ const post = id && (await getPost(id));
 
 {
   post ? (
-    <ContentLayout title={`Paystro | ${post.title!}`}>
+    <ContentLayout title={`${post.title!}`}>
       <article class="space-y-3 my-3 max-w-prose">
         <h1 class="">{post.title}</h1>
         {post.content && <Content content={post.content} />}
       </article>
+      {typeof post.author === 'object' &&
+        <aside class="mt-8">
+          <Author author={post.author} />
+        </aside>}
     </ContentLayout>
   ) : (
     <div>404</div>

payload/src/collections/Authors.ts

@@ -3,12 +3,11 @@ import { isAdmin } from "@/access/isAdmin";
 import { isEditor } from "@/access/isEditor";
 import { isSSG } from "@/access/isSSG";
 import { isUser } from "@/access/isUser";
-import { isEditorOrSelf } from "@/access/isEditorOrSelf";
 
 const Authors: CollectionConfig = {
   slug: "authors",
   admin: {
-    defaultColumns: ["avatar","name"],
+    defaultColumns: ["name"],
     useAsTitle: "name",
   },
   access: {
@@ -19,20 +18,26 @@ const Authors: CollectionConfig = {
     delete: isEditor,
   },
   fields: [
+    {
+      name: "avatar",
+      type: "upload",
+      relationTo: "media",
+      required: true,
+    },
     {
       name: "name",
       type: "text",
       required: true
     },
     {
-      name: "avatar",
-      type: "upload",
-      relationTo: "media",
+      name: "bio",
+      type: "text",
       required: false,
     },
+    
     {
       name: "user",
-      type: "relationship",
+      type: "upload",
       relationTo: "users",
       admin: {
         description: 'The selected user will be able to edit this author'