1
0
mirror of https://github.com/uetchy/namae.git synced 2025-08-20 09:58:13 +09:00

feat: new uniqueness indicator

This commit is contained in:
2020-06-20 18:19:05 +09:00
parent 8f3716b4d5
commit 2bb631ee7e
10 changed files with 56 additions and 82 deletions

View File

@@ -129,7 +129,7 @@ const InputView = styled.input.attrs({
border: none;
outline: none;
text-align: center;
font-family: 'Montserrat', monospace;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 6rem;
appearance: none;

View File

@@ -285,11 +285,11 @@ const Items = styled.div`
const Item = styled.div<{delay: number}>`
margin: 10px 10px 0;
padding-bottom: 5px;
cursor: pointer;
font-weight: bold;
font-family: inherit;
font-size: 1.5rem;
line-height: 1em;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 1.4rem;
border-bottom: 1px dashed black;
color: black;
overflow: hidden;

View File

@@ -26,6 +26,32 @@ import {SpectrumIcon, NowIcon, NetlifyIcon, OcamlIcon} from './Icons';
import {mobile} from '../util/css';
import {sendGettingStartedEvent} from '../util/analytics';
const supportedProviders: Record<string, React.ReactNode> = {
domains: <FaMapSigns />,
github: <FaGithub />,
gitlab: <FaGitlab />,
npm: <FaNpm />,
rust: <DiRust />,
pypi: <FaPython />,
rubygems: <FaGem />,
ocaml: <OcamlIcon />,
homebrew: <IoIosBeer />,
linux: <FaLinux />,
twitter: <FaTwitter />,
instagram: <FaInstagram />,
spectrum: <SpectrumIcon />,
slack: <FaSlack />,
heroku: <DiHeroku />,
now: <NowIcon />,
netlify: <NetlifyIcon />,
s3: <FaAws />,
firebase: <DiFirebase />,
jsorg: <FaJsSquare />,
githubSearch: <FaGithub />,
appStore: <FaAppStore />,
nta: <FaBuilding />,
};
const Welcome: React.FC = () => {
const {t} = useTranslation();
@@ -45,75 +71,11 @@ const Welcome: React.FC = () => {
</ButtonContainer>
</Hero>
<HighlightedList>
<ListItem>
<FaMapSigns /> {t('providers.domains')}
</ListItem>
<ListItem>
<FaGithub /> {t('providers.github')}
</ListItem>
<ListItem>
<FaGitlab /> {t('providers.gitlab')}
</ListItem>
<ListItem>
<FaNpm /> {t('providers.npm')}
</ListItem>
<ListItem>
<DiRust /> {t('providers.rust')}
</ListItem>
<ListItem>
<FaPython /> {t('providers.pypi')}
</ListItem>
<ListItem>
<FaGem /> {t('providers.rubygems')}
</ListItem>
<ListItem>
<OcamlIcon /> {t('providers.ocaml')}
</ListItem>
<ListItem>
<IoIosBeer /> {t('providers.homebrew')}
</ListItem>
<ListItem>
<FaLinux /> {t('providers.linux')}
</ListItem>
<ListItem>
<FaTwitter /> {t('providers.twitter')}
</ListItem>
<ListItem>
<FaInstagram /> {t('providers.instagram')}
</ListItem>
<ListItem>
<SpectrumIcon /> {t('providers.spectrum')}
</ListItem>
<ListItem>
<FaSlack /> {t('providers.slack')}
</ListItem>
<ListItem>
<DiHeroku /> {t('providers.heroku')}
</ListItem>
<ListItem>
<NowIcon /> {t('providers.now')}
</ListItem>
<ListItem>
<NetlifyIcon /> {t('providers.netlify')}
</ListItem>
<ListItem>
<FaAws /> {t('providers.s3')}
</ListItem>
<ListItem>
<DiFirebase /> {t('providers.firebase')}
</ListItem>
<ListItem>
<FaJsSquare /> {t('providers.jsorg')}
</ListItem>
<ListItem>
<FaGithub /> {t('providers.githubSearch')}
</ListItem>
<ListItem>
<FaAppStore /> {t('providers.appStore')}
</ListItem>
<ListItem>
<FaBuilding /> {t('providers.nta')}
</ListItem>
{Object.keys(supportedProviders).map((key) => (
<ListItem key={key}>
{supportedProviders[key]} {t(`providers.${key}`)}
</ListItem>
))}
</HighlightedList>
</Container>
);

View File

@@ -2,7 +2,6 @@ import React, {useState, useEffect, Suspense} from 'react';
import styled from 'styled-components';
import useFetch from 'fetch-suspense';
import Tooltip from 'rc-tooltip';
import 'rc-tooltip/assets/bootstrap.css';
import BarLoader from 'react-spinners/BarLoader';
import {GoInfo} from 'react-icons/go';
import {IoIosFlash} from 'react-icons/io';