drafish
2 years ago
commit
898fb99625
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 639 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 552 KiB |
|
After Width: | Height: | Size: 972 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
@ -0,0 +1,14 @@ |
|||||||
|
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||||
|
import React from 'react' |
||||||
|
|
||||||
|
function CustomButtonGroupAsArrows ({ next, previous }) { |
||||||
|
return ( |
||||||
|
<div style={{ textAlign: "center" }}> |
||||||
|
<h4>These buttons can be positioned anywhere you want on the screen</h4> |
||||||
|
<button onClick={previous}>Prev</button> |
||||||
|
<button onClick={next}>Next</button> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default CustomButtonGroupAsArrows |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||||
|
import React from 'react' |
||||||
|
|
||||||
|
const CustomNavButtons = ({ next, previous, goToSlide, ...rest }) => { |
||||||
|
const { carouselState: { currentSlide, totalItems } } = rest |
||||||
|
return ( |
||||||
|
<div className="mt-1 d-flex justify-content-end carousel-button-group"> |
||||||
|
<button className={currentSlide === 0 ? 'disable py-1 border btn' : 'py-1 border btn'} onClick={() => previous()}> |
||||||
|
<i className="fas fa-angle-left"></i> |
||||||
|
</button> |
||||||
|
<button className={currentSlide + 1 === totalItems ? 'disable py-1 border btn' : 'py-1 border btn'} onClick={() => { |
||||||
|
if (currentSlide + 1 < totalItems) goToSlide(currentSlide + 1) |
||||||
|
}} > |
||||||
|
<i className="fas fa-angle-right"></i> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default CustomNavButtons |
||||||
@ -0,0 +1,73 @@ |
|||||||
|
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||||
|
import React, { useEffect, useState, useRef, useContext } 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 themeFilter = useContext(ThemeContext) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
return () => { |
||||||
|
} |
||||||
|
}, []) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="pt-3 pl-2" id="hTFeaturedeSection"> |
||||||
|
<label style={{ fontSize: "1.2rem" }}>Featured</label> |
||||||
|
<div className="mb-2"> |
||||||
|
<div className="w-100 d-flex flex-column" style={{ height: "200px" }}> |
||||||
|
<ThemeContext.Provider value={ themeFilter }> |
||||||
|
<Carousel |
||||||
|
customButtonGroup={<CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} />} |
||||||
|
arrows={false} |
||||||
|
swipeable={false} |
||||||
|
draggable={true} |
||||||
|
showDots={true} |
||||||
|
responsive={{ desktop: { breakpoint: { max: 2000, min: 1024 }, items: 1 } }} |
||||||
|
renderDotsOutside={true} |
||||||
|
ssr={true} // means to render carousel on server-side.
|
||||||
|
infinite={true} |
||||||
|
centerMode={false} |
||||||
|
autoPlay={true} |
||||||
|
keyBoardControl={true} |
||||||
|
containerClass="border carousel-container" |
||||||
|
sliderClass="px-2 h-100 justify-content-between" |
||||||
|
deviceType={"desktop"} |
||||||
|
itemClass="px-2 carousel-item-padding-10-px" |
||||||
|
autoPlaySpeed={15000} |
||||||
|
dotListClass="position-relative mt-2" |
||||||
|
> |
||||||
|
<div className="d-flex"> |
||||||
|
<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"}}> |
||||||
|
<h5>JUMP INTO WEB3</h5> |
||||||
|
<span>The Remix Project is a rich toolset which can be used for the entire journey of contract development by users of any knowledge level, and as a learning lab for teaching and experimenting with Ethereum.</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="d-flex"> |
||||||
|
<img src={"/assets/img/remixRewardUser.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img> |
||||||
|
<div className="h6 p-4" style={{ flex: "1"}}> |
||||||
|
<h5>REMIX REWARDS</h5> |
||||||
|
<p style={{fontStyle: 'italic'}}>NFTs for our users!</p> |
||||||
|
<span>Remix Project rewards contributors, beta testers, and UX research participants with NFTs deployed on Optimism. Remix Reward holders are able to mint a second “Remixer” user NFT badge to give to any other user of their choice</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="d-flex"> |
||||||
|
<img src={"/assets/img/remixRewardBetaTester.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img> |
||||||
|
<div className="h6 p-4" style={{ flex: "1"}}> |
||||||
|
<h5>BETA TESTING</h5> |
||||||
|
<p style={{fontStyle: 'italic'}}>Our community supports us.</p> |
||||||
|
<span>You can join Beta Testing before each release of Remix IDE. Help us test now and get a handle on new features!</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Carousel> |
||||||
|
</ThemeContext.Provider> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default HomeTabFeatured |
||||||
@ -0,0 +1,125 @@ |
|||||||
|
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||||
|
import React, { useEffect, useState, useRef, useContext } from 'react' |
||||||
|
import PluginButton from './pluginButton' |
||||||
|
import { ThemeContext, themes } from '../themeContext' |
||||||
|
import Carousel from 'react-multi-carousel' |
||||||
|
import 'react-multi-carousel/lib/styles.css' |
||||||
|
import CustomNavButtons from './customNavButtons' |
||||||
|
declare global { |
||||||
|
interface Window { |
||||||
|
_paq: any |
||||||
|
} |
||||||
|
} |
||||||
|
const _paq = window._paq = window._paq || [] //eslint-disable-line
|
||||||
|
|
||||||
|
interface HomeTabFeaturedPluginsProps { |
||||||
|
plugin: any |
||||||
|
} |
||||||
|
|
||||||
|
function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) { |
||||||
|
|
||||||
|
const themeFilter = useContext(ThemeContext) |
||||||
|
const carouselRef = useRef(null) |
||||||
|
|
||||||
|
// Todo doesn't work
|
||||||
|
useEffect(() => { |
||||||
|
window.addEventListener("scroll", handleScroll) |
||||||
|
return () => { |
||||||
|
window.removeEventListener("scroll", handleScroll) |
||||||
|
} |
||||||
|
}, []) |
||||||
|
|
||||||
|
const handleScroll = (e) => { |
||||||
|
} |
||||||
|
|
||||||
|
const startSolidity = async () => { |
||||||
|
await plugin.appManager.activatePlugin(['solidity', 'udapp', 'solidityStaticAnalysis', 'solidityUnitTesting']) |
||||||
|
plugin.verticalIcons.select('solidity') |
||||||
|
_paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solidity']) |
||||||
|
} |
||||||
|
const startStarkNet = async () => { |
||||||
|
await plugin.appManager.activatePlugin('starkNet_compiler') |
||||||
|
plugin.verticalIcons.select('starkNet_compiler') |
||||||
|
_paq.push(['trackEvent', 'pluginManager', 'userActivate', 'starkNet_compiler']) |
||||||
|
} |
||||||
|
const startSolhint = async () => { |
||||||
|
await plugin.appManager.activatePlugin(['solidity', 'solhint']) |
||||||
|
plugin.verticalIcons.select('solhint') |
||||||
|
_paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solhint']) |
||||||
|
} |
||||||
|
const startSourceVerify = async () => { |
||||||
|
await plugin.appManager.activatePlugin(['solidity', 'sourcify']) |
||||||
|
plugin.verticalIcons.select('sourcify') |
||||||
|
_paq.push(['trackEvent', 'pluginManager', 'userActivate', 'sourcify']) |
||||||
|
}
|
||||||
|
const startSolidityUnitTesting = async () => { |
||||||
|
await plugin.appManager.activatePlugin(['solidity', 'solidityUnitTesting']) |
||||||
|
plugin.verticalIcons.select('solidityUnitTesting') |
||||||
|
_paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solidityUnitTesting']) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="pl-2 w-100" id="hTFeaturedPlugins"> |
||||||
|
<label className="" style={{fontSize: "1.2rem"}}>Featured Plugins</label> |
||||||
|
<div className="w-100 d-flex flex-column"> |
||||||
|
<ThemeContext.Provider value={ themeFilter }> |
||||||
|
<Carousel
|
||||||
|
ref={carouselRef} |
||||||
|
focusOnSelect |
||||||
|
customButtonGroup={<CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} />} |
||||||
|
arrows={false} |
||||||
|
swipeable={false} |
||||||
|
draggable={true} |
||||||
|
showDots={false} |
||||||
|
responsive={{ desktop: { breakpoint: { max: 3000, min: 1024 }, items: 5} }} |
||||||
|
renderButtonGroupOutside={true} |
||||||
|
ssr={true} // means to render carousel on server-side.
|
||||||
|
keyBoardControl={true} |
||||||
|
containerClass="carousel-container" |
||||||
|
deviceType={"desktop"} |
||||||
|
itemClass="w-100" |
||||||
|
> |
||||||
|
<PluginButton |
||||||
|
imgPath="assets/img/solidityLogo.webp" |
||||||
|
envID="solidityLogo" |
||||||
|
envText="Solidity" |
||||||
|
description="Compile, test and analyse smart contract." |
||||||
|
remixMaintained={true} |
||||||
|
callback={() => startSolidity()} |
||||||
|
/> |
||||||
|
<PluginButton |
||||||
|
imgPath="assets/img/starkNetLogo.webp" |
||||||
|
envID="starkNetLogo" |
||||||
|
envText="StarkNet" |
||||||
|
description="Compile and deploy contracts with Cairo, a native language for StarkNet." |
||||||
|
l2={true} |
||||||
|
callback={() => startStarkNet()} |
||||||
|
/> |
||||||
|
<PluginButton |
||||||
|
imgPath="assets/img/solhintLogo.webp" |
||||||
|
envID="solhintLogo" envText="Solhint linter" |
||||||
|
description="Solhint is an open source project for linting Solidity code." |
||||||
|
callback={() => startSolhint()} |
||||||
|
/> |
||||||
|
<PluginButton |
||||||
|
imgPath="assets/img/sourcifyNewLogo.webp" |
||||||
|
envID="sourcifyLogo" |
||||||
|
envText="Sourcify" |
||||||
|
description="Solidity contract and metadata verification service." |
||||||
|
callback={() => startSourceVerify()} |
||||||
|
/> |
||||||
|
<PluginButton |
||||||
|
imgPath="assets/img/unitTesting.webp" |
||||||
|
envID="sUTLogo" |
||||||
|
envText="Solidity unit testing" |
||||||
|
description="Write and run unit tests for your contracts in Solidity." |
||||||
|
callback={() => startSolidityUnitTesting()} |
||||||
|
/> |
||||||
|
</Carousel> |
||||||
|
</ThemeContext.Provider> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default HomeTabFeaturedPlugins |
||||||
@ -0,0 +1,161 @@ |
|||||||
|
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||||
|
import React, { useState, useRef, useReducer } from 'react' |
||||||
|
import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
|
||||||
|
import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
|
||||||
|
|
||||||
|
interface HomeTabFileProps { |
||||||
|
plugin: any |
||||||
|
} |
||||||
|
|
||||||
|
const loadingInitialState = { |
||||||
|
tooltip: '', |
||||||
|
showModalDialog: false, |
||||||
|
importSource: '' |
||||||
|
} |
||||||
|
|
||||||
|
const loadingReducer = (state = loadingInitialState, action) => { |
||||||
|
return { ...state, tooltip: action.tooltip, showModalDialog: false, importSource: '' } |
||||||
|
} |
||||||
|
|
||||||
|
function HomeTabFile ({plugin}: HomeTabFileProps) { |
||||||
|
const [state, setState] = useState<{ |
||||||
|
searchInput: string, |
||||||
|
showModalDialog: boolean, |
||||||
|
modalInfo: { title: string, loadItem: string, examples: Array<string> }, |
||||||
|
importSource: string, |
||||||
|
toasterMsg: string |
||||||
|
}>({ |
||||||
|
searchInput: '', |
||||||
|
showModalDialog: false, |
||||||
|
modalInfo: { title: '', loadItem: '', examples: [] }, |
||||||
|
importSource: '', |
||||||
|
toasterMsg: '' |
||||||
|
}) |
||||||
|
|
||||||
|
const [, dispatch] = useReducer(loadingReducer, loadingInitialState) |
||||||
|
|
||||||
|
const inputValue = useRef(null) |
||||||
|
|
||||||
|
const processLoading = () => { |
||||||
|
const contentImport = plugin.contentImport |
||||||
|
const workspace = plugin.fileManager.getProvider('workspace') |
||||||
|
contentImport.import( |
||||||
|
state.importSource, |
||||||
|
(loadingMsg) => dispatch({ tooltip: loadingMsg }), |
||||||
|
async (error, content, cleanUrl, type, url) => { |
||||||
|
if (error) { |
||||||
|
toast(error.message || error) |
||||||
|
} else { |
||||||
|
try { |
||||||
|
if (await workspace.exists(type + '/' + cleanUrl)) toast('File already exists in workspace') |
||||||
|
else { |
||||||
|
workspace.addExternal(type + '/' + cleanUrl, content, url) |
||||||
|
plugin.call('menuicons', 'select', 'filePanel') |
||||||
|
}
|
||||||
|
} catch (e) { |
||||||
|
toast(e.message) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
) |
||||||
|
setState(prevState => { |
||||||
|
return { ...prevState, showModalDialog: false, importSource: '' } |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const toast = (message: string) => { |
||||||
|
setState(prevState => { |
||||||
|
return { ...prevState, toasterMsg: message } |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const createNewFile = async () => { |
||||||
|
plugin.verticalIcons.select('filePanel') |
||||||
|
await plugin.call('filePanel', 'createNewFile') |
||||||
|
} |
||||||
|
|
||||||
|
const uploadFile = async (target) => { |
||||||
|
await plugin.call('filePanel', 'uploadFile', target) |
||||||
|
} |
||||||
|
|
||||||
|
const connectToLocalhost = () => { |
||||||
|
plugin.appManager.activatePlugin('remixd') |
||||||
|
} |
||||||
|
const importFromGist = () => { |
||||||
|
plugin.call('gistHandler', 'load', '') |
||||||
|
plugin.verticalIcons.select('filePanel') |
||||||
|
} |
||||||
|
|
||||||
|
const showFullMessage = (title: string, loadItem: string, examples: Array<string>) => { |
||||||
|
setState(prevState => { |
||||||
|
return { ...prevState, showModalDialog: true, modalInfo: { title: title, loadItem: loadItem, examples: examples } } |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const hideFullMessage = () => { //eslint-disable-line
|
||||||
|
setState(prevState => { |
||||||
|
return { ...prevState, showModalDialog: false, importSource: '' } |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const examples = state.modalInfo.examples.map((urlEl, key) => (<div key={key} className="p-1 user-select-auto"><a>{urlEl}</a></div>)) |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<ModalDialog |
||||||
|
id='homeTab' |
||||||
|
title={ 'Import from ' + state.modalInfo.title } |
||||||
|
okLabel='Import' |
||||||
|
hide={ !state.showModalDialog } |
||||||
|
handleHide={ () => hideFullMessage() } |
||||||
|
okFn={ () => processLoading() } |
||||||
|
> |
||||||
|
<div className="p-2 user-select-auto"> |
||||||
|
{ state.modalInfo.loadItem !== '' && <span>Enter the { state.modalInfo.loadItem } you would like to load.</span> } |
||||||
|
{ state.modalInfo.examples.length !== 0 && |
||||||
|
<> |
||||||
|
<div>e.g</div> |
||||||
|
<div> |
||||||
|
{ examples } |
||||||
|
</div> |
||||||
|
</> } |
||||||
|
<input |
||||||
|
ref={inputValue} |
||||||
|
type='text' |
||||||
|
name='prompt_text' |
||||||
|
id='inputPrompt_text' |
||||||
|
className="w-100 mt-1 form-control" |
||||||
|
data-id="homeTabModalDialogCustomPromptText" |
||||||
|
value={state.importSource} |
||||||
|
onInput={(e) => { |
||||||
|
setState(prevState => { |
||||||
|
return { ...prevState, importSource: inputValue.current.value } |
||||||
|
}) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</ModalDialog> |
||||||
|
<Toaster message={state.toasterMsg} /> |
||||||
|
<div className="justify-content-start mt-1 p-2 border-bottom d-flex flex-column" id="hTFileSection"> |
||||||
|
<label style={{fontSize: "1rem"}}>Files</label> |
||||||
|
<button className="btn btn-primary p-2 border my-1" data-id="homeTabNewFile" style={{width: 'fit-content'}} onClick={() => createNewFile()}>New File</button> |
||||||
|
<label className="btn p-2 border my-1" style={{width: 'fit-content'}} htmlFor="openFileInput">Open File</label> |
||||||
|
<input title="open file" type="file" id="openFileInput" onChange={(event) => { |
||||||
|
event.stopPropagation() |
||||||
|
plugin.verticalIcons.select('filePanel') |
||||||
|
uploadFile(event.target) |
||||||
|
}} multiple /> |
||||||
|
<button className="btn p-2 border my-1" style={{width: 'fit-content'}} onClick={() => connectToLocalhost()}>Connect to Localhost</button> |
||||||
|
<label className="pt-2">Load From</label> |
||||||
|
<div className="d-flex"> |
||||||
|
<button className="btn p-2 border mr-2" data-id="landingPageImportFromGitHubButton" onClick={() => showFullMessage('GitHub', 'github URL', ['https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol', 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol'])}>GitHub</button> |
||||||
|
<button className="btn p-2 border mr-2" data-id="landingPageImportFromGistButton" onClick={() => importFromGist()}>Gist</button> |
||||||
|
<button className="btn p-2 border mr-2" onClick={() => showFullMessage('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}>IPFS</button>
|
||||||
|
<button className="btn p-2 border" onClick={() => showFullMessage('Https', 'http/https raw content', ['https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-contracts/master/contracts/token/ERC20/ERC20.sol'])}>HTTPS</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default HomeTabFile |
||||||
@ -0,0 +1,88 @@ |
|||||||
|
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||||
|
import React, { useEffect, useState, useRef, useContext } from 'react' |
||||||
|
import { ThemeContext, themes } from '../themeContext' |
||||||
|
import Carousel from 'react-multi-carousel' |
||||||
|
import WorkspaceTemplate from './workspaceTemplate' |
||||||
|
import 'react-multi-carousel/lib/styles.css' |
||||||
|
import CustomNavButtons from './customNavButtons' |
||||||
|
declare global { |
||||||
|
interface Window { |
||||||
|
_paq: any |
||||||
|
} |
||||||
|
} |
||||||
|
const _paq = window._paq = window._paq || [] //eslint-disable-line
|
||||||
|
|
||||||
|
interface HomeTabGetStartedProps { |
||||||
|
plugin: any |
||||||
|
} |
||||||
|
|
||||||
|
function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) { |
||||||
|
const themeFilter = useContext(ThemeContext) |
||||||
|
|
||||||
|
const createWorkspace = async (templateName) => { |
||||||
|
await plugin.appManager.activatePlugin('filePanel') |
||||||
|
const timeStamp = Date.now() |
||||||
|
await plugin.call('filePanel', 'createWorkspace', templateName + "_" + timeStamp, templateName) |
||||||
|
await plugin.call('filePanel', 'setWorkspace', templateName + "_" + timeStamp) |
||||||
|
plugin.verticalIcons.select('filePanel') |
||||||
|
_paq.push(['trackEvent', 'homeGetStarted', templateName]) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="pl-2" id="hTGetStartedSection"> |
||||||
|
<label style={{fontSize: "1.2rem"}}> |
||||||
|
<span className="mr-2" style={{fontWeight: "bold"}}> |
||||||
|
Get Started |
||||||
|
</span> |
||||||
|
- Project Templates |
||||||
|
</label> |
||||||
|
<div className="w-100 d-flex flex-column"> |
||||||
|
<ThemeContext.Provider value={ themeFilter }> |
||||||
|
<Carousel
|
||||||
|
focusOnSelect |
||||||
|
customButtonGroup={<CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} />} |
||||||
|
arrows={false} |
||||||
|
swipeable={false} |
||||||
|
draggable={true} |
||||||
|
showDots={false} |
||||||
|
responsive={{ desktop: { breakpoint: { max: 3000, min: 1024 }, items: 5} }} |
||||||
|
renderButtonGroupOutside={true} |
||||||
|
ssr={true} // means to render carousel on server-side.
|
||||||
|
keyBoardControl={true} |
||||||
|
containerClass="carousel-container" |
||||||
|
deviceType={"desktop"} |
||||||
|
itemClass="w-100" |
||||||
|
> |
||||||
|
<WorkspaceTemplate |
||||||
|
gsID="starkNetLogo" |
||||||
|
workspaceTitle="Blank" |
||||||
|
description="Create an empty workspace." |
||||||
|
callback={() => createWorkspace("blank")} /> |
||||||
|
<WorkspaceTemplate |
||||||
|
gsID="solhintLogo" |
||||||
|
workspaceTitle="Remix Default" |
||||||
|
description="Create a workspace with sample files." |
||||||
|
callback={() => createWorkspace("remixDefault")} /> |
||||||
|
<WorkspaceTemplate |
||||||
|
gsID="sourcifyLogo" |
||||||
|
workspaceTitle="OpenZeppelin ERC20" |
||||||
|
description="Create an ERC20 token by importing OpenZeppelin library." |
||||||
|
callback={() => createWorkspace("ozerc20")} /> |
||||||
|
<WorkspaceTemplate |
||||||
|
gsID="sUTLogo" |
||||||
|
workspaceTitle="OpenZeppelin ERC721" |
||||||
|
description="Create an NFT token by importing OpenZeppelin library." |
||||||
|
callback={() => createWorkspace("ozerc721")} /> |
||||||
|
<WorkspaceTemplate |
||||||
|
gsID="sUTLogo" |
||||||
|
workspaceTitle="0xProject ERC20" |
||||||
|
description="Create an ERC20 token by importing 0xProject contract." |
||||||
|
callback={() => createWorkspace("zeroxErc20")} /> |
||||||
|
</Carousel> |
||||||
|
</ThemeContext.Provider> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default HomeTabGetStarted |
||||||
@ -0,0 +1,76 @@ |
|||||||
|
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||||
|
import React, { useEffect, useState, useContext } from 'react' |
||||||
|
import { ThemeContext } from '../themeContext' |
||||||
|
declare global { |
||||||
|
interface Window { |
||||||
|
_paq: any |
||||||
|
} |
||||||
|
} |
||||||
|
const _paq = window._paq = window._paq || [] //eslint-disable-line
|
||||||
|
|
||||||
|
enum VisibleTutorial { |
||||||
|
Basics, |
||||||
|
Intermediate, |
||||||
|
Advanced |
||||||
|
} |
||||||
|
interface HomeTabLearnProps { |
||||||
|
plugin: any |
||||||
|
} |
||||||
|
|
||||||
|
function HomeTabLearn ({plugin}: HomeTabLearnProps) { |
||||||
|
const [state, setState] = useState<{ |
||||||
|
visibleTutorial: VisibleTutorial |
||||||
|
}>({ |
||||||
|
visibleTutorial: VisibleTutorial.Basics |
||||||
|
}) |
||||||
|
|
||||||
|
const themeFilter = useContext(ThemeContext) |
||||||
|
|
||||||
|
const openLink = () => { |
||||||
|
window.open("https://remix-ide.readthedocs.io/en/latest/remix_tutorials_learneth.html?highlight=learneth#learneth-tutorial-repos", '_blank') |
||||||
|
} |
||||||
|
|
||||||
|
const startLearnEthTutorial = async (tutorial) => { |
||||||
|
await plugin.appManager.activatePlugin(['solidity', 'LearnEth', 'solidityUnitTesting']) |
||||||
|
plugin.call('LearnEth', 'startTutorial', 'ethereum/remix-workshops', 'master', tutorial) |
||||||
|
plugin.verticalIcons.select('LearnEth') |
||||||
|
_paq.push(['trackEvent', 'homeTab', 'startLearnEthTutorial', tutorial]) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="d-flex px-2 pb-2 pt-2 d-flex flex-column" id="hTLearnSection"> |
||||||
|
<div className="d-flex justify-content-between"> |
||||||
|
<label className="py-2 align-self-center m-0" style={{fontSize: "1.2rem"}}>Learn</label> |
||||||
|
<button |
||||||
|
onClick={ ()=> openLink()} |
||||||
|
className="h-100 px-2 pt-0 btn" |
||||||
|
> |
||||||
|
<img className="align-self-center" src="assets/img/learnEthLogo.webp" alt="" style={ { filter: themeFilter.filter, width: "1rem", height: "1ren" } } /> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div className="d-flex flex-column"> |
||||||
|
<button className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Basics }})}> |
||||||
|
<label className="float-left" style={{fontSize: "1rem"}}>Remix Basics</label> |
||||||
|
{(state.visibleTutorial === VisibleTutorial.Basics) && <div className="pt-2 d-flex flex-column text-left"> |
||||||
|
<span>Introduction to Remix's interface and concepts used in Ethereum, as well as the basics of Solidity.</span> |
||||||
|
<button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('basics')}>Get Started</button> |
||||||
|
</div>} |
||||||
|
</button> |
||||||
|
<button className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Intermediate }})}> |
||||||
|
<label className="float-left" style={{fontSize: "1rem"}}>Remix Intermediate</label> |
||||||
|
{(state.visibleTutorial === VisibleTutorial.Intermediate) && <div className="pt-2 d-flex flex-column text-left">Using the web3.js to interact with a contract. Using Recorder tool. |
||||||
|
<button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('useofweb3js')}>Get Started</button> |
||||||
|
</div>} |
||||||
|
</button> |
||||||
|
<button className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Advanced }})}> |
||||||
|
<label className="float-left" style={{fontSize: "1rem"}}>Remix Advanced</label> |
||||||
|
{(state.visibleTutorial === VisibleTutorial.Advanced) && <div className="pt-2 d-flex flex-column text-left">Learn the Proxy Pattern and working with Libraries in Remix. Learn to use the Debugger. |
||||||
|
<button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('deploylibraries')}>Get Started</button> |
||||||
|
</div>} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default HomeTabLearn |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||||
|
import React from 'react' |
||||||
|
|
||||||
|
function HomeTabScamAlert () { |
||||||
|
return ( |
||||||
|
<div className="" id="hTScamAlertSection"> |
||||||
|
<label className="pl-2 text-danger" style={{fontSize: "1.2rem"}}>Scam Alert</label> |
||||||
|
<div className="py-2 ml-2 mb-1 align-self-end mb-2 d-flex flex-column border border-danger"> |
||||||
|
<span className="pl-4 mt-2"> |
||||||
|
<i className="pr-2 text-danger fas fa-exclamation-triangle"></i> |
||||||
|
<b>Scam Alerts:</b> |
||||||
|
</span> |
||||||
|
<span className="pl-4 mt-1"> |
||||||
|
The only URL Remix uses is remix.ethereum.org
|
||||||
|
</span> |
||||||
|
<span className="pl-4 mt-1">
|
||||||
|
Beware of online videos promoting "liquidity front runner bots":
|
||||||
|
<a className="pl-2 remixui_home_text" target="__blank" href="https://medium.com/remix-ide/remix-in-youtube-crypto-scams-71c338da32d">Learn more</a> |
||||||
|
</span> |
||||||
|
<span className="pl-4 mt-1"> |
||||||
|
Additional safety tips: <a className="remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/security.html">here</a> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default HomeTabScamAlert |
||||||
@ -0,0 +1,148 @@ |
|||||||
|
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||||
|
// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
|
||||||
|
import BasicLogo from 'libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo' |
||||||
|
import { ThemeContext } from '../themeContext' |
||||||
|
import React, { useEffect, useState, useRef, useContext } from 'react' |
||||||
|
import { OverlayTrigger, Tooltip } from 'react-bootstrap'// eslint-disable-line
|
||||||
|
|
||||||
|
function HomeTabTitle() { |
||||||
|
useEffect(() => { |
||||||
|
document.addEventListener("keyup", (e) => handleSearchKeyDown(e)) |
||||||
|
return () => { |
||||||
|
document.removeEventListener("keyup", handleSearchKeyDown) |
||||||
|
} |
||||||
|
}, []) |
||||||
|
const [state, setState] = useState<{ |
||||||
|
searchDisable: boolean |
||||||
|
}>({ |
||||||
|
searchDisable: true |
||||||
|
}) |
||||||
|
|
||||||
|
const themeFilter = useContext(ThemeContext) |
||||||
|
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() |
||||||
|
searchInputRef.current.value = "" |
||||||
|
} else { |
||||||
|
setState(prevState => { |
||||||
|
return { ...prevState, searchDisable: searchInputRef.current.value === "" } |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const openLink = (url = "") => { |
||||||
|
if (url === "") { |
||||||
|
window.open("https://remix-ide.readthedocs.io/en/latest/search.html?q=" + searchInputRef.current.value + "&check_keywords=yes&area=default", '_blank') |
||||||
|
} else { |
||||||
|
window.open(url, '_blank') |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="px-2 pb-2 pt-2 d-flex flex-column border-bottom" id="hTTitleSection"> |
||||||
|
<div className="mr-4 d-flex"> |
||||||
|
<div onClick={() => playRemi()} style={{ filter: themeFilter.filter}} > |
||||||
|
<BasicLogo classList="align-self-end remixui_home_logoImg" solid={false} /> |
||||||
|
</div> |
||||||
|
<audio |
||||||
|
id="remiAudio" |
||||||
|
muted={false} |
||||||
|
src="assets/audio/remiGuitar-single-power-chord-A-minor.wav" |
||||||
|
ref={remiAudioEl} |
||||||
|
></audio> |
||||||
|
</div> |
||||||
|
<div className="d-flex justify-content-between"> |
||||||
|
<span className="h-80 text-uppercase" style={{ fontSize: 'xx-large', fontFamily: "Noah, sans-serif" }}>Remix</span> |
||||||
|
<span> |
||||||
|
<OverlayTrigger placement={'top'} overlay={ |
||||||
|
<Tooltip className="text-nowrap" id="overlay-tooltip"> |
||||||
|
<span className="border bg-light text-dark p-1 pr-3">Remix Youtube Playlist</span> |
||||||
|
</Tooltip> |
||||||
|
}> |
||||||
|
<button |
||||||
|
onClick={() => openLink("https://www.youtube.com/channel/UCjTUPyFEr2xDGN6Cg8nKDaA")} |
||||||
|
className="border-0 h-100 btn fab fa-youtube"> |
||||||
|
</button> |
||||||
|
</OverlayTrigger> |
||||||
|
|
||||||
|
<OverlayTrigger placement={'top'} overlay={ |
||||||
|
<Tooltip className="text-nowrap" id="overlay-tooltip"> |
||||||
|
<span className="border bg-light text-dark p-1 pr-3">Remix Twitter Profile</span> |
||||||
|
</Tooltip> |
||||||
|
}> |
||||||
|
<button |
||||||
|
onClick={() => openLink("https://twitter.com/EthereumRemix")} |
||||||
|
className="border-0 h-100 pl-2 btn fab fa-twitter"> |
||||||
|
</button> |
||||||
|
</OverlayTrigger> |
||||||
|
|
||||||
|
<OverlayTrigger placement={'top'} overlay={ |
||||||
|
<Tooltip className="text-nowrap" id="overlay-tooltip"> |
||||||
|
<span className="border bg-light text-dark p-1 pr-3">Remix Linkedin Profile</span> |
||||||
|
</Tooltip> |
||||||
|
}> |
||||||
|
<button |
||||||
|
onClick={() => openLink("https://www.linkedin.com/company/ethereum-remix/")} |
||||||
|
className="border-0 h-100 pl-2 btn fa fa-linkedin"> |
||||||
|
</button> |
||||||
|
</OverlayTrigger> |
||||||
|
|
||||||
|
<OverlayTrigger placement={'top'} overlay={ |
||||||
|
<Tooltip className="text-nowrap" id="overlay-tooltip"> |
||||||
|
<span className="border bg-light text-dark p-1 pr-3">Remix Medium Posts</span> |
||||||
|
</Tooltip> |
||||||
|
}> |
||||||
|
<button |
||||||
|
onClick={() => openLink("https://medium.com/remix-ide")} |
||||||
|
className="border-0 h-100 pl-2 btn fab fa-medium"> |
||||||
|
</button> |
||||||
|
</OverlayTrigger> |
||||||
|
|
||||||
|
<OverlayTrigger placement={'top'} overlay={ |
||||||
|
<Tooltip className="text-nowrap" id="overlay-tooltip"> |
||||||
|
<span className="border bg-light text-dark p-1 pr-3">Remix Gitter channel</span> |
||||||
|
</Tooltip> |
||||||
|
}> |
||||||
|
<button |
||||||
|
onClick={() => openLink("https://gitter.im/ethereum/remix")} |
||||||
|
className="border-0 h-100 pl-2 btn fab fa-gitter"> |
||||||
|
</button> |
||||||
|
</OverlayTrigger> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<b className="pb-1 text-dark" style={{ fontStyle: 'italic' }}>The Native IDE for Web3 Development.</b> |
||||||
|
<div className="pb-1" id="hTGeneralLinks"> |
||||||
|
<a className="remixui_home_text" target="__blank" href="https://remix-project.org">Website</a> |
||||||
|
<a className="pl-2 remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest">Documentation</a> |
||||||
|
<a className="pl-2 remixui_home_text" target="__blank" href="https://remix-plugin-docs.readthedocs.io/en/latest/">Remix Plugin</a> |
||||||
|
<a className="pl-2 remixui_home_text" target="__blank" href="https://github.com/ethereum/remix-desktop/releases">Remix Desktop</a> |
||||||
|
</div> |
||||||
|
<div className="d-flex pb-1 align-items-center"> |
||||||
|
<input |
||||||
|
ref={searchInputRef} |
||||||
|
type="text" |
||||||
|
className="border form-control border-right-0" |
||||||
|
id="searchInput" |
||||||
|
placeholder="Search Documentation" |
||||||
|
data-id="terminalInputSearch" |
||||||
|
/> |
||||||
|
<button |
||||||
|
className="form-control border d-flex align-items-center p-2 justify-content-center fas fa-search bg-light" |
||||||
|
onClick={(e) => openLink()} |
||||||
|
disabled={state.searchDisable} |
||||||
|
style={{ width: "3rem" }} |
||||||
|
> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default HomeTabTitle |
||||||
@ -1,12 +0,0 @@ |
|||||||
.RSSFeed-item img { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.RSSFeed-item .truncate { |
|
||||||
max-height: 500px; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.RSSFeed-item .more-button { |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,42 +0,0 @@ |
|||||||
import React, { useState, useEffect } from "react"; |
|
||||||
import Parser from "rss-parser"; |
|
||||||
import './rssFeed.css'; |
|
||||||
|
|
||||||
interface RSSFeedProps { |
|
||||||
feedUrl: string, |
|
||||||
maxItems: number, |
|
||||||
} |
|
||||||
|
|
||||||
export function RSSFeed({ feedUrl, maxItems }: RSSFeedProps) { |
|
||||||
const [feed, setFeed] = useState(null); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
const fetchData = async () => { |
|
||||||
const parser = new Parser() |
|
||||||
const feed = await parser.parseURL(feedUrl); |
|
||||||
for (const item of feed.items) { |
|
||||||
item.content = item['content:encoded'] |
|
||||||
item.date = new Date(item.pubDate).toLocaleDateString('en-US', { |
|
||||||
month: 'short', |
|
||||||
day: 'numeric' |
|
||||||
}) |
|
||||||
} |
|
||||||
setFeed(feed); |
|
||||||
}; |
|
||||||
fetchData(); |
|
||||||
}, [feedUrl]); |
|
||||||
|
|
||||||
|
|
||||||
return (<> |
|
||||||
{feed && feed.items.slice(0, maxItems).map((item: any, index: any) => ( |
|
||||||
<div className='RSSFeed-item' key={index}> |
|
||||||
<a target="_blank" href={item.link}><h3>{item.title}</h3></a> |
|
||||||
<p>Author: {item.creator}</p> |
|
||||||
<h4>{item.date}</h4> |
|
||||||
<div className="truncate" dangerouslySetInnerHTML={{ __html: item.content }} /> |
|
||||||
<a className="more-button btn mb-3" target="_blank" href={item.link}>READ MORE</a> |
|
||||||
<hr></hr> |
|
||||||
</div> |
|
||||||
))} |
|
||||||
</>) |
|
||||||
} |
|
||||||
@ -0,0 +1,116 @@ |
|||||||
|
import * as React from "react"; |
||||||
|
export interface ResponsiveType { |
||||||
|
[key: string]: { |
||||||
|
breakpoint: { max: number; min: number }; |
||||||
|
items: number; |
||||||
|
partialVisibilityGutter?: number; // back-ward compatible, because previously there has been a typo
|
||||||
|
paritialVisibilityGutter?: number; |
||||||
|
slidesToSlide?: number; |
||||||
|
}; |
||||||
|
} |
||||||
|
export function isMouseMoveEvent( |
||||||
|
e: React.MouseEvent | React.TouchEvent |
||||||
|
): e is React.MouseEvent { |
||||||
|
return "clientX" && "clientY" in e; |
||||||
|
} |
||||||
|
export interface CarouselProps { |
||||||
|
responsive: ResponsiveType; |
||||||
|
deviceType?: string; |
||||||
|
ssr?: boolean; |
||||||
|
slidesToSlide?: number; |
||||||
|
draggable?: boolean; |
||||||
|
arrows?: boolean; // show or hide arrows.
|
||||||
|
renderArrowsWhenDisabled?: boolean; // Allow for the arrows to have a disabled attribute instead of not showing them
|
||||||
|
swipeable?: boolean; |
||||||
|
removeArrowOnDeviceType?: string | Array<string>; |
||||||
|
children: any; |
||||||
|
customLeftArrow?: React.ReactElement<any> | null; |
||||||
|
customRightArrow?: React.ReactElement<any> | null; |
||||||
|
customDot?: React.ReactElement<any> | null; |
||||||
|
customButtonGroup?: React.ReactElement<any> | null; |
||||||
|
infinite?: boolean; |
||||||
|
minimumTouchDrag?: number; // default 50px. The amount of distance to drag / swipe in order to move to the next slide.
|
||||||
|
afterChange?: (previousSlide: number, state: StateCallBack) => void; // Change callback after sliding everytime. `(previousSlide, currentState) => ...`
|
||||||
|
beforeChange?: (nextSlide: number, state: StateCallBack) => void; // Change callback before sliding everytime. `(previousSlide, currentState) => ...`
|
||||||
|
sliderClass?: string; // Use this to style your own track list.
|
||||||
|
itemClass?: string; // Use this to style your own Carousel item. For example add padding-left and padding-right
|
||||||
|
itemAriaLabel?: string; // Use this to add your own Carousel item aria-label.if it is not defined the child aria label will be applied if the child dont have one than a default empty string will be applied
|
||||||
|
containerClass?: string; // Use this to style the whole container. For example add padding to allow the "dots" or "arrows" to go to other places without being overflown.
|
||||||
|
className?: string; // Use this to style the whole container with styled-components
|
||||||
|
dotListClass?: string; // Use this to style the dot list.
|
||||||
|
keyBoardControl?: boolean; |
||||||
|
centerMode?: boolean; // show previous and next set of items partially
|
||||||
|
autoPlay?: boolean; |
||||||
|
autoPlaySpeed?: number; // default 3000ms
|
||||||
|
showDots?: boolean; |
||||||
|
renderDotsOutside?: boolean; // show dots outside of the container for custom styling.
|
||||||
|
renderButtonGroupOutside?: boolean; // show buttonGroup outside of the container for custom styling.
|
||||||
|
// Show next/previous item partially
|
||||||
|
// partialVisible has to be used in conjunction with the responsive props, details are in documentation.
|
||||||
|
// it shows the next set of items partially, different from centerMode as it shows both.
|
||||||
|
partialVisible?: boolean; |
||||||
|
partialVisbile?: boolean; // old typo - deprecated (will be remove in 3.0)
|
||||||
|
customTransition?: string; |
||||||
|
transitionDuration?: number; |
||||||
|
// if you are using customTransition, make sure to put the duration here.
|
||||||
|
// for example, customTransition="all .5" then put transitionDuration as 500.
|
||||||
|
// this is needed for the resizing to work.
|
||||||
|
focusOnSelect?: boolean; |
||||||
|
additionalTransfrom?: number; // this is only used if you want to add additional transfrom to the current transform
|
||||||
|
pauseOnHover?: boolean; |
||||||
|
shouldResetAutoplay?: boolean; |
||||||
|
rewind?: boolean; |
||||||
|
rewindWithAnimation?: boolean; |
||||||
|
rtl?: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
export type StateCallBack = CarouselInternalState; |
||||||
|
|
||||||
|
export type Direction = "left" | "right" | "" | undefined; |
||||||
|
export type SkipCallbackOptions = |
||||||
|
| boolean |
||||||
|
| { skipBeforeChange?: boolean; skipAfterChange?: boolean }; |
||||||
|
export interface ButtonGroupProps { |
||||||
|
previous?: () => void; |
||||||
|
next?: () => void; |
||||||
|
goToSlide?: (index: number, skipCallbacks?: SkipCallbackOptions) => void; |
||||||
|
carouselState?: StateCallBack; |
||||||
|
} |
||||||
|
export interface ArrowProps { |
||||||
|
onClick?: () => void; |
||||||
|
carouselState?: StateCallBack; |
||||||
|
} |
||||||
|
export interface DotProps { |
||||||
|
index?: number; |
||||||
|
active?: boolean; |
||||||
|
onClick?: () => void; |
||||||
|
carouselState?: StateCallBack; |
||||||
|
} |
||||||
|
|
||||||
|
export interface CarouselInternalState { |
||||||
|
itemWidth: number; |
||||||
|
containerWidth: number; |
||||||
|
slidesToShow: number; |
||||||
|
currentSlide: number; |
||||||
|
totalItems: number; |
||||||
|
domLoaded: boolean; |
||||||
|
deviceType?: string; |
||||||
|
transform: number; |
||||||
|
} |
||||||
|
|
||||||
|
export default class Carousel extends React.Component<CarouselProps> { |
||||||
|
previous: (slidesHavePassed: number) => void; |
||||||
|
next: (slidesHavePassed: number) => void; |
||||||
|
goToSlide: (slide: number, skipCallbacks?: SkipCallbackOptions) => void; |
||||||
|
state: CarouselInternalState; |
||||||
|
setClones: ( |
||||||
|
slidesToShow: number, |
||||||
|
itemWidth?: number, |
||||||
|
forResizing?: boolean |
||||||
|
) => void; // reset carousel in infinite mode.
|
||||||
|
setItemsToShow: (shouldCorrectItemPosition?: boolean) => void; // reset carousel in non-infinite mode.
|
||||||
|
correctClonesPosition: ({ domLoaded }: { domLoaded: boolean }) => void; |
||||||
|
onMove: boolean; |
||||||
|
direction: Direction; |
||||||
|
containerRef: React.RefObject<HTMLDivElement>; |
||||||
|
} |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||||
|
import React, { useContext } from 'react' |
||||||
|
interface WorkspaceTemplateProps { |
||||||
|
gsID: string, |
||||||
|
workspaceTitle: string, |
||||||
|
callback: any, |
||||||
|
description: string, |
||||||
|
} |
||||||
|
|
||||||
|
function WorkspaceTemplate ({ gsID, workspaceTitle, description, callback }: WorkspaceTemplateProps) { |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="d-flex remixui_home_workspaceTemplate"> |
||||||
|
<button |
||||||
|
className="btn border-secondary p-1 d-flex flex-column text-nowrap justify-content-center align-items-center mr-2 remixui_home_workspaceTemplate" |
||||||
|
data-id={'landingPageStart' + gsID} |
||||||
|
onClick={() => callback()} |
||||||
|
> |
||||||
|
<div className="w-100 p-2 h-100 align-items-start d-flex flex-column"> |
||||||
|
<label className="h6 pb-1 text-uppercase text-dark remixui_home_cursorStyle">{workspaceTitle}</label> |
||||||
|
<div className="remixui_home_gtDescription">{description}</div> |
||||||
|
</div> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default WorkspaceTemplate |
||||||
@ -1,12 +1,20 @@ |
|||||||
import React from 'react' |
import React from 'react' |
||||||
|
interface BasicLogoProps { |
||||||
|
classList?: string, |
||||||
|
solid?: boolean |
||||||
|
} |
||||||
|
|
||||||
function BasicLogo () { |
function BasicLogo ({classList = "", solid = true}: BasicLogoProps) { |
||||||
return (<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100"> |
if (solid) { |
||||||
<path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z"/> |
return (<svg id="Ebene_2" className={classList} data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100"> |
||||||
<path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z"/> |
<path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z"/> |
||||||
<path d="M75.68,46.9,82,45a.09.09,0,0,0,.08-.09,29.91,29.91,0,0,0-.87-6.94.11.11,0,0,0-.09-.08l-6.43-.58a.1.1,0,0,1-.06-.18l4.78-4.18a.13.13,0,0,0,0-.12,30.19,30.19,0,0,0-3.65-6.07.09.09,0,0,0-.11,0l-5.91,2a.1.1,0,0,1-.12-.14L72.19,23a.11.11,0,0,0,0-.12,29.86,29.86,0,0,0-5.84-4.13.09.09,0,0,0-.11,0l-4.47,4.13a.1.1,0,0,1-.17-.07l.09-6a.1.1,0,0,0-.07-.1,30.54,30.54,0,0,0-7-1.47.1.1,0,0,0-.1.07l-2.38,5.54a.1.1,0,0,1-.18,0l-2.37-5.54a.11.11,0,0,0-.11-.06,30,30,0,0,0-7,1.48.12.12,0,0,0-.07.1l.08,6.05a.09.09,0,0,1-.16.07L37.8,18.76a.11.11,0,0,0-.12,0,29.75,29.75,0,0,0-5.83,4.13.11.11,0,0,0,0,.12l2.59,5.6a.11.11,0,0,1-.13.14l-5.9-2a.11.11,0,0,0-.12,0,30.23,30.23,0,0,0-3.62,6.08.11.11,0,0,0,0,.12l4.79,4.19a.1.1,0,0,1-.06.17L23,37.91a.1.1,0,0,0-.09.07A29.9,29.9,0,0,0,22,44.92a.1.1,0,0,0,.07.1L28.4,47a.1.1,0,0,1,0,.18l-5.84,3.26a.16.16,0,0,0,0,.11,30.17,30.17,0,0,0,2.1,6.76c.32.71.67,1.4,1,2.08a.1.1,0,0,0,.06,0L52,68.16H52l26.34-8.78a.1.1,0,0,0,.06-.05,30.48,30.48,0,0,0,3.11-8.88.1.1,0,0,0-.05-.11l-5.83-3.26A.1.1,0,0,1,75.68,46.9Z"/> |
<path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z"/> |
||||||
</svg> |
<path d="M75.68,46.9,82,45a.09.09,0,0,0,.08-.09,29.91,29.91,0,0,0-.87-6.94.11.11,0,0,0-.09-.08l-6.43-.58a.1.1,0,0,1-.06-.18l4.78-4.18a.13.13,0,0,0,0-.12,30.19,30.19,0,0,0-3.65-6.07.09.09,0,0,0-.11,0l-5.91,2a.1.1,0,0,1-.12-.14L72.19,23a.11.11,0,0,0,0-.12,29.86,29.86,0,0,0-5.84-4.13.09.09,0,0,0-.11,0l-4.47,4.13a.1.1,0,0,1-.17-.07l.09-6a.1.1,0,0,0-.07-.1,30.54,30.54,0,0,0-7-1.47.1.1,0,0,0-.1.07l-2.38,5.54a.1.1,0,0,1-.18,0l-2.37-5.54a.11.11,0,0,0-.11-.06,30,30,0,0,0-7,1.48.12.12,0,0,0-.07.1l.08,6.05a.09.09,0,0,1-.16.07L37.8,18.76a.11.11,0,0,0-.12,0,29.75,29.75,0,0,0-5.83,4.13.11.11,0,0,0,0,.12l2.59,5.6a.11.11,0,0,1-.13.14l-5.9-2a.11.11,0,0,0-.12,0,30.23,30.23,0,0,0-3.62,6.08.11.11,0,0,0,0,.12l4.79,4.19a.1.1,0,0,1-.06.17L23,37.91a.1.1,0,0,0-.09.07A29.9,29.9,0,0,0,22,44.92a.1.1,0,0,0,.07.1L28.4,47a.1.1,0,0,1,0,.18l-5.84,3.26a.16.16,0,0,0,0,.11,30.17,30.17,0,0,0,2.1,6.76c.32.71.67,1.4,1,2.08a.1.1,0,0,0,.06,0L52,68.16H52l26.34-8.78a.1.1,0,0,0,.06-.05,30.48,30.48,0,0,0,3.11-8.88.1.1,0,0,0-.05-.11l-5.83-3.26A.1.1,0,0,1,75.68,46.9Z"/> |
||||||
) |
</svg> |
||||||
|
) |
||||||
|
} else { |
||||||
|
return (<img className="" src="assets/img/remix_logo_light.webp" style={{height: "3rem"}} alt=""></img>) |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
export default BasicLogo |
export default BasicLogo |
||||||
Loading…
Reference in new issue