feat: add player template

guz86 · Sep 22, 2024 · 1ea94b9 · 1ea94b9
1 parent e939f0f
commit 1ea94b9
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 8 deletions.
diff --git a/app/public/assets/button-download.png b/app/public/assets/button-download.png
diff --git a/app/public/assets/button-play.png b/app/public/assets/button-play.png
diff --git a/app/src/pages/AppPage.css b/app/src/pages/AppPage.css
@@ -83,12 +83,50 @@
 
 .row-score {
   text-align: left;
-  width: 33.9%;
+  width: 12.09%;
 }
 
 .row-length {
-  text-align: right;
-  width: 8.09%;
+  justify-content: flex-end;
+  width: 28.9%;
+}
+
+.row-audio {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+  height: 48px;
+  border-radius: 48px;
+  background: rgb(234, 240, 250);
+  margin-right: 20px;
+}
+
+.row-audio-play {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 24px;
+  background: rgb(255, 255, 255);
+  width: 24px;
+  height: 24px;
+}
+
+.row-audio-line {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 164px;
+  height: 4px;
+  border-radius: 50px;
+  background: rgb(173, 191, 223);
+}
+
+.row-audio-download {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 50px;
 }
 
 .rows {

diff --git a/app/src/pages/AppPage.tsx b/app/src/pages/AppPage.tsx
@@ -87,7 +87,18 @@ const AppPage = () => {
             <div className="row-score">
               <div className="row-score-element">Отлично</div>
             </div>
-            <div className="row-length">Плеер</div>
+            <div className="row-length">
+              <div className="row-audio">
+                <div>12:06</div>
+                <div className="row-audio-play">
+                  <img src="/assets/button-play.png" alt="play" />
+                </div>
+                <div className="row-audio-line"></div>
+                <div className="row-audio-download">
+                  <img src="/assets/button-download.png" alt="download" />
+                </div>
+              </div>
+            </div>
           </div>
 
           <div className="row">
@@ -107,7 +118,7 @@ const AppPage = () => {
             <div className="row-score">
               <div className="row-score-element">Отлично</div>
             </div>
-            <div className="row-length">Плеер</div>
+            <div className="row-length">12:06</div>
           </div>
 
           <div className="row">
@@ -127,7 +138,7 @@ const AppPage = () => {
             <div className="row-score">
               <div className="row-score-element">Отлично</div>
             </div>
-            <div className="row-length">Плеер</div>
+            <div className="row-length">12:06</div>
           </div>
 
           <div className="row">
@@ -147,7 +158,7 @@ const AppPage = () => {
             <div className="row-score">
               <div className="row-score-element">Отлично</div>
             </div>
-            <div className="row-length">Плеер</div>
+            <div className="row-length">12:06</div>
           </div>
 
           <div className="row">
@@ -167,7 +178,7 @@ const AppPage = () => {
             <div className="row-score">
               <div className="row-score-element">Отлично</div>
             </div>
-            <div className="row-length">Плеер</div>
+            <div className="row-length">12:06</div>
           </div>
         </div>
       </div>