48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { withNamespaces, WithNamespaces } from 'react-i18next';
|
|
import SubmitIcon from 'static/images/guide-submit.svg';
|
|
import ReviewIcon from 'static/images/guide-review.svg';
|
|
import CommunityIcon from 'static/images/guide-community.svg';
|
|
import CompleteIcon from 'static/images/guide-complete.svg';
|
|
import './Guide.less';
|
|
|
|
const HomeGuide: React.SFC<WithNamespaces> = ({ t }) => {
|
|
const items = [
|
|
{
|
|
text: t('home.guide.submit'),
|
|
icon: <SubmitIcon />,
|
|
},
|
|
{
|
|
text: t('home.guide.review'),
|
|
icon: <ReviewIcon />,
|
|
},
|
|
{
|
|
text: t('home.guide.community'),
|
|
icon: <CommunityIcon />,
|
|
},
|
|
{
|
|
text: t('home.guide.complete'),
|
|
icon: <CompleteIcon />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="HomeGuide" id="home-guide">
|
|
<svg className="HomeGuide-cap" viewBox="0 0 100 100" preserveAspectRatio="none">
|
|
<polygon points="100 0, 100 100, 0 100" />
|
|
</svg>
|
|
<h2 className="HomeGuide-title">{t('home.guide.title')}</h2>
|
|
<div className="HomeGuide-items">
|
|
{items.map((item, idx) => (
|
|
<div className="HomeGuide-items-item" key={idx}>
|
|
<div className="HomeGuide-items-item-text">{item.text}</div>
|
|
<div className="HomeGuide-items-item-icon">{item.icon}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default withNamespaces()(HomeGuide);
|