Added logic for slideshow picker.

This commit is contained in:
moonstar-x 2023-06-02 13:09:19 -05:00
parent a02da77739
commit 729a7fcb4e
5 changed files with 52 additions and 6 deletions

View File

@ -1,3 +1,22 @@
.picker { .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;
} }

View File

@ -1,11 +1,23 @@
import React from 'react'; import React from 'react';
import './PickerItem.css'; import './PickerItem.css';
const PickerItem = () => { const PickerItem = ({ subreddit }) => {
return ( const href = Array.isArray(subreddit) ?
<div className="picker"> `/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>
); );
}; };

View File

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

View File

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

View File

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