Skip to content

Commit 2914928

Browse files
gabrielduetegabrielduete
authored
Merge pull request #20 from gabrielduete/feat/create-home
2 parents b4af36e + 1f77eea commit 2914928

File tree

19 files changed

+520
-73
lines changed

19 files changed

+520
-73
lines changed

‎.prettierrc.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,8 @@
1313
"singleQuote": true,
1414
"tabWidth": 2,
1515
"trailingComma": "es5",
16-
"useTabs": false
16+
"useTabs": false,
17+
"importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
18+
"importOrderSeparation": true,
19+
"importOrderSortSpecifiers": true
1720
}

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,18 +36,21 @@
3636
"@emotion/styled": "^11.11.0",
3737
"@mui/icons-material": "^5.14.11",
3838
"@mui/material": "^5.14.11",
39+
"@types/react-sound": "^1.2.4",
3940
"axios": "^1.5.1",
4041
"next": "12.2.5",
4142
"react": "18.2.0",
4243
"react-dom": "18.2.0",
4344
"react-powerglitch": "^1.0.0",
4445
"react-scripts": "^5.0.1",
46+
"react-sound": "^1.2.0",
4547
"styled-components": "^5.3.9"
4648
},
4749
"devDependencies": {
4850
"@babel/preset-typescript": "^7.18.6",
4951
"@testing-library/jest-dom": "^5.16.5",
5052
"@testing-library/react": "^13.3.0",
53+
"@trivago/prettier-plugin-sort-imports": "^4.2.0",
5154
"@types/node": "18.7.14",
5255
"@types/react": "18.0.17",
5356
"@types/react-dom": "18.0.6",

‎pages/_app.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
import type { AppProps } from 'next/app'
2+
import Head from 'next/head'
23
import GlobalStyle from '~/src/styles/GlobalStyle'
34

45
function MyApp({ Component, pageProps }: AppProps) {
56
return (
6-
<>
7+
<main>
8+
<Head>
9+
<title>Sandevistan</title>
10+
<link
11+
rel='icon'
12+
href='https://cdn.discordapp.com/attachments/778024116140769331/1157476264165249135/logo.png?ex=6518bf46&is=65176dc6&hm=8a17328726bd0b87caf469a81abc88716decf38c4fab756e3bc181fe08b0b5c3&'
13+
/>
14+
</Head>
715
<GlobalStyle />
816
<Component {...pageProps} />
9-
</>
17+
</main>
1018
)
1119
}
1220

‎pages/index.spec.tsx‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎pages/index.tsx‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,40 @@
1+
import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'
12
import type { NextPage } from 'next'
3+
import { useEffect } from 'react'
4+
import { useGlitch } from 'react-powerglitch'
5+
import Sound from 'react-sound'
6+
7+
import Equalizer from '../src/components/Equalizer'
8+
import * as S from '../src/styles/stylesHome'
9+
import { SoundClickButton, SoundGlitch } from '../src/utils/Sounds'
10+
import { settingsSound } from '../src/utils/settingsHome'
211

312
const Home: NextPage = () => {
4-
return <></>
13+
const glitch = useGlitch()
14+
15+
useEffect(() => {
16+
const timer = setInterval(() => {
17+
SoundGlitch()
18+
}, 2090)
19+
return () => clearInterval(timer)
20+
}, [])
21+
22+
return (
23+
<>
24+
<Sound playStatus='PLAYING' {...settingsSound} />
25+
<S.Wrapper>
26+
<S.Content>
27+
<S.Title ref={glitch.ref}>sandevistan</S.Title>
28+
<S.Link onClick={() => SoundClickButton()}>
29+
explore <ArrowRightAltIcon />
30+
</S.Link>
31+
</S.Content>
32+
</S.Wrapper>
33+
<S.WrapperEqualizer>
34+
<Equalizer />
35+
</S.WrapperEqualizer>
36+
</>
37+
)
538
}
639

740
export default Home

‎src/components/Equalizer/Equalizer.data.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const settings = {
2+
url: 'https://cdn.discordapp.com/attachments/778024116140769331/1157451387169415258/Cyberpunk_2077_by_Infraction_No_Copyright_Music_Free_Download_Cyber_Attack.MP3?ex=6518a81b&is=6517569b&hm=fa2bae74b8d9fca1318bb56b0ec4796f647c6203d1ad1b06dc66d1a092d2fdbe&',
3+
loop: true,
4+
volume: 6,
5+
}

‎src/components/Equalizer/Equalizer.spec.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react'
2+
import { render, screen, fireEvent } from '@testing-library/react'
3+
import Equalizer from '.'
4+
5+
describe('<Equalizer />', () => {
6+
const lineId = 'equalizer_line'
7+
8+
it('should render line when isOpen is true', () => {
9+
render(<Equalizer />)
10+
11+
expect(screen.getByTestId(lineId)).toBeInTheDocument()
12+
})
13+
14+
it('should render closedLine when isOpen is false', () => {
15+
render(<Equalizer />)
16+
17+
fireEvent.click(screen.getByTestId(lineId))
18+
19+
expect(screen.getByTestId('equalizer_closedLine')).toBeInTheDocument()
20+
})
21+
})

‎src/components/Equalizer/index.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { useState } from 'react'
2+
import Sound from 'react-sound'
3+
4+
import { settings } from './Equalizer.data'
5+
import * as S from './styles'
6+
7+
const Equalizer = () => {
8+
const [isOpen, setIsOpen] = useState<boolean>(true)
9+
10+
return (
11+
<S.Wrapper onClick={() => setIsOpen(!isOpen)}>
12+
<Sound playStatus={isOpen ? 'PLAYING' : 'PAUSED'} {...settings} />
13+
{isOpen ? (
14+
<>
15+
<S.Line data-testid='equalizer_line' />
16+
<S.Line />
17+
<S.Line />
18+
</>
19+
) : (
20+
<S.ClosedLine data-testid='equalizer_closedLine' />
21+
)}
22+
</S.Wrapper>
23+
)
24+
}
25+
26+
export default Equalizer

‎src/components/Equalizer/styles.ts‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import styled from 'styled-components'
2+
3+
export const Wrapper = styled.div`
4+
cursor: pointer;
5+
height: 20px;
6+
7+
display: flex;
8+
align-items: flex-end;
9+
width: auto;
10+
`
11+
12+
export const Line = styled.div`
13+
width: 6px;
14+
background-color: var(--white);
15+
margin: 0 2px;
16+
animation: equalizer 1.9s steps(20, end) infinite;
17+
18+
:nth-child(1) {
19+
animation-duration: 1.9s;
20+
}
21+
22+
:nth-child(2) {
23+
animation-duration: 2s;
24+
}
25+
26+
:nth-child(3) {
27+
animation-duration: 1.7s;
28+
}
29+
30+
@keyframes equalizer {
31+
0% {
32+
height: 60%;
33+
}
34+
35+
4% {
36+
height: 50%;
37+
}
38+
39+
8% {
40+
height: 40%;
41+
}
42+
43+
12% {
44+
height: 30%;
45+
}
46+
47+
16% {
48+
height: 20%;
49+
}
50+
51+
20% {
52+
height: 30%;
53+
}
54+
55+
24% {
56+
height: 40%;
57+
}
58+
59+
28% {
60+
height: 10%;
61+
}
62+
63+
32% {
64+
height: 40%;
65+
}
66+
67+
36% {
68+
height: 60%;
69+
}
70+
71+
40% {
72+
height: 20%;
73+
}
74+
75+
44% {
76+
height: 40%;
77+
}
78+
79+
48% {
80+
height: 70%;
81+
}
82+
83+
52% {
84+
height: 30%;
85+
}
86+
87+
56% {
88+
height: 10%;
89+
}
90+
91+
60% {
92+
height: 30%;
93+
}
94+
95+
64% {
96+
height: 50%;
97+
}
98+
99+
68% {
100+
height: 60%;
101+
}
102+
103+
72% {
104+
height: 70%;
105+
}
106+
107+
76% {
108+
height: 80%;
109+
}
110+
111+
80% {
112+
height: 70%;
113+
}
114+
115+
84% {
116+
height: 60%;
117+
}
118+
119+
88% {
120+
height: 50%;
121+
}
122+
123+
92% {
124+
height: 60%;
125+
}
126+
127+
96% {
128+
height: 70%;
129+
}
130+
131+
100% {
132+
height: 80%;
133+
}
134+
}
135+
`
136+
137+
export const ClosedLine = styled.div`
138+
width: 27px;
139+
height: 2px;
140+
background-color: var(--white);
141+
`

‎src/components/Exemple/Exemple.spec.tsx‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

0 commit comments

Comments
 (0)