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 ( + + logo + + + {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);