♻️ separate teamcard in one component

components/ueber-uns/teamCard.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+const TeamCard = (props) => {
+	return (
+		<div>
+			<img src={props.image} alt="ProfileImage" />
+			<div>
+				<h2>{props.name}</h2>
+				<h3>{props.stellung}</h3>
+			</div>
+		</div>
+	);
+};
+
+export default TeamCard;

pages/ueber-uns.js

@@ -1,8 +1,8 @@
 import Head from "next/head";
-import Image from "next/image";
 import StandardStyles from "../styles/Home.module.css";
 import styles from "../styles/UeberUns.module.css";
 import FadeIn from "react-fade-in";
+import TeamCard from "../components/ueber-uns/teamCard";
 
 export default function Home() {
 	return (
@@ -26,20 +26,25 @@ export default function Home() {
 				</FadeIn>
 			</div>
 			<div style={{ width: "80%" }}>
-				{/* TODO: ProfileImage */}
 				<FadeIn delay={500} transitionDuration={1500}>
 					<h2>Das Team</h2>
 					<div className={styles.teamContainer}>
-						<div>
+						{[
-							<img
+							{
-								src="https://cdn.discordapp.com/attachments/933369908341932052/983361091063128124/Profile_Image2.png"
+								name: "Stefan Arnold",
-								alt="ProfileImage"
+								stellung: "Inhaber",
-							/>
+								imgUrl: "https://cdn.discordapp.com/attachments/933369908341932052/983361091063128124/Profile_Image2.png",
-							<div>
+							},
-								<h2>Stefan Arnold</h2>
+						].map((member) => {
-								<h3>Inhaber</h3>
+							return (
-							</div>
+								<TeamCard
-						</div>
+									key={member.name}
+									name={member.name}
+									stellung={member.stellung}
+									imgUrl={member.imgUrl}
+								/>
+							);
+						})}
 					</div>
 				</FadeIn>
 			</div>