diff --git a/website/src/components/home/Home.js b/website/src/components/home/Home.js
index c0bf075aac..4c06d90139 100644
--- a/website/src/components/home/Home.js
+++ b/website/src/components/home/Home.js
@@ -1,7 +1,7 @@
import React from 'react'
import { useTheme } from '../../theming/context'
import { Container, HomeBaseline, HomeLogo } from './styled'
-import HomeChord from './HomeChord'
+import { HomeChord } from './HomeChord'
import HomeLine from './HomeLine'
import { HomeCirclePacking } from './HomeCirclePacking'
import HomeBar from './HomeBar'
diff --git a/website/src/components/home/HomeChord.js b/website/src/components/home/HomeChord.tsx
similarity index 73%
rename from website/src/components/home/HomeChord.js
rename to website/src/components/home/HomeChord.tsx
index d9fd481449..a5d4a6f8da 100644
--- a/website/src/components/home/HomeChord.js
+++ b/website/src/components/home/HomeChord.tsx
@@ -1,16 +1,19 @@
-import React from 'react'
+import React, { useMemo } from 'react'
import { generateChordData } from '@nivo/generators'
import { ResponsiveChordCanvas } from '@nivo/chord'
import { HomeItem, HomeItemLabel } from './styled'
-const HomeChord = ({ colors }) => {
+export const HomeChord = ({ colors }: { colors: string[] }) => {
+ const { matrix, keys } = useMemo(() => generateChordData({ size: 7 }), [])
+
return (
{
)
}
-
-export default HomeChord
diff --git a/website/src/components/home/styled.js b/website/src/components/home/styled.ts
similarity index 98%
rename from website/src/components/home/styled.js
rename to website/src/components/home/styled.ts
index 4e36e1207c..b7abacffaa 100644
--- a/website/src/components/home/styled.js
+++ b/website/src/components/home/styled.ts
@@ -109,8 +109,6 @@ export const HomeBaseline = styled.div`
color: white;
font-weight: 300;
font-size: 15px;
- display: flex;
- align-items: center;
justify-content: flex-start;
line-height: 26px;
padding: 0 20px;
diff --git a/website/src/components/icons/ChordIcon.js b/website/src/components/icons/ChordIcon.tsx
similarity index 81%
rename from website/src/components/icons/ChordIcon.js
rename to website/src/components/icons/ChordIcon.tsx
index 0f2e4b9553..e3fa3124d2 100644
--- a/website/src/components/icons/ChordIcon.js
+++ b/website/src/components/icons/ChordIcon.tsx
@@ -7,16 +7,18 @@ import chordDarkNeutralImg from '../../assets/icons/chord-dark-neutral.png'
import chordDarkColoredImg from '../../assets/icons/chord-dark-colored.png'
import { ICON_SIZE, Icon, colors, IconImg } from './styled'
-const Wrapper = styled.div`
- & svg > g > g > g:first-child path:nth-child(1),
- & svg > g > g > g:first-child path:nth-child(3) {
+const Wrapper = styled.div<{
+ ribbonColor: string
+}>`
+ & svg > g > g:first-child path:nth-child(1),
+ & svg > g > g:first-child path:nth-child(3) {
fill: none;
}
- & svg > g > g > g:first-child path:nth-child(2),
- & svg > g > g > g:first-child path:nth-child(4),
- & svg > g > g > g:first-child path:nth-child(5) {
+ & svg > g > g:first-child path:nth-child(2),
+ & svg > g > g:first-child path:nth-child(4),
+ & svg > g > g:first-child path:nth-child(5) {
fill: ${({ ribbonColor }) => ribbonColor};
- fill-opacity: 1;
+ opacity: 1;
}
`
@@ -24,7 +26,7 @@ const chartProps = {
width: ICON_SIZE,
height: ICON_SIZE,
keys: ['A', 'B', 'C', 'D'],
- matrix: [
+ data: [
[0, 2, 3, 0], // A
[2, 0, 0, 2], // B
[4, 0, 4, 4], // C
@@ -54,7 +56,7 @@ const ChordIconItem = ({ type }) => (
)
-const ChordIcon = () => (
+export const ChordIcon = () => (
<>
@@ -66,5 +68,3 @@ const ChordIcon = () => (
>
)
-
-export default ChordIcon
diff --git a/website/src/components/icons/Icons.js b/website/src/components/icons/Icons.js
index 2281e63036..a90bdb9752 100644
--- a/website/src/components/icons/Icons.js
+++ b/website/src/components/icons/Icons.js
@@ -6,7 +6,7 @@ import BulletIcon from './BulletIcon'
import BumpIcon from './BumpIcon'
import CalendarIcon from './CalendarIcon'
import ChoroplethIcon from './ChoroplethIcon'
-import ChordIcon from './ChordIcon'
+import { ChordIcon } from './ChordIcon'
import CirclePackingIcon from './CirclePackingIcon'
import CodeIcon from './CodeIcon'
import DataIcon from './DataIcon'