diff --git a/src/components/PickerItem/PickerItem.css b/src/components/PickerItem/PickerItem.css
index 0e26f91..f8cbe84 100644
--- a/src/components/PickerItem/PickerItem.css
+++ b/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;
}
diff --git a/src/components/PickerItem/PickerItem.js b/src/components/PickerItem/PickerItem.js
index 6afdb17..e0bb0a4 100644
--- a/src/components/PickerItem/PickerItem.js
+++ b/src/components/PickerItem/PickerItem.js
@@ -1,11 +1,23 @@
import React from 'react';
import './PickerItem.css';
-const PickerItem = () => {
- return (
-
+const PickerItem = ({ subreddit }) => {
+ const href = Array.isArray(subreddit) ?
+ `/r/${subreddit.join('+')}` :
+ `/r/${subreddit}`;
-
+ const text = Array.isArray(subreddit) ?
+ `Multireddit for: ${subreddit.map((s) => `r/${s}`).join(', ')}` :
+ `r/${subreddit}`;
+
+ return (
+
+
+
+
+ {text}
+
+
);
};
diff --git a/src/components/SlideshowPicker/SlideshowPicker.css b/src/components/SlideshowPicker/SlideshowPicker.css
index 11be4b3..343bbed 100644
--- a/src/components/SlideshowPicker/SlideshowPicker.css
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/src/components/SlideshowPicker/SlideshowPicker.js b/src/components/SlideshowPicker/SlideshowPicker.js
index d7cf019..d638564 100644
--- a/src/components/SlideshowPicker/SlideshowPicker.js
+++ b/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 (
- {JSON.stringify(settings)}
+ {
+ settings.slideshows.map((subreddit, idx) => (
+
+ ))
+ }
);
};
diff --git a/src/hooks/fetch.js b/src/hooks/fetch.js
index 825e171..d38e06a 100644
--- a/src/hooks/fetch.js
+++ b/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);