add: Team section

public/person-placeholder.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.0"
+   width="200"
+   height="200"
+   id="svg2"
+   sodipodi:docname="Black_-_replace_this_image_male.svg"
+   inkscape:version="0.92.1 r15371">
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     id="namedview5"
+     showgrid="false"
+     inkscape:zoom="1.18"
+     inkscape:cx="-46.610169"
+     inkscape:cy="100"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <defs
+     id="defs7" />
+  <path
+     d="M 3.1479956,199.8792 C 3.2975635,189.11012 3.401856,181.58351 3.0839455,167.62229 C 10.105706,158.82749 34.823782,154.79402 41.576501,152.37892 C 50.290941,145.87438 60.163612,140.3389 68.674128,135.43826 C 73.373849,132.73205 73.434971,123.45565 73.090981,117.22608 C 71.529518,108.40367 70.704151,100.79588 64.405541,94.317884 C 64.053201,92.46819 63.024431,88.22384 59.931471,82.679233 C 57.850015,73.360874 49.646154,61.821919 51.707332,55.90224 C 57.196471,40.137595 52.40075,33.731056 55.771462,32.383588 C 63.458756,29.310542 65.537537,22.590118 72.578356,15.841971 C 93.149082,11.923669 89.987081,1.4887794 105.35709,3.5044295 C 124.4076,6.0027415 113.91578,8.8197325 126.98208,15.459115 C 143.03475,23.615971 133.46982,24.442181 148.12438,46.038481 C 156.82644,58.862616 139.87501,59.736843 144.26704,71.085333 C 148.3243,81.568657 138.76017,83.355833 133.93493,94.828249 C 129.30575,105.83459 126.40093,109.0707 131.73108,123.57794 C 136.68074,137.04961 144.89857,130.89422 163.46019,151.07177 C 168.1733,156.1952 185.10612,149.99341 196.76509,164.95509 C 196.75779,172.625 196.92784,183.5909 196.98027,199.93748 C 144.72386,199.75031 3.1479956,199.8792 3.1479956,199.8792 z"
+     id="path4"
+     style="fill:#cccccc;fill-opacity:1" />
+</svg>

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,
-                                   }: {
+}: {
-  params: Promise<{ id: number }>
+  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">
+    <div className="w-2/3 mx-auto pt-4">
-      <Link href="/">{"<-"} Back</Link>
+      <Link href="/">
-      <h4 className="text-lg text-gray-600">Diplom- und Abschlussarbeiten ({result.year})</h4>
+        <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;