Featured section initial.

builtincomp
lianahus 2 years ago committed by Aniket
parent 21016b16d7
commit 7a7be3acad
  1. 65
      libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx
  2. 39
      libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx
  3. 5
      libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.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>
)
}

@ -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}
renderDotsOutside={false}
responsive={{ desktop: { breakpoint: { max: 3000, min: 1024 }, items: 4} }}
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>

@ -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>

Loading…
Cancel
Save