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:
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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>
|
||||
);
|
||||
|
@@ -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';
|
||||
|
Reference in New Issue
Block a user