adding filtration and skeletons

package.json

@@ -36,9 +36,14 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.21.4",
+    "downshift": "^7.6.0",
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-react": "^7.32.2",
-    "prettier": "2.8.7"
+    "prettier": "2.8.7",
+    "react-dropdown": "^1.11.0",
+    "react-loading-skeleton": "^3.2.1",
+    "react-select": "^5.7.2"
   }
 }

src/bar/barPlayer.jsx

@@ -1,5 +1,18 @@
 import Sprite from '../assets/icons/sprite.svg'
+import { useEffect } from 'react'
+import { PropsWithChildren, useState } from 'react'
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
+
 export default function BarPlayer() {
+  const [loadingPage, setLoadingPage] = useState(true)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoadingPage(false)
+    }, 5000)
+    return () => clearTimeout(timer)
+  }, [])
   return (
     <div className="bar__player player">
       <div className="player__controls">
@@ -33,20 +46,51 @@ export default function BarPlayer() {
       <div className="player__track-play track-play">
         <div className="track-play__contain">
           <div className="track-play__image">
-            <svg className="track-play__svg" alt="music">
+            <SkeletonTheme baseColor="#313131" highlightColor="#313131">
+              {loadingPage ? (
+                <Skeleton width={51} height={51} borderRadius={0} count={1} />
+              ) : (
+                <svg className="track-play__svg" alt="music">
+                  <use xlinkHref={`${Sprite}#icon-note`}></use>
+                </svg>
+              )}
+            </SkeletonTheme>
+            {/* <svg className="track-play__svg" alt="music">
               <use xlinkHref={`${Sprite}#icon-note`}></use>
-            </svg>
+            </svg> */}
           </div>
-          <div className="track-play__author">
+          <SkeletonTheme baseColor="#313131" highlightColor="#313131">
+            {loadingPage ? (
+              <Skeleton width={59} height={15} borderRadius={0} count={1} />
+            ) : (
+              <div className="track-play__author">
+                <a className="track-play__author-link" href="http://">
+                  Ты та...
+                </a>
+              </div>
+            )}
+          </SkeletonTheme>
+          {/* <div className="track-play__author">
             <a className="track-play__author-link" href="http://">
               Ты та...
             </a>
-          </div>
-          <div className="track-play__album">
+          </div> */}
+          <SkeletonTheme baseColor="#313131" highlightColor="#313131">
+            {loadingPage ? (
+              <Skeleton width={59} height={15} borderRadius={0} count={1} />
+            ) : (
+              <div className="track-play__album">
+                <a className="track-play__album-link" href="http://">
+                  Баста
+                </a>
+              </div>
+            )}
+          </SkeletonTheme>
+          {/* <div className="track-play__album">
             <a className="track-play__album-link" href="http://">
               Баста
             </a>
-          </div>
+          </div> */}
         </div>
 
         <div className="track-play__like-dis">

src/centerBlock/centerblock.jsx

@@ -8,7 +8,34 @@ export default function CenterBlock() {
     <div className="main__centerblock centerblock">
       <Search />
       <h2 className="centerblock__h2">Треки</h2>
-      <Filter />
+      <div className="centerblock__filter filter">
+        <label className="filter__title">Искать по:</label>
+        <Filter
+          options={[
+            { value: 'Michael Jackson' },
+            { value: 'Frank Sinatra' },
+            { value: 'Calvin Harris' },
+            { value: 'Zhu' },
+            { value: 'Arctic Monkeys' },
+          ]}
+          optName={'исполнителю'}
+        />
+        <Filter
+          options={[
+            { value: 'Хип-хоп' },
+            { value: 'Рок' },
+            { value: 'Поп-музыка' },
+            { value: 'Техно' },
+            { value: 'Инди' },
+          ]}
+          optName={'жанру'}
+        />
+        <Filter
+          options={[{ value: 'Более новые' }, { value: 'Более старые' }]}
+          optName={'году выпуска'}
+        />
+      </div>
+
       <TrackList />
     </div>
   )

src/filter-by/filter.jsx

@@ -1,10 +1,122 @@
-export default function Filter(props) {
+// import Dropdown from 'react-dropdown'
+// import 'react-dropdown/style.css'
+// import { _onSelect } from 'react-dropdown'
+
+// import React, { useState } from 'react'
+// import Select from 'react-select'
+
+import * as React from 'react'
+import Downshift from 'downshift'
+import { useSelect } from 'downshift'
+import { useState } from 'react'
+
+// const options = [
+//   { value: 'Michael Jackson' },
+//   { value: 'Frank Sinatra' },
+//   { value: 'Calvin Harris' },
+//   { value: 'Zhu' },
+//   { value: 'Arctic Monkeys' }
+// ]
+
+export default function Filter({ options, optName }) {
+  // const options = [
+  //   'Michael Jackson',
+  //   'Frank Sinatra',
+  //   'Calvin Harris',
+  //   'Zhu',
+  //   'Arctic Monkeys',
+  // ]
+
+  // const singers = [
+  //   { value: 'Michael Jackson' },
+  //   { value: 'Frank Sinatra' },
+  //   { value: 'Calvin Harris' },
+  //   { value: 'Calvin Harris' },
+  //   { value: 'Calvin Harris' },
+  //   { value: 'Calvin Harris' },
+  //   { value: 'Calvin Harris' },
+  //   { value: 'Calvin Harris' }
+  // ]
+  // const genres = [
+  //   { value: 'rock' },
+  //   { value: 'pop' },
+  //   { value: 'jazz' }
+  // ]
+  const {
+    isOpen,
+    selectedItem,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    highlightedIndex,
+    getItemProps,
+  } = useSelect({ items: options })
+
+  // const [activeState, setActiveState] = useState(false)
+
+  // const [selectedOption, setSelectedOption] = useState(null)
+  // const defaultOption = options[0]
+
   return (
-    <div className="centerblock__filter filter">
-      <div className="filter__title">Искать по:</div>
-      <div className="filter__button button-author _btn-text">исполнителю</div>
+    <div className="option">
+      {/* <label className="filter__title" {...getLabelProps()}>
+        Искать по:
+      </label> */}
+
+      <div
+        className={`filter__button button-author _btn-text ${
+          isOpen ? 'dropdwn-active' : ''
+        }`}
+        {...getToggleButtonProps()}
+      >
+        {selectedItem ?? optName}
+      </div>
+      <div className="scrollabale-menu-padding">
+        <ul
+          className={`filter__dropdown-content ${
+            isOpen ? 'srcollabale-menu' : ''
+          }`}
+          {...getMenuProps()}
+        >
+          {isOpen &&
+            options.map((item, index) => (
+              <li
+                className="filter__dropdown-item"
+                key={`${item}${index}`}
+                {...getItemProps({
+                  item,
+                  index,
+                })}
+              >
+                {item.value}
+              </li>
+            ))}
+        </ul>
+      </div>
+
+      {/* <ul
+        className={`filter__dropdown-content ${
+          isOpen ? 'srcollabale-menu' : ''
+        }`}
+        {...getMenuProps()}
+      >
+        {isOpen &&
+          options.map((item, index) => (
+            <li
+              className="filter__dropdown-item"
+              key={`${item}${index}`}
+              {...getItemProps({
+                item,
+                index,
+              })}
+            >
+              {item.value}
+            </li>
+          ))}
+      </ul> */}
+      {/* <div className="filter__button button-author _btn-text">исполнителю</div>
       <div className="filter__button button-year _btn-text">году выпуска</div>
-      <div className="filter__button button-genre _btn-text">жанру</div>
+      <div className="filter__button button-genre _btn-text">жанру</div> */}
     </div>
   )
 }