fix: Replace ~ banner with news carousel in topmenu.

Author: apoorvapendse

packages/components/TopMenu/TopMenuHighlightedNews.tsx

@@ -1,37 +1,75 @@
-import React from "react";
-import { Image } from "react-native";
+import React, { useEffect, useRef } from "react";
+import { Image, TouchableOpacity, View } from "react-native";
 
 import { TopMenuSection } from "./TopMenuSection";
-import { useBanners } from "../../hooks/marketing/useBanners";
 import { useSelectedNetworkId } from "../../hooks/useSelectedNetwork";
-import { web3ToWeb2URI } from "../../utils/ipfs";
-import FlexCol from "../FlexCol";
-import { Link } from "../Link";
-import { PrimaryBox } from "../boxes/PrimaryBox";
+import { useNews } from "@/hooks/marketing/useNews";
+import { News } from "@/api/marketplace/v1/marketplace";
+import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
+import { FullWidthSeparator } from "../FullWidthSeparator";
+import { Section } from "../Section";
+import { NewsBox } from "../hub/NewsBox";
+import { SVG } from "../SVG";
 
-export const TopMenuHighlightedNews: React.FC = () => {
+import chevronLeftSVG from "../../../assets/icons/chevron-left.svg";
+import chevronRightSVG from "../../../assets/icons/chevron-right.svg";
+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 = () => {
+  const networkId = useSelectedNetworkId();
   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,6 @@
 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 +19,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 +52,7 @@ export const NewsBox: React.FC<{
         borderBottomColor: neutral33,
         paddingHorizontal: 10,
         paddingVertical: 20,
+        display:"flex"
       }}
     >
       <View
@@ -64,7 +73,7 @@ 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 +123,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,
             }}