fix: Replace ~ banner with news carousel in topmenu.

Author: apoorvapendse

packages/components/TopMenu/TopMenuHighlightedNews.tsx

@@ -1,37 +1,80 @@
-import React from "react";
-import { Image } from "react-native";
+import React, { useEffect, useRef } from "react";
+import { TouchableOpacity, View } from "react-native";
+import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
 
 import { TopMenuSection } from "./TopMenuSection";
-import { useBanners } from "../../hooks/marketing/useBanners";
+import chevronLeftSVG from "../../../assets/icons/chevron-left.svg";
+import chevronRightSVG from "../../../assets/icons/chevron-right.svg";
 import { useSelectedNetworkId } from "../../hooks/useSelectedNetwork";
-import { web3ToWeb2URI } from "../../utils/ipfs";
-import FlexCol from "../FlexCol";
-import { Link } from "../Link";
-import { PrimaryBox } from "../boxes/PrimaryBox";
+import { FullWidthSeparator } from "../FullWidthSeparator";
+import { SVG } from "../SVG";
+import { Section } from "../Section";
+import { NewsBox } from "../hub/NewsBox";
 
-export const TopMenuHighlightedNews: React.FC = () => {
+import { News } from "@/api/marketplace/v1/marketplace";
+import { useNews } from "@/hooks/marketing/useNews";
+import { fontSemibold10, fontSemibold14 } from "@/utils/style/fonts";
+
+export const SmallNewsCarouselSection: React.FC = () => {
+  const width = 298;
+  const carouselRef = useRef<ICarouselInstance | null>(null);
+  const renderItem = (props: { item: News }) => (
+    <NewsBox
+      news={props.item}
+      imageHeight={210}
+      imageWidth={210}
+      titleTextStyle={fontSemibold14}
+      subtitleTextStyle={fontSemibold10}
+      boxWidth={298}
+    />
+  );
   const networkId = useSelectedNetworkId();
-  const banners = useBanners(networkId);
-  const banner = banners?.length ? banners[0] : undefined;
+  const news = useNews(networkId);
+
+  const topRightChild = (
+    <View style={{ flexDirection: "row", alignItems: "center" }}>
+      <TouchableOpacity
+        onPress={() => carouselRef.current?.prev()}
+        style={{ marginRight: 24 }}
+      >
+        <SVG width={16} height={16} source={chevronLeftSVG} />
+      </TouchableOpacity>
+
+      <TouchableOpacity onPress={() => carouselRef.current?.next()}>
+        <SVG width={16} height={16} source={chevronRightSVG} />
+      </TouchableOpacity>
+    </View>
+  );
+
+  useEffect(() => {
+    carouselRef.current?.next();
+  }, [width]);
 
+  return (
+    <Section topRightChild={topRightChild}>
+      {/*TODO: Async fetchMore for these data ?*/}
+
+      <Carousel
+        width={width}
+        data={news || []}
+        ref={carouselRef}
+        onConfigurePanGesture={(g) => g.enableTrackpadTwoFingerGesture(true)}
+        height={650}
+        pagingEnabled
+        loop
+        autoPlay
+        autoPlayInterval={3000}
+        renderItem={renderItem}
+      />
+      <FullWidthSeparator />
+    </Section>
+  );
+};
+
+export const TopMenuHighlightedNews: React.FC = () => {
   return (
     <TopMenuSection title="Highlighted News">
-      <FlexCol>
-        <Link to={banner?.url || ""}>
-          <PrimaryBox>
-            <Image
-              source={{
-                uri: web3ToWeb2URI(banner?.image),
-              }}
-              style={{
-                height: 94,
-                width: 298,
-                borderRadius: 7,
-              }}
-            />
-          </PrimaryBox>
-        </Link>
-      </FlexCol>
+      <SmallNewsCarouselSection />
     </TopMenuSection>
   );
 };

packages/components/hub/NewsBox.tsx

@@ -1,6 +1,12 @@
 import { useLinkTo } from "@react-navigation/native";
 import React, { useCallback } from "react";
-import { Image, Linking, useWindowDimensions, View } from "react-native";
+import {
+  Image,
+  Linking,
+  TextStyle,
+  useWindowDimensions,
+  View,
+} from "react-native";
 
 import { News } from "../../api/marketplace/v1/marketplace";
 import { web3ToWeb2URI } from "../../utils/ipfs";
@@ -19,8 +25,16 @@ const breakPoint = 768;
 
 export const NewsBox: React.FC<{
   news: News;
-}> = ({ news }) => {
-  const { width } = useWindowDimensions();
+  imageHeight?: number;
+  imageWidth?: number;
+  titleTextStyle?: TextStyle;
+  subtitleTextStyle?: TextStyle;
+  boxWidth?: number;
+}> = ({ news, imageHeight, imageWidth, titleTextStyle, boxWidth }) => {
+  let { width } = useWindowDimensions();
+  if (boxWidth) {
+    width = boxWidth;
+  }
   const linkTo = useLinkTo();
   const navigateTo = useCallback(
     (to: string | undefined) => {
@@ -44,6 +58,7 @@ export const NewsBox: React.FC<{
         borderBottomColor: neutral33,
         paddingHorizontal: 10,
         paddingVertical: 20,
+        display: "flex",
       }}
     >
       <View
@@ -64,7 +79,10 @@ export const NewsBox: React.FC<{
           ]}
         >
           <View>
-            <GradientText gradientType="blueExtended" style={fontSemibold28}>
+            <GradientText
+              gradientType="blueExtended"
+              style={titleTextStyle || fontSemibold28}
+            >
               {news.title}
             </GradientText>
             <BrandText style={fontSemibold20}>{news.subtitle}</BrandText>
@@ -114,8 +132,8 @@ export const NewsBox: React.FC<{
           <Image
             source={{ uri: web3ToWeb2URI(news.image) }}
             style={{
-              height: 342,
-              width: 342,
+              height: imageHeight || 342,
+              width: imageWidth || 342,
               aspectRatio: 1,
               borderRadius: 10,
             }}