├── .nvmrc
├── .prettierrc
├── static
    ├── images
    │   ├── logo.png
    │   ├── favicon.ico
    │   └── favicon.png
    └── _redirects
├── src
    ├── pages
    │   ├── 404.tsx
    │   └── index.tsx
    └── components
    │   ├── forms
    │       ├── FormHEX.tsx
    │       ├── Input.tsx
    │       └── FormRGB.tsx
    │   ├── Codeblock.tsx
    │   ├── GitHubRibbon.tsx
    │   ├── Footer.tsx
    │   ├── Seo.tsx
    │   ├── Layout.tsx
    │   ├── ColorPicker.tsx
    │   └── Logo.tsx
├── tsconfig.json
├── README.md
├── LICENSE.md
├── .gitignore
├── gatsby-config.js
└── package.json


/.nvmrc:
--------------------------------------------------------------------------------
1 | 10.17.0
2 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | trailingComma: "es5"
2 | tabWidth: 2
3 | semi: true
4 | singleQuote: true
5 | 


--------------------------------------------------------------------------------
/static/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manosim/ui-color/HEAD/static/images/logo.png


--------------------------------------------------------------------------------
/static/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manosim/ui-color/HEAD/static/images/favicon.ico


--------------------------------------------------------------------------------
/static/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manosim/ui-color/HEAD/static/images/favicon.png


--------------------------------------------------------------------------------
/static/_redirects:
--------------------------------------------------------------------------------
1 | https://www.uicolor.xyz/* https://www.uicolor.io/:splat 301!
2 | https://uicolor.xyz/* https://www.uicolor.io/:splat 301!
3 | 


--------------------------------------------------------------------------------
/src/pages/404.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import { Layout } from '../components/Layout';
 4 | import { SEO } from '../components/Seo';
 5 | 
 6 | const NotFoundPage = () => (
 7 |   <Layout>
 8 |     <SEO title="404: Not found" />
 9 |     <h1>NOT FOUND</h1>
10 |     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
11 |   </Layout>
12 | );
13 | 
14 | export default NotFoundPage;
15 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": ["./src/**/*"],
 3 |   "compilerOptions": {
 4 |     "target": "esnext",
 5 |     "module": "commonjs",
 6 |     "lib": ["dom", "es2017"],
 7 |     // "allowJs": true,
 8 |     // "checkJs": true,
 9 |     "jsx": "react",
10 |     "strict": true,
11 |     "esModuleInterop": true,
12 |     "experimentalDecorators": true,
13 |     "emitDecoratorMetadata": true,
14 |     "noEmit": true,
15 |     "skipLibCheck": true
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # UIColor.io [![Build Status](https://travis-ci.org/manosim/ui-color.svg?branch=master)](https://travis-ci.org/manosim/ui-color)
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | yarn start
 9 | ```
10 | 
11 | Open [http://localhost:8000](http://localhost:8000) with your browser to see the result.
12 | 
13 | You can start editing the page by modifying `src/pages/index.js`. The page auto-updates as you edit the file.
14 | 
15 | ## Learning Gatsby
16 | 
17 | Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start:
18 | 
19 | - **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
20 | 
21 | - **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
22 | 


--------------------------------------------------------------------------------
/src/components/forms/FormHEX.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import styled from 'styled-components';
 3 | import Color from 'color';
 4 | 
 5 | import { Input } from './Input';
 6 | import { ColorPicker } from '../ColorPicker';
 7 | 
 8 | const Container = styled.div`
 9 |   display: flex;
10 |   flex: 1;
11 |   flex-direction: row;
12 | 
13 |   div:first-of-type {
14 |     margin-top: 0;
15 |   }
16 | `;
17 | 
18 | export interface IProps {
19 |   value?: Color;
20 |   onColorChange: any;
21 | }
22 | 
23 | export const FormHEX: React.FC<IProps> = props => {
24 |   const [inputValue, setInputValue] = React.useState<string>('');
25 | 
26 |   const parseColor = value => {
27 |     setInputValue(value);
28 |     try {
29 |       const parsed = Color(value);
30 |       return props.onColorChange(parsed);
31 |     } catch (_) {}
32 |   };
33 | 
34 |   return (
35 |     <Container>
36 |       <Input
37 |         placeholder="eg. #ABC123"
38 |         label="HEX"
39 |         maxLength="7"
40 |         value={inputValue}
41 |         onChange={parseColor}
42 |       />
43 | 
44 |       <ColorPicker onSelectColor={(color: Color) => parseColor(color.hex())} />
45 |     </Container>
46 |   );
47 | };
48 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License
 2 | =======================
 3 | 
 4 | Copyright (c) 2020 Emmanouil Konstantinidis. https://www.manos.im/
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy
 7 | of this software and associated documentation files (the "Software"), to deal
 8 | in the Software without restriction, including without limitation the rights
 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be included in
14 | all copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22 | THE SOFTWARE.
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # dotenv environment variable files
55 | .env*
56 | 
57 | # gatsby files
58 | .cache/
59 | public
60 | 
61 | # Mac files
62 | .DS_Store
63 | 
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 | 


--------------------------------------------------------------------------------
/src/components/Codeblock.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import Color from 'color';
 3 | import copy from 'copy-to-clipboard';
 4 | import styled from 'styled-components';
 5 | import { Box, Button, Flex, Heading, Text } from 'rebass/styled-components';
 6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 7 | import { faCopy } from '@fortawesome/free-solid-svg-icons';
 8 | 
 9 | const Container = styled(Box)`
10 |   position: relative;
11 |   border-radius: 5px;
12 |   padding: 0.75rem 1.5rem;
13 | `;
14 | 
15 | const Code = styled.div`
16 |   padding: 0.75rem 0 0.25rem;
17 |   font-family: ${props => props.theme.fonts.monospace};
18 |   font-size: 15px;
19 |   font-weight: bold;
20 | `;
21 | 
22 | const Icon = styled(FontAwesomeIcon)`
23 |   width: 0.75rem;
24 |   height: 0.75rem;
25 | `;
26 | 
27 | const CopyButton = styled(Button)`
28 |   position: absolute;
29 |   padding: 0.5rem 0.75rem;
30 |   top: 0;
31 |   right: 0;
32 |   border: 0;
33 |   border-radius: 0 5px 0;
34 | `;
35 | 
36 | export interface IProps {
37 |   colorString: string;
38 |   language: string;
39 | }
40 | 
41 | export const Codeblock: React.FC<IProps> = ({ colorString, language }) => {
42 |   const onCopy = () => copy(colorString);
43 | 
44 |   return (
45 |     <Container my={3} bg="grayLight">
46 |       <Heading as="h3">{language}</Heading>
47 |       <Code>{colorString}</Code>
48 | 
49 |       <CopyButton variant="transparent" onClick={onCopy}>
50 |         <Icon icon={faCopy} />
51 |       </CopyButton>
52 |     </Container>
53 |   );
54 | };
55 | 


--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   siteMetadata: {
 3 |     title: `UIColor.io`,
 4 |     description: `UIColor.io is a website that helps you convert HEX & RGB colors to UIColor for Objective-C, Swift and Xamarin featuring a colorpicker and copy to clipboard functionality to make things easier.`,
 5 |     author: `@manosim_`,
 6 |     keywords: `uicolor,ui,color,colour,convert,converter,hex,rgb,rgba,swift,objective-c,objective,c,apple,ios`,
 7 |   },
 8 |   plugins: [
 9 |     `gatsby-plugin-typescript`,
10 |     `gatsby-plugin-styled-components`,
11 |     `gatsby-plugin-react-helmet`,
12 |     {
13 |       resolve: `gatsby-plugin-manifest`,
14 |       options: {
15 |         name: `UIColor.io`,
16 |         short_name: `starter`,
17 |         start_url: `/`,
18 |         background_color: `#4A5899`,
19 |         theme_color: `#4A5899`,
20 |         display: `minimal-ui`,
21 |         icon: `static/images/favicon.png`,
22 |       },
23 |     },
24 |     // this (optional) plugin enables Progressive Web App + Offline functionality
25 |     // To learn more, visit: https://gatsby.dev/offline
26 |     // `gatsby-plugin-offline`,
27 |     {
28 |       resolve: 'gatsby-plugin-web-font-loader',
29 |       options: {
30 |         google: {
31 |           families: ['Sen'],
32 |         },
33 |       },
34 |     },
35 |     {
36 |       resolve: `gatsby-plugin-google-analytics`,
37 |       options: {
38 |         // The property ID; the tracking code won't be generated without it
39 |         trackingId: 'UA-6891078-41',
40 |         // Defines where to place the tracking script - `true` in the head and `false` in the body
41 |         head: false,
42 |       },
43 |     },
44 |   ],
45 | };
46 | 


--------------------------------------------------------------------------------
/src/components/forms/Input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import styled from 'styled-components';
 3 | 
 4 | const Container = styled.div`
 5 |   display: flex;
 6 |   flex-direction: column;
 7 |   flex: 1;
 8 |   margin: 0 0.5rem;
 9 | `;
10 | 
11 | const InputField = styled.input`
12 |   flex: 1;
13 |   width: 100%;
14 |   font-size: 20px;
15 |   font-weight: 600;
16 |   border: 0px;
17 |   outline: none;
18 |   box-shadow: inset 0 0 0 1px #ddd;
19 |   border-radius: 4px;
20 |   padding: 0.75rem;
21 | 
22 |   ::placeholder {
23 |     color: #777;
24 |     font-size: 14px;
25 |     font-weight: normal;
26 |   }
27 | `;
28 | 
29 | const Label = styled.div`
30 |   font-size: 1.25rem;
31 |   font-weight: 600;
32 |   line-height: 1.75rem;
33 |   margin: 0.75rem 1rem 0.25rem 0;
34 | `;
35 | 
36 | interface IProps {
37 |   type?: string;
38 |   min?: string;
39 |   max?: string;
40 |   step?: string;
41 |   maxLength?: string;
42 |   value?: string;
43 |   label: string;
44 |   placeholder: string;
45 |   onChange: (value: string) => void;
46 | }
47 | 
48 | export const Input: React.FC<IProps> = props => {
49 |   return (
50 |     <Container>
51 |       <Label>{props.label}</Label>
52 |       <InputField
53 |         type={props.type}
54 |         min={props.min && props.min}
55 |         max={props.max && props.max}
56 |         step={props.step && props.step}
57 |         maxLength={props.maxLength && props.maxLength}
58 |         value={props.value}
59 |         onChange={({ target: { value } }) => props.onChange(value)}
60 |         placeholder={props.placeholder}
61 |         spellCheck="false"
62 |       />
63 |     </Container>
64 |   );
65 | };
66 | 
67 | Input.defaultProps = {
68 |   type: 'text',
69 | };
70 | 


--------------------------------------------------------------------------------
/src/components/GitHubRibbon.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import styled from 'styled-components';
 3 | 
 4 | import { DEFAULT_COLOR } from './Layout';
 5 | 
 6 | const Svg = styled.svg`
 7 |   fill: ${props => (props.color ? 'rgba(0, 0, 0, 0.5)' : DEFAULT_COLOR)};
 8 |   color: ${props => (props.color ? props.color : 'white')};
 9 |   position: absolute;
10 |   top: 0;
11 |   border: 0;
12 |   right: 0;
13 | `;
14 | 
15 | export interface IProps {
16 |   color: string;
17 | }
18 | 
19 | export const GitHubRibbon: React.FC<IProps> = ({ color }) => {
20 |   return (
21 |     <a
22 |       href="https://github.com/manosim/ui-color"
23 |       target="_blank"
24 |       rel="noopener noreferrer"
25 |       aria-label="GitHub Repository"
26 |     >
27 |       <Svg width="80" height="80" viewBox="0 0 250 250" color={color}>
28 |         <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
29 | 
30 |         <path
31 |           d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
32 |           fill="currentColor"
33 |         />
34 | 
35 |         <path
36 |           d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
37 |           fill="currentColor"
38 |         />
39 |       </Svg>
40 |     </a>
41 |   );
42 | };
43 | 


--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import styled from 'styled-components';
 3 | import { Box, Flex, Link } from 'rebass/styled-components';
 4 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 5 | import { faGithub, faTwitter } from '@fortawesome/free-brands-svg-icons';
 6 | 
 7 | const FooterWrapper = styled.div`
 8 |   display: flex;
 9 |   padding: 2rem;
10 |   font-size: 0.8rem;
11 | 
12 |   text-align: center;
13 | 
14 |   margin-top: 3rem;
15 |   padding: 1rem 3rem;
16 | `;
17 | 
18 | const Icon = styled(FontAwesomeIcon)`
19 |   width: 1.25rem;
20 |   height: 1.25rem;
21 |   margin: 0.5rem 0.25rem;
22 | `;
23 | 
24 | export interface IProps {}
25 | 
26 | export const Footer: React.FC<IProps> = props => {
27 |   return (
28 |     <Box
29 |       bg="grayLight"
30 |       px={3}
31 |       py={3}
32 |       mt={3}
33 |       textAlign="center"
34 |       fontSize="0.8rem"
35 |     >
36 |       <Flex
37 |         flexWrap="wrap"
38 |         py={1}
39 |         px={3}
40 |         sx={{ maxWidth: 960, mx: 'auto' }}
41 |         flexDirection="column"
42 |         alignItems="center"
43 |       >
44 |         <Box>
45 |           <Link
46 |             variant="link"
47 |             href="https://twitter.com/manosim_"
48 |             aria-label="Twitter"
49 |             mr={2}
50 |           >
51 |             <Icon icon={faTwitter} />
52 |           </Link>
53 | 
54 |           <Link
55 |             variant="link"
56 |             href="https://github.com/manosim/"
57 |             aria-label="GitHub Profile"
58 |           >
59 |             <Icon icon={faGithub} />
60 |           </Link>
61 |         </Box>
62 | 
63 |         <Box my={[1, 0]}>
64 |           Copyright ©{' '}
65 |           <Link variant="link" href="https://www.uicolor.io/">
66 |             UIColor.io
67 |           </Link>{' '}
68 |           {new Date().getFullYear()}.<br />
69 |           Developed by{' '}
70 |           <Link variant="link" href="https://www.manos.im/">
71 |             Emmanouil Konstantinidis
72 |           </Link>
73 |           .
74 |         </Box>
75 |       </Flex>
76 |     </Box>
77 |   );
78 | };
79 | 


--------------------------------------------------------------------------------
/src/components/Seo.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import Helmet from 'react-helmet';
 4 | import { useStaticQuery, graphql } from 'gatsby';
 5 | 
 6 | export const SEO = ({ description, lang, meta, title }: any) => {
 7 |   const { site } = useStaticQuery(
 8 |     graphql`
 9 |       query {
10 |         site {
11 |           siteMetadata {
12 |             title
13 |             description
14 |             author
15 |             keywords
16 |           }
17 |         }
18 |       }
19 |     `
20 |   );
21 | 
22 |   const metaDescription = description || site.siteMetadata.description;
23 | 
24 |   return (
25 |     <Helmet
26 |       htmlAttributes={{
27 |         lang,
28 |       }}
29 |       title={title}
30 |       titleTemplate={`%s | ${site.siteMetadata.title}`}
31 |       meta={[
32 |         {
33 |           name: `description`,
34 |           content: metaDescription,
35 |         },
36 |         {
37 |           name: `keywords`,
38 |           content: site.siteMetadata.keywords,
39 |         },
40 |         {
41 |           property: `og:title`,
42 |           content: title,
43 |         },
44 |         {
45 |           property: `og:description`,
46 |           content: metaDescription,
47 |         },
48 |         {
49 |           property: `og:type`,
50 |           content: `website`,
51 |         },
52 |         {
53 |           name: `twitter:card`,
54 |           content: `summary`,
55 |         },
56 |         {
57 |           name: `twitter:creator`,
58 |           content: site.siteMetadata.author,
59 |         },
60 |         {
61 |           name: `twitter:title`,
62 |           content: title,
63 |         },
64 |         {
65 |           name: `twitter:description`,
66 |           content: metaDescription,
67 |         },
68 |       ].concat(meta)}
69 |     />
70 |   );
71 | };
72 | 
73 | SEO.defaultProps = {
74 |   lang: `en`,
75 |   meta: [],
76 |   description: ``,
77 | };
78 | 
79 | SEO.propTypes = {
80 |   description: PropTypes.string,
81 |   lang: PropTypes.string,
82 |   meta: PropTypes.arrayOf(PropTypes.object),
83 |   title: PropTypes.string.isRequired,
84 | };
85 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ui-color",
 3 |   "version": "0.0.1",
 4 |   "description": "Convert HEX & RGB colors to UIColor for both Objective-C and Swift.",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "build": "gatsby build",
 8 |     "develop": "gatsby develop",
 9 |     "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
10 |     "start": "npm run develop",
11 |     "serve": "gatsby serve",
12 |     "clean": "gatsby clean",
13 |     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
14 |   },
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "https://github.com/manosim/ui-color.git"
18 |   },
19 |   "keywords": [
20 |     "uicolor",
21 |     "converter",
22 |     "swift",
23 |     "objective-c"
24 |   ],
25 |   "author": "Emmanouil Konstantinidis",
26 |   "license": "MIT",
27 |   "bugs": {
28 |     "url": "https://github.com/manosim/ui-color/issues"
29 |   },
30 |   "homepage": "http://www.uicolor.io/",
31 |   "dependencies": {
32 |     "@fortawesome/fontawesome-svg-core": "^1.2.27",
33 |     "@fortawesome/free-brands-svg-icons": "^5.12.1",
34 |     "@fortawesome/free-solid-svg-icons": "^5.12.1",
35 |     "@fortawesome/react-fontawesome": "^0.1.9",
36 |     "@rebass/forms": "^4.0.6",
37 |     "@types/color": "^3.0.1",
38 |     "color": "^3.1.2",
39 |     "copy-to-clipboard": "^3.3.1",
40 |     "gatsby": "^2.19.45",
41 |     "gatsby-image": "^2.2.44",
42 |     "gatsby-plugin-google-analytics": "^2.1.38",
43 |     "gatsby-plugin-manifest": "^2.2.48",
44 |     "gatsby-plugin-offline": "^3.0.41",
45 |     "gatsby-plugin-react-helmet": "^3.1.24",
46 |     "gatsby-plugin-styled-components": "^3.1.21",
47 |     "gatsby-plugin-typescript": "^2.2.5",
48 |     "gatsby-plugin-web-font-loader": "^1.0.4",
49 |     "prop-types": "^15.7.2",
50 |     "react": "^16.12.0",
51 |     "react-color": "^2.18.0",
52 |     "react-dom": "^16.12.0",
53 |     "react-helmet": "^5.2.1",
54 |     "react-toggle-component": "^3.0.8",
55 |     "rebass": "^4.0.7",
56 |     "styled-components": "^5.0.1"
57 |   },
58 |   "devDependencies": {
59 |     "@types/node": "^13.9.0",
60 |     "@types/react": "^16.9.23",
61 |     "@types/react-helmet": "^5.0.15",
62 |     "@types/rebass": "^4.0.4",
63 |     "@types/styled-components": "^5.0.1",
64 |     "prettier": "^1.19.1",
65 |     "typescript": "^3.8.3"
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/src/components/Layout.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { useStaticQuery, graphql } from 'gatsby';
 4 | import { createGlobalStyle, ThemeProvider } from 'styled-components';
 5 | 
 6 | export const DEFAULT_COLOR = '#4A5899';
 7 | 
 8 | const GlobalStyle = createGlobalStyle`
 9 |   html,
10 |   body {
11 |     margin: 0;
12 |     padding: 0;
13 |     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
14 |     font-size: 1rem;
15 |     font-weight: 400;
16 |     line-height: 1.5;
17 |     background-color: #fff;
18 |     -webkit-font-smoothing: antialiased;
19 |   }
20 | 
21 |   * {
22 |     box-sizing: border-box;
23 |   }
24 | `;
25 | 
26 | const theme = {
27 |   colors: {
28 |     primary: DEFAULT_COLOR,
29 |     grayLight: '#F5F7F5',
30 |   },
31 |   fonts: {
32 |     heading: "'Sen', sans-serif",
33 |     monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace",
34 |   },
35 |   variants: {
36 |     link: {
37 |       backgroundColor: 'none',
38 |       color: 'primary',
39 |       textDecoration: 'none',
40 |     },
41 |   },
42 |   buttons: {
43 |     picker: {
44 |       variant: 'buttons.primary',
45 |       color: 'primary',
46 |       bg: 'transparent',
47 |       ':hover,:focus,:active': {
48 |         cursor: 'pointer',
49 |         outline: 'none',
50 |         color: '#000',
51 |       },
52 |     },
53 |     transparent: {
54 |       variant: 'buttons.primary',
55 |       color: 'primary',
56 |       bg: 'transparent',
57 |       ':hover,:focus': {
58 |         cursor: 'pointer',
59 |         outline: 'none',
60 |       },
61 |       ':active': {
62 |         backgroundColor: 'primary',
63 |         color: 'white',
64 |       },
65 |     },
66 |   },
67 | };
68 | 
69 | export const Layout = ({ children }) => {
70 |   const data = useStaticQuery(graphql`
71 |     query SiteTitleQuery {
72 |       site {
73 |         siteMetadata {
74 |           title
75 |         }
76 |       }
77 |     }
78 |   `);
79 | 
80 |   return (
81 |     <ThemeProvider theme={theme}>
82 |       <GlobalStyle />
83 |       {children}
84 |     </ThemeProvider>
85 |   );
86 | };
87 | 
88 | Layout.propTypes = {
89 |   children: PropTypes.node.isRequired,
90 | };
91 | 


--------------------------------------------------------------------------------
/src/components/ColorPicker.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import Color from 'color';
 3 | import styled from 'styled-components';
 4 | import { Box, Button } from 'rebass/styled-components';
 5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 6 | import { faEyeDropper } from '@fortawesome/free-solid-svg-icons';
 7 | import { GithubPicker } from 'react-color';
 8 | 
 9 | import { CustomPicker } from 'react-color';
10 | 
11 | const PickerButton = styled(Button)`
12 |   border: 0;
13 |   outline: none;
14 |   padding: 0.5rem;
15 |   background: transparent;
16 | `;
17 | 
18 | const Icon = styled(FontAwesomeIcon)`
19 |   width: 1.25rem;
20 |   height: 1.25rem;
21 |   color: ${props => props.theme.colors.primary};
22 | `;
23 | 
24 | const Popover = styled.div`
25 |   position: relative;
26 |   z-index: 2;
27 | `;
28 | 
29 | const Cover = styled.div`
30 |   position: fixed;
31 |   top: 0;
32 |   right: 0;
33 |   bottom: 0;
34 |   left: 0;
35 | `;
36 | 
37 | const PickerWrapper = styled.div`
38 |   position: absolute;
39 |   top: 5px;
40 |   right: 0;
41 | `;
42 | 
43 | export interface IProps {
44 |   onSelectColor: (color: Color) => void;
45 | }
46 | 
47 | export const Picker: React.FC<IProps> = props => {
48 |   const [showPicker, setShowPicker] = React.useState<boolean>(false);
49 | 
50 |   const handleClick = () => {
51 |     setShowPicker(!showPicker);
52 |   };
53 | 
54 |   const handleClose = () => {
55 |     setShowPicker(false);
56 |   };
57 | 
58 |   return (
59 |     <Box
60 |       display={['none', 'none', 'block']}
61 |       alignSelf="flex-end"
62 |       mt={[3, 3, 0]}
63 |     >
64 |       <PickerButton variant="picker" onClick={handleClick}>
65 |         <Icon icon={faEyeDropper} />
66 |       </PickerButton>
67 | 
68 |       {showPicker ? (
69 |         <Popover>
70 |           <Cover onClick={handleClose} />
71 | 
72 |           <PickerWrapper>
73 |             <GithubPicker
74 |               triangle="top-right"
75 |               width={'212px'}
76 |               onChangeComplete={({ hex }) => {
77 |                 const color: Color = Color(hex);
78 |                 props.onSelectColor(color);
79 |               }}
80 |             />
81 |           </PickerWrapper>
82 |         </Popover>
83 |       ) : null}
84 |     </Box>
85 |   );
86 | };
87 | 
88 | export const ColorPicker = CustomPicker(Picker);
89 | 


--------------------------------------------------------------------------------
/src/components/forms/FormRGB.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | import styled from 'styled-components';
  3 | import Color from 'color';
  4 | import { Flex } from 'rebass/styled-components';
  5 | 
  6 | import { ColorPicker } from '../ColorPicker';
  7 | import { Input } from './Input';
  8 | 
  9 | const Container = styled(Flex)`
 10 |   div:first-of-type {
 11 |     margin-top: 0;
 12 |   }
 13 | `;
 14 | 
 15 | export interface IProps {
 16 |   value: any;
 17 |   onColorChange: any;
 18 | }
 19 | 
 20 | export const FormRGB: React.FC<IProps> = props => {
 21 |   const [redValue, setRedValue] = React.useState<string | null>(null);
 22 |   const [greenValue, setGreenValue] = React.useState<string | null>(null);
 23 |   const [blueValue, setBlueValue] = React.useState<string | null>(null);
 24 |   const [alphaValue, setAlphaValue] = React.useState<string | null>(`1.00`);
 25 | 
 26 |   const parseColor = () => {
 27 |     try {
 28 |       if (!redValue || !greenValue || !blueValue || !alphaValue) {
 29 |         throw new Error('Incomplete RBG Color.');
 30 |       }
 31 |       const newColor = {
 32 |         r: redValue,
 33 |         g: greenValue,
 34 |         b: blueValue,
 35 |       };
 36 |       const alpha = parseFloat(alphaValue);
 37 |       const parsed = Color(newColor).alpha(alpha);
 38 |       return props.onColorChange(parsed);
 39 |     } catch (_) {}
 40 |   };
 41 | 
 42 |   const parseAlphaValue = () => {
 43 |     try {
 44 |       if (!props.value) {
 45 |         throw new Error('No color to set Alpha.');
 46 |       }
 47 |       const alpha = parseFloat(alphaValue);
 48 |       const parsed = props.value.alpha(alpha);
 49 |       return props.onColorChange(parsed);
 50 |     } catch (_) {}
 51 |   };
 52 | 
 53 |   React.useEffect(parseColor, [redValue, greenValue, blueValue, alphaValue]);
 54 | 
 55 |   return (
 56 |     <Container flexDirection={['column', 'column', 'row']}>
 57 |       <Input
 58 |         type="number"
 59 |         min="0"
 60 |         max="255"
 61 |         placeholder="eg. 12"
 62 |         label="Red"
 63 |         value={redValue || ''}
 64 |         onChange={inputValue => setRedValue(inputValue)}
 65 |       />
 66 | 
 67 |       <Input
 68 |         type="number"
 69 |         min="0"
 70 |         max="255"
 71 |         placeholder="eg. 34"
 72 |         label="Green"
 73 |         value={greenValue || ''}
 74 |         onChange={inputValue => {
 75 |           setGreenValue(`${inputValue}`);
 76 |         }}
 77 |       />
 78 | 
 79 |       <Input
 80 |         type="number"
 81 |         min="0"
 82 |         max="255"
 83 |         placeholder="eg. 56"
 84 |         label="Blue"
 85 |         value={blueValue || ''}
 86 |         onChange={inputValue => {
 87 |           setBlueValue(inputValue);
 88 |         }}
 89 |       />
 90 | 
 91 |       <Input
 92 |         type="number"
 93 |         min="0"
 94 |         max="1"
 95 |         step="0.01"
 96 |         placeholder="eg. 123"
 97 |         label="Alpha"
 98 |         value={alphaValue || ''}
 99 |         onChange={inputValue => {
100 |           setAlphaValue(`${inputValue}`);
101 |         }}
102 |       />
103 | 
104 |       <ColorPicker
105 |         onSelectColor={(color: Color) => {
106 |           setRedValue(`${color.rgb().object().r}`);
107 |           setGreenValue(`${color.rgb().object().g}`);
108 |           setBlueValue(`${color.rgb().object().b}`);
109 |         }}
110 |       />
111 |     </Container>
112 |   );
113 | };
114 | 


--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | import Color from 'color';
  3 | import styled from 'styled-components';
  4 | import { Box, Flex, Heading, Text } from 'rebass/styled-components';
  5 | import { Toggle } from 'react-toggle-component';
  6 | 
  7 | import { Codeblock } from '../components/Codeblock';
  8 | import { DEFAULT_COLOR } from '../components/Layout';
  9 | import { Footer } from '../components/Footer';
 10 | import { FormHEX } from '../components/forms/FormHEX';
 11 | import { FormRGB } from '../components/forms/FormRGB';
 12 | import { GitHubRibbon } from '../components/GitHubRibbon';
 13 | import { Layout } from '../components/Layout';
 14 | import { Logo } from '../components/Logo';
 15 | import { SEO } from '../components/Seo';
 16 | 
 17 | const Container: any = styled.div`
 18 |   background-color: ${(props: any) => props.bgColor || '#FFF'};
 19 |   transition: background-color 500ms ease;
 20 | `;
 21 | 
 22 | const Main = styled(Box)`
 23 |   padding: 3rem 1rem 1rem;
 24 |   flex: 1;
 25 |   display: flex;
 26 |   flex-direction: column;
 27 |   justify-content: center;
 28 |   align-items: center;
 29 | `;
 30 | 
 31 | const FormsWrapper = styled(Box)`
 32 |   display: flex;
 33 |   flex-direction: column;
 34 |   background-color: ${props => props.theme.colors.grayLight};
 35 |   border-radius: 5px;
 36 |   padding: 1.25rem 0.75rem;
 37 |   margin: 1rem 0;
 38 | `;
 39 | 
 40 | const Home = () => {
 41 |   const [color, setColor] = React.useState<Color | null>(null);
 42 |   const [showHexForm, setShowHexForm] = React.useState<boolean>(true);
 43 |   const hasDarkBg = color && color.isDark();
 44 |   const textColor = hasDarkBg ? 'white' : 'inherit';
 45 |   const Form = showHexForm ? FormHEX : FormRGB;
 46 | 
 47 |   const renderCodeBlocks = () => {
 48 |     if (!color) {
 49 |       return null;
 50 |     }
 51 |     const rgbColor = color.rgb().object();
 52 |     const r = (rgbColor.r / 255).toFixed(2);
 53 |     const g = (rgbColor.g / 255).toFixed(2);
 54 |     const b = (rgbColor.b / 255).toFixed(2);
 55 |     const alpha = color.alpha().toFixed(2);
 56 | 
 57 |     return (
 58 |       <Flex flexDirection="column">
 59 |         <Codeblock
 60 |           language="Swift"
 61 |           colorString={`UIColor(red: ${r}, green: ${g}, blue: ${b}, alpha: ${alpha})`}
 62 |         />
 63 |         <Codeblock
 64 |           language="Objective-C"
 65 |           colorString={`[UIColor colorWithRed: ${r} green: ${g} blue: ${b} alpha: ${alpha}];`}
 66 |         />
 67 |         <Codeblock
 68 |           language="Xamarin (C#)"
 69 |           colorString={`new UIColor(red: ${r}f, green: ${g}f, blue: ${b}f, alpha: ${alpha}f)`}
 70 |         />
 71 |       </Flex>
 72 |     );
 73 |   };
 74 | 
 75 |   return (
 76 |     <Layout>
 77 |       <SEO title="Convert HEX & RGB colors to UIColor" />
 78 | 
 79 |       <Container bgColor={color && color.string()}>
 80 |         <Main>
 81 |           <GitHubRibbon color={color && color.hex()} />
 82 | 
 83 |           <Logo color={color && color.negate().hex()} />
 84 | 
 85 |           <Heading as="h3" textAlign="center" color={textColor}>
 86 |             Convert HEX & RGB colors to UIColor
 87 |           </Heading>
 88 | 
 89 |           <Text maxWidth={485} my={2} textAlign="center" color={textColor}>
 90 |             UIColor.io is a website that helps you convert HEX & RGB colors to
 91 |             UIColor for Objective-C, Swift and Xamarin featuring a colorpicker
 92 |             and copy to clipboard functionality to make things easier.
 93 |           </Text>
 94 | 
 95 |           <Box display="flex" flexDirection="row" alignItems="center" my={3}>
 96 |             <Heading as="h3" mx={3} color={textColor}>
 97 |               HEX
 98 |             </Heading>
 99 | 
100 |             <Toggle
101 |               name="toggle-1a"
102 |               leftBackgroundColor={color ? color.string() : 'white'}
103 |               rightBackgroundColor={color ? color.string() : 'white'}
104 |               borderColor={color ? color.negate().hex() : DEFAULT_COLOR}
105 |               knobColor={color ? color.negate().hex() : DEFAULT_COLOR}
106 |               radius="3px"
107 |               radiusBackground="2px"
108 |               knobRadius="2px"
109 |               width="4rem"
110 |               knobWidth="1.5rem"
111 |               checked={!showHexForm}
112 |               onToggle={() => {
113 |                 setShowHexForm(!showHexForm);
114 |                 setColor(null);
115 |               }}
116 |             />
117 | 
118 |             <Heading as="h3" mx={3} color={textColor}>
119 |               RGB
120 |             </Heading>
121 |           </Box>
122 | 
123 |           <FormsWrapper width={[1, 1, 450]}>
124 |             <Form value={color} onColorChange={setColor} />
125 |           </FormsWrapper>
126 | 
127 |           {renderCodeBlocks()}
128 |         </Main>
129 | 
130 |         <Footer />
131 |       </Container>
132 |     </Layout>
133 |   );
134 | };
135 | 
136 | export default Home;
137 | 


--------------------------------------------------------------------------------
/src/components/Logo.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import styled from 'styled-components';
 3 | 
 4 | const Svg = styled.svg`
 5 |   display: block;
 6 |   margin-bottom: 2rem;
 7 |   fill: ${props =>
 8 |     props.fillColor ? props.fillColor : props.theme.colors.primary};
 9 | `;
10 | 
11 | export interface IProps {
12 |   color?: string;
13 | }
14 | 
15 | export const Logo: React.FC<IProps> = ({ color }) => {
16 |   return (
17 |     <Svg
18 |       xmlns="http://www.w3.org/2000/svg"
19 |       width="125"
20 |       height="125"
21 |       x="0"
22 |       y="0"
23 |       version="1.1"
24 |       viewBox="0 0 250 250"
25 |       xmlSpace="preserve"
26 |       fillColor={color}
27 |     >
28 |       <path
29 |         fillRule="evenodd"
30 |         d="M141.061 162.242c1.966-2.732 3.434-5.082 4.4-7.05.966-1.966 1.15-3.115.55-3.45-.467-.266-1.284-.05-2.45.65-1.167.7-2.534 1.935-4.1 3.7-1.567 1.767-3.25 4.067-5.05 6.899-1.8 2.835-3.601 6.285-5.4 10.351-.935 2.067-1.667 4-2.2 5.8 2.466-2.466 4.966-5.216 7.5-8.25 2.533-3.033 4.783-5.915 6.75-8.65zM125 0C55.964 0 0 55.964 0 125c0 69.035 55.964 125 125 125 69.035 0 125-55.965 125-125C250 55.964 194.035 0 125 0zm53.412 35.392c2.101 4.35 1.95 11.55-4.5 22.95-9.3 16.35-25.8 45.3-36.75 69.9-.6 1.5-1.2 1.65-2.4.301-2.1-2.25-3.899-7.5-.6-16.65 7.35-20.4 28.5-59.101 40.65-76.651 1.35-1.95 2.701-1.65 3.6.15zm-107.551 67.05c4.2-16.95 21.15-45.15 34.8-65.851 1.2-1.8 2.55-1.5 3.601.15 2.399 3.75 3 9.6-2.851 20.85-7.35 14.25-22.5 36.601-26.25 52.5-1.8 7.65-1.35 13.35 3 15 9.15 3.6 21.15-9.6 31.65-29.851 8.25-16.05 24.601-45.75 32.851-58.8 1.199-1.95 2.55-1.5 3.6.15 1.801 3.15 1.95 9.9-1.95 18.6-5.25 11.55-23.85 46.05-33.9 60-10.65 14.7-24 18.45-34.35 14.25-7.351-2.998-14.251-10.498-10.201-26.998zm129.248 65.25c-.066.835-.467 1.817-1.199 2.95a106.495 106.495 0 00-4.15 7.4c-1.367 2.667-2.418 4.934-3.15 6.8-1 2.8-.885 4.649.35 5.55 1.233.9 3.351.45 6.351-1.35.866-.533 1.399-.666 1.601-.4.199.268.1.75-.301 1.45s-1.034 1.534-1.9 2.5c-.867.967-1.916 1.884-3.149 2.75a21.95 21.95 0 01-4.101 2.25c-1.5.634-3.049.95-4.649.95-1.935 0-3.3-.45-4.101-1.351-.799-.899-1.234-2.065-1.299-3.5-.068-1.433.133-3.016.6-4.75a39.702 39.702 0 011.8-5.2 84.285 84.285 0 012.75-5.849 171.56 171.56 0 013.45-6.35c-1.4-.066-2.7-.333-3.9-.801-1.135 2.135-2.8 3.935-5 5.4-2.199 1.467-4.9 2.135-8.1 2-.135 2.067-.7 4.334-1.7 6.8a26.906 26.906 0 01-4.101 6.9 23.321 23.321 0 01-6.199 5.35c-2.4 1.435-5.067 2.15-8 2.15-3 0-5.317-.565-6.95-1.7-1.634-1.133-2.784-2.55-3.45-4.25a12.31 12.31 0 01-.659-2.398c-.398.691-.951 1.453-1.689 2.299-1.367 1.566-3.2 3.066-5.5 4.5s-4.817 2.149-7.55 2.149c-2.268 0-4.334-.665-6.2-2-1.867-1.333-3.167-3.165-3.9-5.5-.8-2.333-.866-5.2-.2-8.6.495-2.531 1.252-5.155 2.266-7.871-1.772.427-3.784.497-6.065.171-.134 2.4-.717 4.967-1.75 7.7a29.438 29.438 0 01-4.2 7.55 23.343 23.343 0 01-6.3 5.7c-2.434 1.5-5.15 2.25-8.15 2.25s-5.3-.565-6.9-1.7c-1.6-1.133-2.734-2.55-3.399-4.25a12.896 12.896 0 01-.578-1.974 25.76 25.76 0 01-1.972 2.124c-1.3 1.267-2.85 2.434-4.65 3.5-1.8 1.066-3.834 1.917-6.1 2.55-2.268.633-4.635.782-7.1.45-2.667-.333-4.9-1.101-6.7-2.301-1.8-1.199-3.135-2.715-4-4.55-.867-1.833-1.25-3.915-1.15-6.25.1-2.333.75-4.865 1.95-7.6 1.732-3.8 4.016-6.815 6.85-9.05 2.833-2.233 5.733-3.716 8.7-4.45 2.966-.733 5.716-.783 8.25-.15 2.533.635 4.366 1.917 5.5 3.851a8.95 8.95 0 011.2 3.649c.133 1.3.016 2.601-.35 3.9a12.567 12.567 0 01-1.7 3.649 11.21 11.21 0 01-2.851 2.9c-1.2.8-2.417 1.25-3.649 1.35-1.234.101-2.3-.032-3.2-.399-.9-.366-1.518-.866-1.85-1.5-.334-.633-.2-1.283.4-1.95.466-.533 1-1.133 1.6-1.8.6-.666 1.15-1.333 1.65-2 .5-.666.85-1.283 1.05-1.851.2-.565.133-1.05-.2-1.449-.6-.601-1.517-.766-2.75-.5-1.234.267-2.517.85-3.85 1.75-1.334.899-2.617 2.1-3.85 3.6a15.207 15.207 0 00-2.75 5.05c-.8 2.468-.667 4.468.399 6 1.066 1.534 2.65 2.534 4.75 3 2.101.468 4.55.385 7.351-.25 2.8-.633 5.6-1.883 8.399-3.75.115-.074.206-.119.312-.183-.007-.288-.021-.573-.012-.867.065-1.966.333-3.75.8-5.35.533-1.934 1.45-3.966 2.75-6.101a33.068 33.068 0 014.65-5.95c1.8-1.832 3.766-3.35 5.9-4.55 2.133-1.2 4.3-1.8 6.5-1.8.6 0 1.116.317 1.55.95.433.634.715 1.35.85 2.149.133.801.065 1.551-.2 2.25-.267.7-.834 1.117-1.7 1.25-1.8.4-3.517 1.4-5.15 3-1.635 1.601-2.967 3.351-4 5.25-1.034 1.9-1.65 3.7-1.85 5.4s.233 2.85 1.3 3.45c1.465.8 3.05.685 4.75-.351 1.7-1.032 3.232-2.465 4.6-4.3a21.719 21.719 0 003.15-5.95c.732-2.133.899-3.899.5-5.3-.2-.665-.101-1.333.3-2 .4-.665.95-1.216 1.65-1.649s1.483-.7 2.35-.801c.865-.1 1.6.117 2.2.65.6.534 1.399 1.018 2.399 1.45 1 .435 2.101.784 3.3 1.05 1.034.23 2.094.343 3.177.349a74.804 74.804 0 014.872-8.799c2.3-3.565 4.716-6.683 7.25-9.35 2.532-2.666 5.083-4.666 7.649-6 2.566-1.333 4.916-1.633 7.051-.9 2 .734 3.215 1.9 3.649 3.5.433 1.601.283 3.484-.45 5.65-.734 2.167-1.934 4.534-3.6 7.1-1.667 2.567-3.635 5.185-5.9 7.851a132.346 132.346 0 01-7.3 7.899c-2.6 2.601-5.2 5-7.8 7.2 0 2.067.433 3.584 1.3 4.55.866.968 1.983 1.55 3.351 1.75 1.365.2 2.883.067 4.55-.399a23.628 23.628 0 004.899-2c.375-.214.688-.357.947-.44.001-.237-.01-.47.002-.71.1-1.966.383-3.75.85-5.35.533-1.934 1.45-3.966 2.75-6.101a33.113 33.113 0 014.65-5.95c1.8-1.832 3.766-3.35 5.9-4.55 2.133-1.2 4.299-1.8 6.5-1.8.6 0 1.115.317 1.549.95.434.634.717 1.35.851 2.149.133.801.065 1.551-.2 2.25-.268.7-.834 1.117-1.699 1.25-1.801.4-3.518 1.4-5.15 3-1.635 1.601-2.967 3.351-4 5.25-1.034 1.9-1.65 3.7-1.85 5.4-.2 1.7.232 2.85 1.3 3.45 1.466.8 3.05.685 4.749-.351 1.701-1.032 3.233-2.465 4.601-4.3a21.716 21.716 0 003.149-5.95c.733-2.133.9-3.899.5-5.3-.199-.665-.1-1.333.301-2 .4-.665.949-1.216 1.65-1.649a5.572 5.572 0 012.299-.801c.834-.1 1.551.117 2.15.65a8.23 8.23 0 001.7 1.1 4.169 4.169 0 002.101.45c.732-.032 1.516-.315 2.35-.85.832-.533 1.65-1.4 2.449-2.601-.533-1.399-.717-2.915-.549-4.55a16.028 16.028 0 011.149-4.6c.601-1.433 1.366-2.633 2.3-3.601.934-.965 1.966-1.449 3.1-1.449 1.133 0 2.033.334 2.701 1 .665.667 1.064 1.566 1.199 2.699.133 1.135.051 2.45-.25 3.95-.3 1.5-.85 3.05-1.65 4.65 1.201.267 2.451.334 3.75.2a233.97 233.97 0 003.65-.4c.865-.065 1.666.018 2.4.25.732.234 1.283.635 1.65 1.2.364.577.515 1.276.448 2.109z"
31 |         clipRule="evenodd"
32 |       ></path>
33 |     </Svg>
34 |   );
35 | };
36 | 


--------------------------------------------------------------------------------