diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 158deb5..0706dd9 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -42,7 +42,8 @@ "slack": "Slack", "spectrum": "Spectrum", "reddit": "Reddit", - "twitter": "Twitter" + "twitter": "Twitter", + "cloudflare": "Cloudflare" }, "showMore": "show more", "title": "Grab a slick name for your new app", diff --git a/src/components/Welcome.tsx b/src/components/Welcome.tsx index 4068a2b..055762a 100644 --- a/src/components/Welcome.tsx +++ b/src/components/Welcome.tsx @@ -12,6 +12,7 @@ import { FaReddit, FaSlack, FaTwitter, + FaCloudflare, } from 'react-icons/fa'; import { IoIosBeer, IoMdAppstore } from 'react-icons/io'; import { MdDomain } from 'react-icons/md'; @@ -52,6 +53,7 @@ const supportedProviders: Record = { heroku: , now: , netlify: , + cloudflare: , s3: , firebase: , jsorg: , diff --git a/src/components/cards/index.tsx b/src/components/cards/index.tsx index c8767a3..b88592a 100644 --- a/src/components/cards/index.tsx +++ b/src/components/cards/index.tsx @@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; import { mobile } from '../../util/css'; import AppStoreCard from './providers/AppStore'; +import CloudflareCard from './providers/Cloudflare'; import CratesioCard from './providers/Cratesio'; import DomainCard from './providers/Domains'; import FirebaseCard from './providers/Firebase'; @@ -50,6 +51,7 @@ const Index: React.FC<{ query: string }> = ({ query }) => { + {/* */} diff --git a/src/components/cards/providers/Cloudflare.tsx b/src/components/cards/providers/Cloudflare.tsx new file mode 100644 index 0000000..d5046c1 --- /dev/null +++ b/src/components/cards/providers/Cloudflare.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { FaCloudflare } from 'react-icons/fa'; +import { normalize } from '../../../util/text'; + +import { Card, Repeater, DedicatedAvailability } from '../core'; + +const CloudflareCard: React.FC<{ query: string }> = ({ query }) => { + const { t } = useTranslation(); + const normalizedQuery = normalize(query, { + alphanumeric: false, + allowUnderscore: false, + }); + const lowerCase = normalizedQuery.toLowerCase(); + + const names = [normalizedQuery]; + const moreNames = [ + `${lowerCase}-web`, + `${lowerCase}-webapp`, + `${lowerCase}-site`, + ]; + + return ( + + + {(name) => ( + } + /> + )} + + + ); +}; + +export default CloudflareCard;