Skip to content

Commit b49499f

Browse files
author
Julia Miroshnichenko22
committed
findBugs
1 parent e020619 commit b49499f

File tree

12 files changed

+372
-297
lines changed

12 files changed

+372
-297
lines changed

‎src/components/DetailsHeader.jsx‎

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,39 @@
1+
import React from 'react';
12
import { Link } from 'react-router-dom';
23

3-
const DetailsHeader = ({ artistId, artistData, songData }) => {
4-
const artist = artistData?.artists[artistsId]?.attributes;
5-
return (
4+
const DetailsHeader = ({ artistId, artistData, songData }) => (
65
<div className="relative w-full flex flex-col">
76
<div className="w-full bg-gradient-to-l from transparent to-black sm:h-48 h-28" />
87

98
<div className="absolute inset-0 flex items-center">
10-
<img alt="art" src={artistId ? artist.artwork?.url.replace({'w'}, '500').replace({'h'}, '500')
11-
: songData?.images?.coverart
12-
} className="sm:w-48 w-28 sm:h-48 h-28 rounded-full object-cover border-2 shadow-xl shadow-black" />
9+
<img
10+
alt="profile"
11+
src={
12+
artistId
13+
? artistData?.attributes?.artwork?.url.replace('{w}', '500').replace('{h}', '500')
14+
: songData?.images?.coverart
15+
}
16+
className="sm:w-48 w-28 sm:h-48 h-28 rounded-full object-cover border-2 shadow-xl shadow-black"
17+
/>
1318

14-
<div className="ml-5">
15-
<p className="font-bold sm:text-3xl text-xl text-white">{artistId ? artist?.name: songData?.title}</p>
16-
{(!artistId && (<Link to={`/artists/${songData?.artists[0].adamid}`}><p className="text-base text-gray-400 mt-2">{songData?.subtitle}</p></Link>)
19+
<div className="ml-5">
20+
<p className="font-bold sm:text-3xl text-xl text-white">
21+
{artistId ? artistData?.attributes?.name : songData?.title}
22+
</p>
23+
{!artistId && (
24+
<Link to={`/artists/${songData?.artists[0]?.adamid}`}>
25+
<p className="text-base text-gray-400 mt-2">{songData?.subtitle}</p>
26+
</Link>
27+
)}
1728

18-
)};
29+
<p className="text-base text-gray-400 mt-2">
30+
{artistId ? artistData?.attributes?.genreNames[0] : songData?.genres?.primary}
31+
</p>
32+
</div>
33+
</div>
1934

20-
<p className="text-base text-gray-400 mt-2">
21-
{artistId ? artist?.genreNames[0] : songData?.genres?.primary}</p>
22-
</div>
23-
</div>
35+
<div className="w-full sm:h-44 h-24" />
36+
</div>
37+
);
2438

25-
<div className="w-full sm:h-44 h-24"/>
26-
</div>
27-
)
2839
export default DetailsHeader;

‎src/components/RelatedSongs.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import Songbar from '/songBar';
1+
import React from 'react';
2+
import SongBar from './SongBar';
23

34
const RelatedSongs = ({
45
data,

‎src/components/Searchbar.jsx‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,42 @@
1-
import { useState } from 'react';
1+
import React, { useState } from 'react';
22
import { useNavigate } from 'react-router-dom';
3+
34
import { FiSearch } from 'react-icons/fi';
45

56
const Searchbar = () => {
67
const navigate = useNavigate();
78
const [searchTerm, setSearchTerm] = useState('');
89

9-
const handleSubmit = (e) => {
10-
e.preventDefault();
11-
}
12-
navigate(`/search/${searchTerm}`)
10+
const handleSubmit = (e) => {
11+
e.preventDefault();
12+
13+
navigate(`/search/${searchTerm}`);
14+
};
1315

1416
return (
15-
<form onSubmit={handleSubmit} autoComplete="off" className="p-2 text-gray-400 focus-within:text-gray-600">
16-
<label htmlFor="search-field" className="sr-only">
17-
Search all songs
18-
</label>
19-
<div className="flex flex-row justify-start items-center">
20-
<FiSearch className="w-5 h-5 ml-4" />
21-
<input
22-
name="search-field"
23-
autoComplete="off"
24-
id="search-field"
25-
placeholder="Search"
26-
type="search"
27-
value={searchTerm}
28-
onChange={(e) => setSearchTerm(e.target.value)}
29-
className="flex-1 transparent border-none outline-none placeholder-gray-500 text-base text-white p-4"
30-
/>
31-
</div>
32-
</form>
33-
);
34-
)
35-
}
17+
<form
18+
onSubmit={handleSubmit}
19+
autoComplete="off"
20+
className="p-2 text-gray-400 focus-within:text-gray-600"
21+
>
22+
<label htmlFor="search-field" className="sr-only">
23+
Search all files
24+
</label>
25+
<div className="flex flex-row justify-start items-center">
26+
<FiSearch aria-hidden="true" className="w-5 h-5 ml-4" />
27+
<input
28+
name="search-field"
29+
autoComplete="off"
30+
id="search-field"
31+
className="flex-1 bg-transparent border-none placeholder-gray-500 outline-none text-base text-white p-4"
32+
placeholder="Search"
33+
type="search"
34+
value={searchTerm}
35+
onChange={(e) => setSearchTerm(e.target.value)}
36+
/>
37+
</div>
38+
</form>
39+
);
40+
};
3641

3742
export default Searchbar;

‎src/components/Sidebar.jsx‎

Lines changed: 54 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,30 @@
1-
import { useState } from 'react';
2-
import { NavLInk } from 'react-router-dom';
3-
import { HiOutlineMenu } from 'react-icons/ri';
4-
import { RiCloseClone } from 'react-icons/ri';
1+
import React, { useState } from 'react';
2+
import { NavLink } from 'react-router-dom';
3+
import {
4+
HiOutlineHashtag,
5+
HiOutlineHome,
6+
HiOutlineMenu,
7+
HiOutlinePhotograph,
8+
HiOutlineUserGroup,
9+
} from 'react-icons/hi';
10+
import { RiCloseLine } from 'react-icons/ri';
511

612
import { logo } from '../assets';
7-
import { links } from '../assets/constants';
8-
import { HiOutlineMenu } from 'react-icons/hi';
9-
const Sidebar = () => {
10-
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
11-
};
13+
14+
const links = [
15+
{ name: 'Discover', to: '/', icon: HiOutlineHome },
16+
{ name: 'Around You', to: '/around-you', icon: HiOutlinePhotograph },
17+
{ name: 'Top Artists', to: '/top-artists', icon: HiOutlineUserGroup },
18+
{ name: 'Top Charts', to: '/top-charts', icon: HiOutlineHashtag },
19+
];
1220

1321
const NavLinks = ({ handleClick }) => (
1422
<div className="mt-10">
1523
{links.map((item) => (
1624
<NavLink
1725
key={item.name}
1826
to={item.to}
19-
className="flex flex-row justify-start items-center my-8 text-sm font-medium text-gray-400 hover: text-cyan-400"
27+
className="flex flex-row justify-start items-center my-8 text-sm font-medium text-gray-400 hover:text-cyan-400"
2028
onClick={() => handleClick && handleClick()}
2129
>
2230
<item.icon className="w-6 h-6 mr-2 " />
@@ -25,29 +33,41 @@ const NavLinks = ({ handleClick }) => (
2533
))}
2634
</div>
2735
);
28-
return (
29-
<>
30-
<div clasName="md:flex hidden flex-col w-[240px] py-10 px-4 bg-[#191624]">
31-
<img src={logo} alt="logo" className="w-full h-14 object-contain" />
32-
<NavLinks />
33-
</div>
34-
<div className="absolute md:hidden block top-6 right-3">
35-
{mobileMenuOpen ? (
36-
<RiCloseClone className="w-6 h-6 text-white mr-2" onClick={() => setMobileMenuOpen(false)}/>
37-
) : (
38-
<HiOutlineMenu className="w-6 h-6 text-white mr-2" onClick={() => setMobileMenuOpen(true)}/>
39-
)}
40-
</div>
4136

42-
<div
43-
clasName={`absolute top-0 h-screen w-2/3 bg-gradient-to-tl from-white/10 to-[#483d8b] backdrop-blur-lg z-10 pd-6 md: hidden smooth-transition ${
44-
mobileMenuOpen ? left - 0 : '-left-full'
45-
}`}
46-
>
47-
<img src={logo} alt="logo" className="w-full h-14 object-contain" />
48-
<NavLinks handleClick={() => {setMobileMenuOpen(false)} />
49-
</div>
50-
</>
51-
);
37+
const Sidebar = () => {
38+
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
39+
40+
return (
41+
<>
42+
<div className="md:flex hidden flex-col w-[240px] py-10 px-4 bg-[#191624]">
43+
<img src={logo} alt="logo" className="w-full h-14 object-contain" />
44+
<NavLinks />
45+
</div>
46+
47+
{/* Mobile sidebar */}
48+
<div className="absolute md:hidden block top-6 right-3">
49+
{!mobileMenuOpen ? (
50+
<HiOutlineMenu
51+
className="w-6 h-6 mr-2 text-white "
52+
onClick={() => setMobileMenuOpen(true)}
53+
/>
54+
) : (
55+
<RiCloseLine
56+
className="w-6 h-6 mr-2 text-white "
57+
onClick={() => setMobileMenuOpen(false)}
58+
/>
59+
)}
60+
</div>
61+
62+
<div
63+
className={`absolute top-0 h-screen w-2/3 bg-gradient-to-tl from-white/10 to-[#483D8B] backdrop-blur-lg z-10 p-6 md:hidden smooth-transition ${
64+
mobileMenuOpen ? 'left - 0' : '-left-full'
65+
}`}
66+
>
67+
<img src={logo} alt="logo" className="w-full h-14 object-contain" />
68+
<NavLinks handleClick={() => setMobileMenuOpen(false)} />
69+
</div>
70+
</>
71+
);
72+
};
5273
export default Sidebar;
53-
// !!!1.17.10

0 commit comments

Comments
 (0)