fix: hide featured songs section if the weekly timespan is empty

Author: Bentroen

web/src/modules/browse/components/HomePageComponent.tsx

@@ -31,33 +31,37 @@ export const HomePageComponent = () => {
       <WelcomeBanner />
 
       {/* FEATURED SONGS */}
-      <div className='flex flex-wrap justify-between gap-6 text-nowrap'>
-        <h2 className='flex-1 text-xl uppercase'>Featured songs</h2>
-        <TimespanButtonGroup />
-      </div>
-      <div className='h-6' />
-      <Carousel
-        opts={{
-          align: 'start',
-          loop: false,
-          duration: 15,
-        }}
-      >
-        <CarouselContent className='-ml-4'>
-          {featuredSongsPage.map((song, i) => (
-            <CarouselItem
-              className='basis-full md:basis-1/2 lg:basis-1/3 min-w-0 shrink-0 grow-0 pl-4'
-              key={i}
-            >
-              <SongCard song={song} />
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-        <CarouselDots />
-      </Carousel>
-      <hr className='my-8 border-none bg-zinc-700 h-[3px]' />
+      {featuredSongsPage.length > 0 && (
+        <>
+          <div className='flex flex-wrap justify-between gap-6 text-nowrap'>
+            <h2 className='flex-1 text-xl uppercase'>Featured songs</h2>
+            <TimespanButtonGroup />
+          </div>
+          <div className='h-6' />
+          <Carousel
+            opts={{
+              align: 'start',
+              loop: false,
+              duration: 15,
+            }}
+          >
+            <CarouselContent className='-ml-4'>
+              {featuredSongsPage.map((song, i) => (
+                <CarouselItem
+                  className='basis-full md:basis-1/2 lg:basis-1/3 min-w-0 shrink-0 grow-0 pl-4'
+                  key={i}
+                >
+                  <SongCard song={song} />
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
+            <CarouselDots />
+          </Carousel>
+          <hr className='my-8 border-none bg-zinc-700 h-[3px]' />
+        </>
+      )}
 
       {/* RECENT SONGS */}
       <div className='flex flex-row flex-wrap justify-between items-center gap-4 mb-2'>