diff --git a/src/components/Discover/index.tsx b/src/components/Discover/index.tsx index 1c24f3d87..83dc21272 100644 --- a/src/components/Discover/index.tsx +++ b/src/components/Discover/index.tsx @@ -4,6 +4,7 @@ import type { MovieResult, TvResult } from '../../../server/models/Search'; import TitleCard from '../TitleCard'; import { MediaRequest } from '../../../server/entity/MediaRequest'; import RequestCard from '../TitleCard/RequestCard'; +import Slider from '../Slider'; interface MovieDiscoverResult { page: number; @@ -40,34 +41,18 @@ const Discover: React.FC = () => { -
- {requests?.map((request) => ( -
- -
+ ( + ))} - {!requests && - !requestError && - [...Array(10)].map((_item, i) => ( -
- -
- ))} - {requests && !requestError && requests.length === 0 && ( -
- No Requests found :( -
- )} -
+ />

@@ -75,39 +60,25 @@ const Discover: React.FC = () => {

-
- {movieData?.results.map((title) => ( -
- -
+ ( + ))} - {!movieData && - !movieError && - [...Array(10)].map((_item, i) => ( -
- -
- ))} -
+ />

@@ -115,39 +86,25 @@ const Discover: React.FC = () => {

-
- {tvData?.results.map((title) => ( -
- -
+ ( + ))} - {!tvData && - !tvError && - [...Array(10)].map((_item, i) => ( -
- -
- ))} -
+ /> ); }; diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx new file mode 100644 index 000000000..19fb8c055 --- /dev/null +++ b/src/components/Slider/index.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import TitleCard from '../TitleCard'; + +interface SliderProps { + key: string; + items?: JSX.Element[]; + isLoading: boolean; + isEmpty: boolean; +} + +const Slider: React.FC = ({ key, items, isLoading, isEmpty }) => { + return ( +
+ {items?.map((item, index) => ( +
+ {item} +
+ ))} + {isLoading && + [...Array(10)].map((_item, i) => ( +
+ +
+ ))} + {isEmpty && ( +
No Results
+ )} +
+ ); +}; + +export default Slider;