David Stern

src/App.css

@@ -17,6 +17,7 @@ ul[class] {
   display: grid;
 
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
 }
 
 .scroll-container {

src/sections/Advice/components/AdviceSlip.jsx

@@ -0,0 +1,16 @@
+function AdviceSlip({ advice, onGetNewAdvice, onSaveToFavourites }) {
+  if (!advice) {
+    return <p>Loading advice...</p>
+  }
+
+  return (
+    <div>
+      <h3>Some Advice For You:</h3>
+      <p>{advice.advice}</p>
+      <button onClick={onGetNewAdvice}>Get Another Advice</button>
+      <button onClick={onSaveToFavourites}>Save to Favourites</button>
+    </div>
+  )
+}
+
+export default AdviceSlip

src/sections/Advice/components/FavouriteSlipsList.jsx

@@ -0,0 +1,25 @@
+function FavouriteSlipsList({ favouriteSlips }) {
+  if (favouriteSlips.length === 0) {
+    return (
+      <div>
+        <h3>Your Favourite Advice Slips</h3>
+        <p>No favourite slips yet. Save some advice!</p>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <h3>Your Favourite Advice Slips</h3>
+      <ul>
+        {favouriteSlips.map(slip => (
+          <li key={slip.id}>
+            <p><strong>#{slip.id}:</strong> {slip.advice}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default FavouriteSlipsList

src/sections/Advice/index.jsx

@@ -1,9 +1,41 @@
+import { useState, useEffect } from 'react'
+import AdviceSlip from './components/AdviceSlip'
+import FavouriteSlipsList from './components/FavouriteSlipsList'
+
 function AdviceSection() {
+  const [currentAdvice, setCurrentAdvice] = useState(null)
+  const [favouriteSlips, setFavouriteSlips] = useState([])
+
+  const fetchAdvice = () => {
+    fetch(`https://api.adviceslip.com/advice?timestamp=${Date.now()}`)
+      .then(response => response.json())
+      .then(data => setCurrentAdvice(data.slip))
+      .catch(error => console.error('Error fetching advice:', error))
+  }
+
+  const saveToFavourites = () => {
+    if (currentAdvice && !favouriteSlips.some(slip => slip.id === currentAdvice.id)) {
+      setFavouriteSlips([...favouriteSlips, currentAdvice])
+    }
+  }
+
+  useEffect(() => {
+    fetchAdvice()
+  }, [])
+
   return (
     <section>
       <h2>Advice Section</h2>
-      <section className="adivce-slip"></section>
-      <section className="favourtite-slips-list"></section>
+      <section className="advice-slip">
+        <AdviceSlip
+          advice={currentAdvice}
+          onGetNewAdvice={fetchAdvice}
+          onSaveToFavourites={saveToFavourites}
+        />
+      </section>
+      <section className="favourite-slips-list">
+        <FavouriteSlipsList favouriteSlips={favouriteSlips} />
+      </section>
     </section>
   )
 }

src/sections/Art/components/ArtList.jsx

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

src/sections/Art/components/ArtListItem.jsx

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

src/sections/Art/components/PublicationHistoryList.jsx

@@ -1 +1,11 @@
+function PublicationHistoryList({ publications }) {
+  return (
+    <ul>
+      {publications.map((publication, index) => (
+        <li key={index}>{publication}</li>
+      ))}
+    </ul>
+  )
+}
 
+export default PublicationHistoryList

src/sections/Art/index.jsx

@@ -1,8 +1,21 @@
+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(response => response.json())
+      .then(data => setArtworks(data))
+  }, [])
+
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <ArtList artworks={artworks} />
+      </div>
     </section>
   )
 }

src/sections/Users/components/UsersList.jsx

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

src/sections/Users/components/UsersListItem.jsx

@@ -0,0 +1,14 @@
+function UsersListItem({ user }) {
+  const gravatarUrl = `https://www.gravatar.com/avatar/${user.email}?s=120&d=identicon`
+  const fullName = `${user.title} ${user.firstName} ${user.lastName}`
+
+  return (
+    <li style={{ background: user.favouriteColour }}>
+      <img src={gravatarUrl} alt={fullName} />
+      <h3>{fullName}</h3>
+      <p>Email: {user.email}</p>
+    </li>
+  )
+}
+
+export default UsersListItem

src/sections/Users/index.jsx

@@ -1,8 +1,22 @@
+import { useState, useEffect } from 'react'
+import UsersList from './components/UsersList'
+
 function UsersSection() {
+  const [users, setUsers] = useState([])
+
+  useEffect(() => {
+    fetch('https://boolean-uk-api-server.fly.dev/davidstern/contact')
+      .then(response => response.json())
+      .then(data => setUsers(data))
+      .catch(error => console.error('Error fetching users:', error))
+  }, [])
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <UsersList users={users} />
+      </div>
     </section>
   )
 }