play details header

anish1617 · Mar 16, 2022 · 6c627fa · 6c627fa
1 parent b049a39
commit 6c627fa
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 3 deletions.
diff --git a/src/App.css b/src/App.css
@@ -75,6 +75,11 @@
 
  /* Play */
  --play-thumb-size: 268px;
+
+ /* Play level */
+ --color-play-level-1: 3, 169, 244;
+ --color-play-level-2: 255, 111, 0;
+ --color-play-level-3: 229, 57, 53;
 }
 
 html,
@@ -179,4 +184,5 @@ code {
 .app-footer a:hover,
 .app-footer a:focus {
  color: var(--color-brand-primary-alt);
-}
+}
+
diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css
@@ -181,6 +181,95 @@
  -moz-box-shadow: 0px 4px 10px 0px rgba(var(--color-neutral-90-rgb),0.12);
 }
 
+.play-details .play-details-header .header-wrapper {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ grid-gap: .6rem;
+}
+
+.play-level {
+ display: inline-flex;
+ align-items: center;
+ grid-gap: 0.2rem;
+ line-height: 1;
+ border-radius: 0.2rem;
+ font-size: var(--fs-xs);
+ text-transform: uppercase;
+ background-color: rgba(var(--color-neutral-90-rgb),0.12);
+ padding: 0.3rem 0.4rem 0.24rem 0.4rem;
+ color: rgba(var(--color-neutral-90-rgb), 0.8);
+ text-decoration: none;
+ transition: all 0.12s ease-in-out;
+}
+
+.play-level.play-level-1 {
+ background-color: rgba(var(--color-play-level-1),0.12);
+ color: rgba(var(--color-play-level-1), 1);
+}
+.play-level.play-level-1:hover,
+.play-level.play-level-1:focus {
+ background-color: rgba(var(--color-play-level-1),1);
+ color: var(--color-neutral-10);
+}
+
+.play-level.play-level-2 {
+ color: rgba(var(--color-play-level-2), 1);
+ background-color: rgba(var(--color-play-level-2),0.12);
+}
+.play-level.play-level-2:hover,
+.play-level.play-level-2:focus {
+ background-color: rgba(var(--color-play-level-2),1);
+ color: var(--color-neutral-10);
+}
+
+.play-level.play-level-3 {
+ color: rgba(var(--color-play-level-3), 1);
+ background-color: rgba(var(--color-play-level-3),0.12);
+}
+.play-level.play-level-3:hover,
+.play-level.play-level-3:focus {
+ background-color: rgba(var(--color-play-level-3),1);
+ color: var(--color-neutral-10);
+}
+
+.play-details .play-details-header .header-secondary .header-author {
+ font-size: var(--fs-sm);
+}
+.play-details .play-details-header .header-secondary {
+ display: flex;
+ flex-direction: row;
+ grid-gap: .6rem;
+ align-items: center;
+}
+
+.play-details .play-details-header .list-tags {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: inline-flex;
+ grid-gap: .6rem;
+}
+
+.play-tag {
+ display: inline-flex;
+ line-height: 1;
+ border-radius: 0.2rem;
+ font-size: var(--fs-xs);
+ text-transform: uppercase;
+ background-color: rgba(var(--color-neutral-90-rgb),0.08);
+ padding: 0.4rem 0.4rem 0.24rem 0.4rem;
+ color: rgba(var(--color-neutral-90-rgb), 0.8);
+ text-decoration: none;
+ transition: all 0.12s ease-in-out;
+}
+
+.play-tag:hover,
+.play-tag:focus {
+ background-color: var(--color-neutral-70);
+ color: var(--color-neutral-10);
+}
+
 .play-details .play-details-header .header-title {
  margin: 0;
  font-size: var(--fs-md);

diff --git a/src/plays/clock/CurrentTimer.js b/src/plays/clock/CurrentTimer.js
@@ -1,8 +1,12 @@
-
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { getPlayById } from 'meta/play-meta';
+import { Link } from "react-router-dom";
 import { PlayLinks } from 'common';
+import { RiMedal2Fill } from "react-icons/ri";
+import { IoMdTrophy } from "react-icons/io";
+import { IoRibbon } from "react-icons/io5";
+
 
 const CurrentTimer = () => {
  // The following code is to fetch the current play from the URL
@@ -24,7 +28,30 @@ const CurrentTimer = () => {
  <>
  <div className="play-details">
  <div className="play-details-header">
- <h3 className="header-title">Header Title Goes here</h3>
+ <div>
+ <div className="header-wrapper">
+ <h3 className="header-title">Header Title Goes here</h3>
+ <Link to="google.com" className="play-level play-level-1">
+ <IoRibbon size="16px" />
+ Beginner</Link>
+ <Link to="google.com" className="play-level play-level-2"><RiMedal2Fill size="16px" /> Internemdiate</Link>
+ <Link to="google.com" className="play-level play-level-3"><IoMdTrophy size="16px" /> Advanced</Link>
+ </div>
+ <div className="header-secondary">
+ <div className="header-author">by <strong>GreenRoots Media</strong></div>
+ <ul className="list-tags">
+ <li>
+ <Link className="play-tag" to="google.com">Schedule</Link>
+ </li>
+ <li>
+ <Link className="play-tag" to="google.com">Hook</Link>
+ </li>
+ <li>
+ <Link className="play-tag" to="google.com">Tree</Link>
+ </li>
+ </ul>
+ </div>
+ </div>
  <div className="header-actions">
  <PlayLinks play={play} />
  </div>