Unfloyded/misskey-tools
0
0
Fork 0
Code Activity

ようこそページの大改修

Browse source
This commit is contained in:
xeltica 2021-10-08 01:01:16 +09:00
parent 4ca11b55b8
commit 0c971c3dc8
2 changed files with 48 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/frontend/pages/index.welcome.tsx
View file

@ -1,16 +1,23 @@
import React from 'react';
import React, { useMemo } from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Ranking } from '../components/Ranking';
import { LoginForm } from '../components/LoginForm';
import { DeveloperInfo } from '../components/DeveloperInfo';
import { HashtagTimeline } from '../components/HashtagTimeline';
import { Header } from '../components/Header';
export const IndexWelcomePage: React.VFC = () => {
const {t} = useTranslation();
const example = useMemo(() => (
t('_template.default')
.replace('{notesCount}', '32000')
.replace('{notesDelta}', '+190')
.replace('{followingCount}', '510')
.replace('{followingDelta}', '+3')
.replace('{followersCount}', '1020')
.replace('{followersDelta}', '-1')
.replace('{url}', 'https://misskey.tools')
), []);
return (
<>
<Header>
@ -20,20 +27,29 @@ export const IndexWelcomePage: React.VFC = () => {
</article>
<LoginForm />
</Header>
<article className="xarticle card ghost">
<div className="body">
<h1 className="mb-1">{t('_missHai.ranking')}</h1>
<Ranking limit={10} />
<Link to="/ranking">{t('_missHai.showAll')}</Link>
</div>
</article>
<article className="xarticle mt-4 row">
<div className="col-12 pc-6 card ghost">
<div className="body"><DeveloperInfo/></div>
</div>
<div className="col-12 pc-6 card ghost">
<div className="body"><HashtagTimeline hashtag="misshaialert"/></div>
</div>
<article className="xarticle vstack pa-2">
<header>
<h2>{t('_welcome.title')}</h2>
<p>{t('_welcome.description')}</p>
</header>
<article>
<h3>{t('_welcome.misshaiAlertTitle')}</h3>
<p>{t('_welcome.misshaiAlertDescription')}</p>
<div className="card ma-2 shadow-2" style={{maxWidth: 320}}>
<div className="body">
<pre>{example}</pre>
</div>
</div>
</article>
<article>
<h3 className="mb-1">{t('_missHai.ranking')}</h3>
<p>{t('_welcome.misshaiRankingDescription')}</p>
<Link to="/ranking">{t('_missHai.showRanking')}</Link>
</article>
<article>
<h3>{t('_welcome.nextFeaturesTitle')}</h3>
<p>{t('_welcome.nextFeaturesDescription')}</p>
</article>
</article>
</>
);