From 44d0fb110e8053d525509d24b777a41e5d7348d0 Mon Sep 17 00:00:00 2001
From: stefan080106 <stefan08.arnold@gmail.com>
Date: Tue, 20 Sep 2022 15:58:21 +0200
Subject: [PATCH] :recycle: separate teamcard in one component

---
 components/ueber-uns/teamCard.js | 16 ++++++++++++++++
 pages/ueber-uns.js               | 29 +++++++++++++++++------------
 2 files changed, 33 insertions(+), 12 deletions(-)
 create mode 100644 components/ueber-uns/teamCard.js

diff --git a/components/ueber-uns/teamCard.js b/components/ueber-uns/teamCard.js
new file mode 100644
index 0000000..a93bc6c
--- /dev/null
+++ b/components/ueber-uns/teamCard.js
@@ -0,0 +1,16 @@
+import Image from "next/image";
+import React from "react";
+
+const TeamCard = (props) => {
+	return (
+		<div>
+			<Image src={props.imgUrl} alt="ProfileImage" width={125} height={125} />
+			<div>
+				<h2>{props.name}</h2>
+				<h3>{props.stellung}</h3>
+			</div>
+		</div>
+	);
+};
+
+export default TeamCard;
diff --git a/pages/ueber-uns.js b/pages/ueber-uns.js
index dd6d099..4484793 100644
--- a/pages/ueber-uns.js
+++ b/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"
-								alt="ProfileImage"
-							/>
-							<div>
-								<h2>Stefan Arnold</h2>
-								<h3>Inhaber</h3>
-							</div>
-						</div>
+						{[
+							{
+								name: "Stefan Arnold",
+								stellung: "Inhaber",
+								imgUrl: "https://cdn.discordapp.com/attachments/933369908341932052/983361091063128124/Profile_Image2.png",
+							},
+						].map((member) => {
+							return (
+								<TeamCard
+									key={member.name}
+									name={member.name}
+									stellung={member.stellung}
+									imgUrl={member.imgUrl}
+								/>
+							);
+						})}
 					</div>
 				</FadeIn>
 			</div>