Added logic for slideshow picker.

src/components/PickerItem/PickerItem.css

@@ -1,3 +1,22 @@
 .picker {
+  width: 100%;
+  display: flex;
+  align-items: center;
 
+  padding: 1rem;
+  text-decoration: none;
+
+  border: 1px solid black;
+  border-radius: 5px;
+  background: #ddd;
+}
+
+.picker img {
+  width: 50px;
+  height: 50px;
+  margin-right: 1em;
+}
+
+.picker span {
+  color: black;
 }

src/components/PickerItem/PickerItem.js

@@ -1,11 +1,23 @@
 import React from 'react';
 import './PickerItem.css';
 
-const PickerItem = () => {
-  return (
-    <div className="picker">
+const PickerItem = ({ subreddit }) => {
+  const href = Array.isArray(subreddit) ?
+    `/r/${subreddit.join('+')}` :
+    `/r/${subreddit}`;
 
-    </div>
+  const text = Array.isArray(subreddit) ?
+    `Multireddit for: ${subreddit.map((s) => `r/${s}`).join(', ')}` :
+    `r/${subreddit}`;
+
+  return (
+    <a className="picker" href={href}>
+      <img src="/android-chrome-256x256.png" alt="logo" />
+
+      <span>
+        {text}
+      </span>
+    </a>
   );
 };
 

src/components/SlideshowPicker/SlideshowPicker.css

@@ -1,3 +1,13 @@
 .container {
+  margin: 5rem 10rem;
 
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
+
+@media screen and (max-width: 768px) {
+  .container {
+    margin: 5rem 10px;
+  }
+}

src/components/SlideshowPicker/SlideshowPicker.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import useFetch from '../../hooks/fetch';
+import PickerItem from '../PickerItem/PickerItem';
 import './SlideshowPicker.css';
 
 const SlideshowPicker = () => {
@@ -23,7 +24,11 @@ const SlideshowPicker = () => {
 
   return (
     <div className="container">
-      {JSON.stringify(settings)}
+      {
+        settings.slideshows.map((subreddit, idx) => (
+          <PickerItem key={idx} subreddit={subreddit} />
+        ))
+      }
     </div>
   );
 };

src/hooks/fetch.js

@@ -10,7 +10,7 @@ const useFetch = (url) => {
 
   const [data, setData] = useState(null);
   const [error, setError] = useState(null);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     setLoading(true);