Kerem Yildiz

src/sections/Art/components/ArtList.jsx

@@ -0,0 +1,13 @@
+import ArtListItem from "./ArtListItem";
+
+function ArtList({ artworks }) {
+    return (
+        <ul className="art-list">
+            {artworks.map((art) => (
+                <ArtListItem key={art.id} art={art} />
+            ))}
+        </ul>
+    );
+}
+
+export default ArtList;

src/sections/Art/components/ArtListItem.jsx

@@ -0,0 +1,19 @@
+import PublicationHistoryList from "./PublicationHistoryList";
+
+function ArtListItem({ art }) {
+    const baseUrl = "https://boolean-uk-api-server.fly.dev";
+
+    return (
+        <li>
+            <div className="frame">
+                <img src={baseUrl + art.imageURL} alt={art.title} />
+            </div>
+            <h3>{art.title}</h3>
+            <p>Artist: {art.artist}</p>
+            <h4>Publication History:</h4>
+            <PublicationHistoryList history={art.publicationHistory} />
+        </li>
+    );
+}
+
+export default ArtListItem;

src/sections/Art/components/PublicationHistoryList.jsx

@@ -1 +1,11 @@
+function PublicationHistoryList({ history }) {
+    return (
+        <ul>
+            {history.map((pub, i) => (
+                <li key={i}>{pub}</li>
+            ))}
+        </ul>
+    );
+}
 
+export default PublicationHistoryList;

src/sections/Art/index.jsx

@@ -1,10 +1,26 @@
+import { useState, useEffect } from "react";
+import ArtList from "./components/ArtList";
+
 function ArtsSection() {
+  const [artworks, setArtworks] = useState([]);
+
+  useEffect(() => {
+    fetch("https://boolean-uk-api-server.fly.dev/art")
+      .then((res) => res.json())
+      .then((data) => {
+        setArtworks(data);
+      })
+      .catch((err) => console.error("Error fetching art:", err));
+  }, []);
+
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <ArtList artworks={artworks} />
+      </div>
     </section>
-  )
+  );
 }
 
-export default ArtsSection
+export default ArtsSection;

src/sections/Users/components/UsersList.jsx

@@ -0,0 +1,13 @@
+import UserListItem from "./UsersListItem";
+
+function UserList({ users }) {
+    return (
+        <ul className="users-list">
+            {users.map((user) => (
+                <UserListItem key={user.id} user={user} />
+            ))}
+        </ul>
+    );
+}
+
+export default UserList;

src/sections/Users/components/UsersListItem.jsx

@@ -0,0 +1,11 @@
+function UserListItem({ user }) {
+    return (
+        <li style={{ background: user.favouriteColour }}>
+            <img src={user.profileImage} alt={`${user.firstName} ${user.lastName}`} />
+            <h3>{user.firstName} {user.lastName}</h3>
+            <p>Email: {user.email}</p>
+        </li>
+    );
+}
+
+export default UserListItem;

src/sections/Users/index.jsx

@@ -1,10 +1,24 @@
+import { useState, useEffect } from "react";
+import UserList from "./components/UsersList";
+
 function UsersSection() {
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    fetch("https://boolean-uk-api-server.fly.dev/Kerem-1034003/contact")
+      .then((res) => res.json())
+      .then((data) => setUsers(data))
+      .catch((err) => console.error("Error fetching users:", err));
+  }, []);
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <UserList users={users} />
+      </div>
     </section>
-  )
+  );
 }
 
-export default UsersSection
+export default UsersSection;