mirror of https://github.com/mue/mue.git
refactor(welcome): Move image to component
This commit is contained in:
parent
6e85da363c
commit
5a0185c574
|
@ -4,7 +4,7 @@ import { MdArrowBackIosNew, MdArrowForwardIos, MdOutlinePreview } from 'react-ic
|
|||
|
||||
import EventBus from 'utils/eventbus';
|
||||
|
||||
import { ProgressBar } from './components/Elements';
|
||||
import { ProgressBar, AsideImage } from './components/Elements';
|
||||
import { Button } from 'components/Elements';
|
||||
import { Wrapper, Panel } from './components/Layout';
|
||||
|
||||
|
@ -24,20 +24,10 @@ class WelcomeModal extends PureComponent {
|
|||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
image: '/src/assets/icons/undraw_celebration.svg',
|
||||
currentTab: 0,
|
||||
finalTab: 5,
|
||||
buttonText: variables.getMessage('modals.welcome.buttons.next'),
|
||||
};
|
||||
this.images = [
|
||||
'/src/assets/icons/undraw_celebration.svg',
|
||||
'/src/assets/icons/undraw_around_the_world_modified.svg',
|
||||
'/src/assets/icons/undraw_add_files_modified.svg',
|
||||
'/src/assets/icons/undraw_dark_mode.svg',
|
||||
'/src/assets/icons/undraw_making_art.svg',
|
||||
'/src/assets/icons/undraw_private_data_modified.svg',
|
||||
'/src/assets/icons/undraw_upgrade_modified.svg',
|
||||
];
|
||||
}
|
||||
|
||||
changeTab(minus) {
|
||||
|
@ -122,12 +112,7 @@ class WelcomeModal extends PureComponent {
|
|||
return (
|
||||
<Wrapper>
|
||||
<Panel type="aside">
|
||||
<img
|
||||
className="showcaseimg"
|
||||
alt="sidebar icon"
|
||||
draggable={false}
|
||||
src={this.state.image}
|
||||
/>
|
||||
<AsideImage currentTab={this.state.currentTab} />
|
||||
<ProgressBar
|
||||
count={this.images}
|
||||
currentTab={this.state.currentTab}
|
||||
|
|
|
@ -0,0 +1,31 @@
|
|||
const images = [
|
||||
'/src/assets/icons/undraw_celebration.svg',
|
||||
'/src/assets/icons/undraw_around_the_world_modified.svg',
|
||||
'/src/assets/icons/undraw_add_files_modified.svg',
|
||||
'/src/assets/icons/undraw_dark_mode.svg',
|
||||
'/src/assets/icons/undraw_making_art.svg',
|
||||
'/src/assets/icons/undraw_private_data_modified.svg',
|
||||
'/src/assets/icons/undraw_upgrade_modified.svg',
|
||||
];
|
||||
|
||||
function AsideImage({ currentTab }) {
|
||||
const altTexts = [
|
||||
'Celebration icon',
|
||||
'Around the world icon',
|
||||
'Add files icon',
|
||||
'Dark mode icon',
|
||||
'Making art icon',
|
||||
'Private data icon',
|
||||
'Upgrade icon',
|
||||
];
|
||||
return (
|
||||
<img
|
||||
className="showcaseimg"
|
||||
alt={altTexts[currentTab]}
|
||||
draggable={false}
|
||||
src={images[currentTab]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { AsideImage as default, AsideImage };
|
|
@ -0,0 +1 @@
|
|||
export * from './AsideImage';
|
|
@ -1 +1,2 @@
|
|||
export * from './ProgressBar';
|
||||
export * from './ProgressBar';
|
||||
export * from './AsideImage';
|
||||
|
|
Loading…
Reference in New Issue