diff --git a/src/interface/components/store/header.tsx b/src/interface/components/store/header.tsx index 9cd935ba..98becb93 100644 --- a/src/interface/components/store/header.tsx +++ b/src/interface/components/store/header.tsx @@ -4,8 +4,10 @@ import logoDark from '../../../resources/icons/betterseqta-light-full.png'; export default function header({ searchTerm, setSearchTerm }: { searchTerm: string, setSearchTerm: (value: string) => void }) { return
- - +
setSearchTerm('')}> + + +
{ const [coverThemes, setCoverThemes] = useState([]); useEffect(() => { - fetch('https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes.json') + fetch('https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes.json', { cache: 'no-store' }) .then(response => response.json()) .then((data: ThemesResponse) => { setGridThemes(data.themes); @@ -41,7 +41,7 @@ const Store = () => { useEffect(() => { setFilteredThemes(gridThemes.filter(theme => - theme.name.toLowerCase().includes(searchTerm.toLowerCase()) + theme.name.toLowerCase().includes(searchTerm.toLowerCase()) || theme.description.toLowerCase().includes(searchTerm.toLowerCase()) )); }, [searchTerm, gridThemes]); @@ -65,10 +65,12 @@ const Store = () => { ref={swiperCover} spaceBetween={20} slidesPerView={1} + loop={true} className='w-full aspect-[8/3]' modules={[Autoplay]} autoplay={{ delay: 5000, + stopOnLastSlide: false, disableOnInteraction: false, pauseOnMouseEnter: true }} @@ -113,7 +115,7 @@ const Store = () => {
{filteredThemes.map((theme, index) => (
-
+
@@ -136,7 +138,14 @@ const Store = () => {
))} +
+ {filteredThemes.length == 0 && ( +
+

That doesnt exist! 😭😭😭

+

Sorry, we couldn’t find the theme you’re looking for. Maybe... you could create it?

+
+ )}