add: Team section

src/app/(frontend)/diplomarbeit/[id]/page.tsx

@@ -1,29 +1,85 @@
 import { getPayload } from 'payload';
 import config from '@payload-config';
 import Link from "next/link"
+import React from 'react'
+
+const team = [
+  {
+    name: 'Emma Dorsey',
+    role: 'Senior Developer',
+    imageUrl:
+      'https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80',
+    bio: 'Praesentium iure error aliquam voluptas ut libero. Commodi placeat sit iure nulla officiis. Ut ex sit repellat tempora. Qui est accusamus exercitationem natus ut voluptas. Officiis velit eos ducimus.',
+    xUrl: '#',
+    linkedinUrl: '#',
+  },
+  // More people...
+]
+
+function Team({ people }) {
+  return (
+    <div className="bg-white py-24 md:py-32 lg:py-40">
+      <div className="mx-auto grid  grid-cols-1 gap-20 px-6 lg:px-8 xl:grid-cols-3">
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <h2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
+            Projektteam
+          </h2>
+        </div>
+        <ul
+          role="list"
+          className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-20 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:gap-x-8 xl:col-span-2"
+        >
+          {people.map((person) => (
+            <li key={person.id}>
+              <img
+                alt={"Bild von " + person.name}
+                src={person?.image?.url || "/person-placeholder.svg"}
+                className="aspect-3/2 w-full rounded-2xl object-cover"
+              />
+              <h3 className="mt-6 text-lg/8 font-semibold text-gray-900">
+                {person.name}
+              </h3>
+              <p className="text-base/7 text-gray-600">
+                {person.position == "leader"
+                  ? "Projektleiter"
+                  : "Projektmitarbeiter"}
+              </p>
+              <p className="mt-4 text-base/7 text-gray-600">
+                {person.description}
+              </p>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
 
 export default async function Page({
-                                     params,
-                                   }: {
-  params: Promise<{ id: number }>
+  params,
+}: {
+  params: Promise<{ id: number }>;
 }) {
-  const { id } = await params
-
+  const { id } = await params;
 
   const payload = await getPayload({ config });
 
-
   const result = await payload.findByID({
-    collection: 'papers', // required
+    collection: "papers", // required
     id: id, // required
-  })
-
+  });
 
   return (
-    <div className="w-2/3 mx-auto">
-      <Link href="/">{"<-"} Back</Link>
-      <h4 className="text-lg text-gray-600">Diplom- und Abschlussarbeiten ({result.year})</h4>
+    <div className="w-2/3 mx-auto pt-4">
+      <Link href="/">
+        <span aria-hidden="true">&larr;</span> Zurück
+      </Link>
+
+      <h4 className="text-lg text-gray-600 pt-8">
+        Diplom- und Abschlussarbeiten ({result.year})
+      </h4>
       <h1 className="text-4xl font-semibold">{result.title}</h1>
+      <Team people={result.authors} />
       <h2 className="text-3xl">Zielsetzung</h2>
       <p className="text-lg">{result.goal}</p>
       <h2 className="text-3xl">Problemstellung</h2>
@@ -31,5 +87,5 @@ export default async function Page({
       <h2 className="text-3xl">Ergebnisse</h2>
       <p className="text-lg">{result.result}</p>
     </div>
-  )
+  );
 }

src/collections/Papers.ts

@@ -116,6 +116,11 @@ export const Papers: CollectionConfig = {
       type: "array",
       label: "Projektmitglieder",
       fields: [
+        {
+          name: "image",
+          type: "upload",
+          relationTo: "media",
+        },
         {
           name: "name",
           type: "text",

src/payload-types.ts

@@ -144,6 +144,7 @@ export interface Paper {
   mentor?: string | null;
   authors?:
     | {
+        image?: (number | null) | Media;
         name: string;
         position: 'leader' | 'member';
         description?: string | null;
@@ -384,6 +385,7 @@ export interface PapersSelect<T extends boolean = true> {
   authors?:
     | T
     | {
+        image?: T;
         name?: T;
         position?: T;
         description?: T;