pull/5370/head
lianahus 2 years ago committed by Aniket
parent decd6b77d0
commit 52840a9a86
  1. 15
      libs/remix-ui/home-tab/src/lib/components/customButtonGroupDots.tsx
  2. 2
      libs/remix-ui/home-tab/src/lib/components/customNavButtons.tsx
  3. 20
      libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx

@ -1,15 +0,0 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import React from 'react'
const CustomButtonGroupDots = ({ next, previous, goToSlide, ...rest }) => {
const { carouselState: { currentSlide, totalItems } } = rest
return (
<div style={{ textAlign: "center" }}>
<button onClick={() => goToSlide(currentSlide - 1)}></button>
<button onClick={() => goToSlide(currentSlide + 1)}></button>
</div>
)
}
export default CustomButtonGroupDots

@ -3,8 +3,6 @@ import React from 'react'
const CustomNavButtons = ({ parent, next, previous, goToSlide, ...rest }) => { const CustomNavButtons = ({ parent, next, previous, goToSlide, ...rest }) => {
const { carouselState: { currentSlide, totalItems, containerWidth, transform } } = rest const { carouselState: { currentSlide, totalItems, containerWidth, transform } } = rest
console.log("REST ", rest)
console.log("parent ", parent)
return ( return (
<div className="mt-1 d-flex justify-content-end carousel-button-group"> <div className="mt-1 d-flex justify-content-end carousel-button-group">
<button <button

@ -3,17 +3,11 @@ import React, { useEffect, useState, useRef, useContext } from 'react'
import { ThemeContext, themes } from '../themeContext' import { ThemeContext, themes } from '../themeContext'
import Carousel from 'react-multi-carousel' import Carousel from 'react-multi-carousel'
import 'react-multi-carousel/lib/styles.css' import 'react-multi-carousel/lib/styles.css'
import CustomButtonGroupDots from './customButtonGroupDots'
const _paq = window._paq = window._paq || [] // eslint-disable-line const _paq = window._paq = window._paq || [] // eslint-disable-line
function HomeTabFeatured() { function HomeTabFeatured() {
const themeFilter = useContext(ThemeContext) const themeFilter = useContext(ThemeContext)
useEffect(() => {
return () => {
}
}, [])
return ( return (
<div className="pt-3 pl-2" id="hTFeaturedeSection"> <div className="pt-3 pl-2" id="hTFeaturedeSection">
<label style={{ fontSize: "1.2rem" }}>Featured</label> <label style={{ fontSize: "1.2rem" }}>Featured</label>
@ -21,7 +15,6 @@ function HomeTabFeatured() {
<div className="w-100 d-flex flex-column" style={{ height: "200px" }}> <div className="w-100 d-flex flex-column" style={{ height: "200px" }}>
<ThemeContext.Provider value={themeFilter}> <ThemeContext.Provider value={themeFilter}>
<Carousel <Carousel
customButtonGroup={<CustomButtonGroupDots next={undefined} previous={undefined} goToSlide={undefined} />}
arrows={false} arrows={false}
swipeable={false} swipeable={false}
draggable={true} draggable={true}
@ -30,17 +23,18 @@ function HomeTabFeatured() {
renderDotsOutside={true} renderDotsOutside={true}
ssr={true} // means to render carousel on server-side. ssr={true} // means to render carousel on server-side.
infinite={true} infinite={true}
partialVisible={false}
centerMode={false} centerMode={false}
autoPlay={true} autoPlay={true}
keyBoardControl={true} keyBoardControl={true}
containerClass="border carousel-container" containerClass="border w-full carousel-container"
sliderClass="px-2 h-100 justify-content-between" sliderClass="h-100 justify-content-between"
deviceType={"desktop"} deviceType={"desktop"}
itemClass="px-2 carousel-item-padding-10-px" itemClass=""
autoPlaySpeed={15000} autoPlaySpeed={15000}
dotListClass="position-relative mt-2" dotListClass="position-relative mt-2"
> >
<div className="d-flex"> <div className="mx-1 px-1 d-flex">
<img src={"assets/img/bgRemi.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img> <img src={"assets/img/bgRemi.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
<div className="h6 w-50 p-4" style={{ flex: "1" }}> <div className="h6 w-50 p-4" style={{ flex: "1" }}>
<h5>JUMP INTO WEB3</h5> <h5>JUMP INTO WEB3</h5>
@ -48,7 +42,7 @@ function HomeTabFeatured() {
<a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'jumpIntoWeb3'])} target="__blank" href="https://remix-project.org">More</a> <a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'jumpIntoWeb3'])} target="__blank" href="https://remix-project.org">More</a>
</div> </div>
</div> </div>
<div className="d-flex"> <div className="mx-1 px-1 d-flex">
<img src={"/assets/img/remixRewardUser.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img> <img src={"/assets/img/remixRewardUser.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
<div className="h6 p-4" style={{ flex: "1" }}> <div className="h6 p-4" style={{ flex: "1" }}>
<h5>REMIX REWARDS</h5> <h5>REMIX REWARDS</h5>
@ -59,7 +53,7 @@ function HomeTabFeatured() {
<a className="remixui_home_text" target="__blank" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'remixRewards'])} href="https://rewards.remix.ethereum.eth.limo">More</a> <a className="remixui_home_text" target="__blank" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'remixRewards'])} href="https://rewards.remix.ethereum.eth.limo">More</a>
</div> </div>
</div> </div>
<div className="d-flex"> <div className="mx-1 px-1 d-flex">
<img src={"/assets/img/remixRewardBetaTester.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img> <img src={"/assets/img/remixRewardBetaTester.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
<div className="h6 p-4" style={{ flex: "1" }}> <div className="h6 p-4" style={{ flex: "1" }}>
<h5>BETA TESTING</h5> <h5>BETA TESTING</h5>

Loading…
Cancel
Save