Featured section initial.

libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx

@@ -1,36 +1,22 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useEffect, useState, useRef } from 'react'
+import { ThemeContext, themes } from '../themeContext'
+import Carousel from 'react-multi-carousel'
+import 'react-multi-carousel/lib/styles.css'
+import CustomNavButtons from './customNavButtons'
 
 function HomeTabFeatured () {
   const [state, setState] = useState<{
-    searchInput: string
+    themeQuality: { filter: string, name: string },
   }>({
-    searchInput: ''
+    themeQuality: themes.light,
   })
+
   useEffect(() => {
-    document.addEventListener("keyup", (e) => handleSearchKeyDown(e))
     return () => {
-      document.removeEventListener("keyup", handleSearchKeyDown)
     }
   }, [])
 
-  const searchInputRef = useRef(null)
-  const remiAudioEl = useRef(null)
-
-  const playRemi = async () => {
-    remiAudioEl.current.play()
-  }
-  const handleSearchKeyDown = (e: KeyboardEvent) => {
-    if (e.target !== searchInputRef.current) return
-    if (e.key === "Enter") {
-      openLink()
-      setState(prevState => {
-        return { ...prevState, searchInput: '' }
-      })
-      searchInputRef.current.value = ""
-    }
-  }
-
   const openLink = (url = "") => {
     if (url === "") {
       window.open("https://remix-ide.readthedocs.io/en/latest/search.html?q=" + state.searchInput + "&check_keywords=yes&area=default", '_blank')
@@ -40,9 +26,42 @@ function HomeTabFeatured () {
   }
 
   return (
-    <div className="pt-4" id="hTFeaturedeSection">
+    <div className="pt-4 pl-2" id="hTFeaturedeSection">
       <label style={{fontSize: "1.2rem"}}>Featured</label>
-      <div className="border"></div>
+      <div className=" mb-4">
+        <div className="w-100 d-flex flex-column" style={{height: "230px"}}>
+          <ThemeContext.Provider value={ state.themeQuality }>
+            <Carousel 
+              customButtonGroup={<CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} />}
+              arrows={false}
+              swipeable={false}
+              draggable={true}
+              showDots={true}
+              responsive={{ desktop: { breakpoint: { max: 3000, min: 1024 }, items: 1} }}
+              renderDotsOutside={true}
+              ssr={true} // means to render carousel on server-side.
+              infinite={true}
+              autoPlay={true}
+              keyBoardControl={true}
+              containerClass="border carousel-container"
+              deviceType={"desktop"}
+              itemClass="p-2 carousel-item-padding-10-px"
+              autoPlaySpeed={10000}
+              dotListClass="position-relative mt-2"
+            >
+              <div>
+                <img src={"assets/img/solidityLogo.webp"} style={{width: "300px", height:"200px"}} alt="" ></img>
+              </div><div>
+                <img src={"assets/img/bgRemi.webp"} alt="" ></img>
+              </div><div>
+                <img src={"assets/img/homeStickers.png"} alt="" ></img>blablabla
+              </div><div>
+                <img src={"assets/img/solidityLogo.webp"} alt="" ></img>blablabla
+              </div>
+            </Carousel>
+          </ThemeContext.Provider>
+        </div>
+      </div>
     </div>
   )
 }

libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx

@@ -19,10 +19,8 @@ interface  HomeTabFeaturedPluginsProps {
 function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
   const [state, setState] = useState<{
     themeQuality: { filter: string, name: string },
-    showMediaPanel: 'none' | 'twitter' | 'medium'
   }>({
     themeQuality: themes.light,
-    showMediaPanel: 'none'
   })
 
   const startSolidity = async () => {
@@ -53,40 +51,9 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
   const startPluginManager = async () => {
     plugin.verticalIcons.select('pluginManager')
   }
-  const responsive = {
-    desktop: {
-      breakpoint: { max: 3000, min: 1024 },
-      items: 4,
-      slidesToSlide: 3 // optional, default to 1.
-    },
-    tablet: {
-      breakpoint: { max: 1024, min: 464 },
-      items: 2,
-      slidesToSlide: 2 // optional, default to 1.
-    },
-    mobile: {
-      breakpoint: { max: 464, min: 0 },
-      items: 1,
-      slidesToSlide: 1 // optional, default to 1.
-    }
-  };
-
-  const CustomNavButtons = ({ next, previous, goToSlide, ...rest }) => {
-    const { carouselState: { currentSlide } } = rest;
-    return (
-      <div className="d-flex justify-content-end carousel-button-group">
-        <button className={currentSlide === 0 ? 'disable py-0 border btn' : 'py-0 border btn'} onClick={() => previous()}>
-          <i className="fas fa-angle-left"></i>
-        </button>
-        <button className="py-0 border btn" onClick={() => next()} >
-          <i className="fas fa-angle-right"></i>
-        </button>
-      </div>
-    );
-  };
   
   return (
-    <div className="w-100" id="hTFeaturedPlugins">
+    <div className="pl-2 w-100" id="hTFeaturedPlugins">
       <label className="pl-2" style={{fontSize: "1.2rem"}}>Featured Plugins</label>
       <div className="w-100 d-flex flex-column">
         <ThemeContext.Provider value={ state.themeQuality }>
@@ -96,8 +63,7 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
             swipeable={false}
             draggable={true}
             showDots={false}
-            responsive={responsive}
+            responsive={{ desktop: { breakpoint: { max: 3000, min: 1024 }, items: 4} }}
-            renderDotsOutside={false}
             renderButtonGroupOutside={true}
             ssr={true} // means to render carousel on server-side.
             infinite={false}
@@ -112,7 +78,6 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
             <PluginButton imgPath="assets/img/sourcifyNewLogo.webp" envID="sourcifyLogo" envText="Sourcify" description="Solidity contract and metadata verification service." callback={() => startSourceVerify()} />
             <PluginButton imgPath="assets/img/moreLogo.webp" envID="moreLogo" envText="Plugin Manager" description="Discover more plugins." callback={startPluginManager} />
           </Carousel>
-            
         </ThemeContext.Provider>
       </div>
     </div>

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useRef, useEffect, useReducer } from 'react' // eslint-disable-line
 
 import './remix-ui-home-tab.css'
-import PluginButton from './components/pluginButton' // eslint-disable-line
 import { ThemeContext, themes } from './themeContext'
 import { RSSFeed } from './components/rssFeed'
 import BasicLogo from 'libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo'
@@ -77,14 +76,14 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
   
   return (
     <div className="d-flex flex-row w-100" id="remixUIHTAll">
-      <div className="px-2 justify-content-between d-flex border-right flex-column" id="remixUIHTLeft" style={{flex: 2, minWidth: "30%"}}>
+      <div className="px-2 pl-3 justify-content-between d-flex border-right flex-column" id="remixUIHTLeft" style={{flex: 2, minWidth: "35%"}}>
         <HomeTabTitle />
         <HomeTabFile plugin={plugin} />
         <ThemeContext.Provider value={ state.themeQuality }>
           <HomeTabLearn plugin={plugin}/>
         </ThemeContext.Provider>
       </div>
-      <div className="pl-2 pr-3 justify-content-between d-flex flex-column" style={{width: "70%"}} id="remixUIHTRight">
+      <div className="pl-2 pr-3 justify-content-between d-flex flex-column" style={{width: "65%"}} id="remixUIHTRight">
         <HomeTabFeatured></HomeTabFeatured>
         <HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>
         <HomeTabGetStarted></HomeTabGetStarted>