feat: implement CardsLayout component for enhanced card display

Author: medyo

src/components/Layout/AppContentLayout.tsx

@@ -1,38 +1,13 @@
-import { useState } from 'react'
-import { DesktopBreakpoint } from 'src/providers/DesktopBreakpoint'
-import { MobileBreakpoint } from 'src/providers/MobileBreakpoint'
 import { useUserPreferences } from 'src/stores/preferences'
 import { lazyImport } from 'src/utils/lazyImport'
-import { BottomNavigation } from '../Elements'
-import { DesktopCards } from './DesktopCards'
-import { MobileCards } from './MobileCards'
-import { ScrollCardsNavigator } from './ScrollCardsNavigator'
 const { Feed } = lazyImport(() => import('src/features/feed'), 'Feed')
+const { CardsLayout } = lazyImport(() => import('./CardsLayout'), 'CardsLayout')
 
 export const AppContentLayout = () => {
-  const { cards, userCustomCards, layout } = useUserPreferences()
-  const [selectedCard, setSelectedCard] = useState(cards[0])
-
+  const { layout } = useUserPreferences()
   return (
     <>
-      <main className="AppContent">
-        {layout === 'grid' ? (
-          <Feed />
-        ) : (
-          <>
-            <ScrollCardsNavigator />
-            <DesktopBreakpoint>
-              <DesktopCards cards={cards} userCustomCards={userCustomCards} />
-            </DesktopBreakpoint>
-            <MobileBreakpoint>
-              <div className="Cards HorizontalScroll">
-                <MobileCards selectedCard={selectedCard} />
-              </div>
-            </MobileBreakpoint>
-            <BottomNavigation selectedCard={selectedCard} setSelectedCard={setSelectedCard} />
-          </>
-        )}
-      </main>
+      <main className="AppContent">{layout === 'grid' ? <Feed /> : <CardsLayout />}</main>
     </>
   )
 }

src/components/Layout/CardsLayout.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react'
+import { DesktopBreakpoint } from 'src/providers/DesktopBreakpoint'
+import { MobileBreakpoint } from 'src/providers/MobileBreakpoint'
+import { useUserPreferences } from 'src/stores/preferences'
+import { BottomNavigation } from '../Elements'
+import { DesktopCards } from './DesktopCards'
+import { MobileCards } from './MobileCards'
+import { ScrollCardsNavigator } from './ScrollCardsNavigator'
+
+export const CardsLayout = () => {
+  const { cards, userCustomCards } = useUserPreferences()
+  const [selectedCard, setSelectedCard] = useState(cards[0])
+  return (
+    <>
+      <ScrollCardsNavigator />
+      <DesktopBreakpoint>
+        <DesktopCards cards={cards} userCustomCards={userCustomCards} />
+      </DesktopBreakpoint>
+      <MobileBreakpoint>
+        <div className="Cards HorizontalScroll">
+          <MobileCards selectedCard={selectedCard} />
+        </div>
+      </MobileBreakpoint>
+      <BottomNavigation selectedCard={selectedCard} setSelectedCard={setSelectedCard} />
+    </>
+  )
+}