|
| 1 | +// Libraries |
1 | 2 | import React, { ReactNode } from "react"
|
2 | 3 | import { Box, BoxProps, Flex, useColorMode } from "@chakra-ui/react"
|
3 | 4 |
|
| 5 | +// Components |
| 6 | +import Translation from "./Translation" |
| 7 | + |
4 | 8 | const Column: React.FC<{ children: ReactNode }> = ({ children }) => {
|
5 | 9 | return (
|
6 | 10 | <Flex
|
@@ -60,26 +64,52 @@ const AdoptionChart: React.FC<IProps> = () => {
|
60 | 64 | <Flex>
|
61 | 65 | <Column>
|
62 | 66 | <ColumnName>2010</ColumnName>
|
63 |
| - <Cell color={isDark ? "#FBF9A5" : "#95935B"}>Investors</Cell> |
| 67 | + <Cell color={isDark ? "#FBF9A5" : "#95935B"}> |
| 68 | + <Translation id="adoption-chart-investors-label" /> |
| 69 | + </Cell> |
64 | 70 | </Column>
|
65 | 71 |
|
66 | 72 | <Column>
|
67 | 73 | <ColumnName>2014</ColumnName>
|
68 |
| - <Cell color={isDark ? "#FBF9A5" : "#95935B"}>Investors</Cell> |
69 |
| - <Cell color={isDark ? "#9EC885" : "#67954C"}>Developers</Cell> |
70 |
| - <Cell color={isDark ? "#E78F6E" : "#CB7C5E"}>Companies</Cell> |
| 74 | + <Cell color={isDark ? "#FBF9A5" : "#95935B"}> |
| 75 | + <Translation id="adoption-chart-investors-label" /> |
| 76 | + </Cell> |
| 77 | + <Cell color={isDark ? "#9EC885" : "#67954C"}> |
| 78 | + <Translation id="adoption-chart-developers-label" /> |
| 79 | + </Cell> |
| 80 | + <Cell color={isDark ? "#E78F6E" : "#CB7C5E"}> |
| 81 | + <Translation id="adoption-chart-companies-label" /> |
| 82 | + </Cell> |
71 | 83 | </Column>
|
72 | 84 |
|
73 | 85 | <Column>
|
74 |
| - <ColumnName>Now</ColumnName> |
75 |
| - <Cell color={isDark ? "#FBF9A5" : "#95935B"}>Investors</Cell> |
76 |
| - <Cell color={isDark ? "#9EC885" : "#67954C"}>Developers</Cell> |
77 |
| - <Cell color={isDark ? "#E78F6E" : "#CB7C5E"}>Companies</Cell> |
78 |
| - <Cell color={isDark ? "#8EA8CA" : "#5E7492"}>Artists</Cell> |
79 |
| - <Cell color={isDark ? "#AC85C2" : "#88669B"}>Musicians</Cell> |
80 |
| - <Cell color={isDark ? "#CA928E" : "#985955"}>Writers</Cell> |
81 |
| - <Cell color={isDark ? "#B9B9B9" : "#9E9E9E"}>Gamers</Cell> |
82 |
| - <Cell color={isDark ? "#E2B79E" : "#E78A54"}>Refugees</Cell> |
| 86 | + <ColumnName> |
| 87 | + <Translation id="adoption-chart-column-now-label" /> |
| 88 | + </ColumnName> |
| 89 | + <Cell color={isDark ? "#FBF9A5" : "#95935B"}> |
| 90 | + <Translation id="adoption-chart-investors-label" /> |
| 91 | + </Cell> |
| 92 | + <Cell color={isDark ? "#9EC885" : "#67954C"}> |
| 93 | + <Translation id="adoption-chart-developers-label" /> |
| 94 | + </Cell> |
| 95 | + <Cell color={isDark ? "#E78F6E" : "#CB7C5E"}> |
| 96 | + <Translation id="adoption-chart-companies-label" /> |
| 97 | + </Cell> |
| 98 | + <Cell color={isDark ? "#8EA8CA" : "#5E7492"}> |
| 99 | + <Translation id="adoption-chart-artists-label" /> |
| 100 | + </Cell> |
| 101 | + <Cell color={isDark ? "#AC85C2" : "#88669B"}> |
| 102 | + <Translation id="adoption-chart-musicians-label" /> |
| 103 | + </Cell> |
| 104 | + <Cell color={isDark ? "#CA928E" : "#985955"}> |
| 105 | + <Translation id="adoption-chart-writers-label" /> |
| 106 | + </Cell> |
| 107 | + <Cell color={isDark ? "#B9B9B9" : "#9E9E9E"}> |
| 108 | + <Translation id="adoption-chart-gamers-label" /> |
| 109 | + </Cell> |
| 110 | + <Cell color={isDark ? "#E2B79E" : "#E78A54"}> |
| 111 | + <Translation id="adoption-chart-refugees-label" /> |
| 112 | + </Cell> |
83 | 113 | </Column>
|
84 | 114 | </Flex>
|
85 | 115 | )
|
|
0 commit comments