Add badge to new champion

kristiandrex · Jul 23, 2021 · 48b6d9e · 48b6d9e
1 parent 147e89f
commit 48b6d9e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "league-of-react",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "private": true,
   "dependencies": {
     "@actions/core": "^1.4.0",

diff --git a/src/components/Thumbnail.js b/src/components/Thumbnail.js
@@ -7,6 +7,7 @@ function Thumbnail({ champion }) {
     <div className="thumbnail">
       <Link href={`/champions/${champion.id}`}>
         <a>
+          {champion.new && <span className="badge">NUEVO</span>}
           <Image
             src={`https://ddragon.leagueoflegends.com/cdn/${champion.version}/img/champion/${champion.image.full}`}
             alt={champion.name}

diff --git a/src/pages/champions/[id].js b/src/pages/champions/[id].js
@@ -42,6 +42,7 @@ function Champion({ champion }) {
             <span className="title">{champion.title}</span>
           </div>
           <div className="images">
+            {champion.new && <span className="badge">NUEVO</span>}
             <img
               src={`http://ddragon.leagueoflegends.com/cdn/img/champion/loading/${champion.id}_0.jpg`}
               alt={champion.name}

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -32,6 +32,16 @@ svg {
   width: 24px;
 }
 
+.badge {
+  background-color: var(--YELLOW);
+  font-weight: bold;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.85rem;
+  border-radius: 0.5rem 0 0 0;
+  position: absolute;
+  z-index: 1;
+}
+
 nav {
   align-items: center;
   background-color: var(--YELLOW);
@@ -116,6 +126,7 @@ main .grid {
   cursor: pointer;
   overflow: hidden;
   text-align: center;
+  position: relative;
 }
 
 .thumbnail img {