add tag name

This commit is contained in:
Achmad
2018-07-25 16:43:46 +07:00
parent f34b7d0d5c
commit 7f5166b111
2 changed files with 112 additions and 0 deletions

View File

@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom'
import { search } from './BooksAPI'
import './search.css'
class SearchPage extends Component {
@@ -74,6 +75,92 @@ class SearchPage extends Component {
}
</ol>
</div>
<div className="tags">
<ul>
<li><span class="badge">Android</span></li>
<li><span class="badge">Art</span></li>
<li><span class="badge">Artificial Intelligence</span></li>
<li><span class="badge">Astronomy</span></li>
<li><span class="badge">Austen</span></li>
<li><span class="badge">Baseball</span></li>
<li><span class="badge">Basketball</span></li>
<li><span class="badge">Basketball</span></li>
<li><span class="badge">Bhagat</span></li>
<li><span class="badge">Basketball</span></li>
<li><span class="badge">Biography</span></li>
<li><span class="badge">Brief</span></li>
<li><span class="badge">Business</span></li>
<li><span class="badge">Camus</span></li>
<li><span class="badge">Cervantes</span></li>
<li><span class="badge">Christie</span></li>
<li><span class="badge">Classics</span></li>
<li><span class="badge">Comics</span></li>
<li><span class="badge">Cook</span></li>
<li><span class="badge">Cricket</span></li>
<li><span class="badge">Cycling</span></li>
<li><span class="badge">Desai</span></li>
<li><span class="badge">Design</span></li>
<li><span class="badge">Development</span></li>
<li><span class="badge">Digital Marketing</span></li>
<li><span class="badge">Drama</span></li>
<li><span class="badge">Drawing</span></li>
<li><span class="badge">Dumas</span></li>
<li><span class="badge">Education</span></li>
<li><span class="badge">Everything</span></li>
<li><span class="badge">Fantasy</span></li>
<li><span class="badge">Film</span></li>
<li><span class="badge">Finance</span></li>
<li><span class="badge">First</span></li>
<li><span class="badge">Fitness</span></li>
<li><span class="badge">Football</span></li>
<li><span class="badge">Future</span></li>
<li><span class="badge">Games</span></li>
<li><span class="badge">Gandhi</span></li>
<li><span class="badge">Homer</span></li>
<li><span class="badge">Horror</span></li>
<li><span class="badge">Hugo</span></li>
<li><span class="badge">Ibsen</span></li>
<li><span class="badge">Journey</span></li>
<li><span class="badge">Kafka</span></li>
<li><span class="badge">King</span></li>
<li><span class="badge">Lahiri</span></li>
<li><span class="badge">Larsson</span></li>
<li><span class="badge">Learn</span></li>
<li><span class="badge">Football</span></li>
<li><span class="badge">Literary Fiction</span></li>
<li><span class="badge">Make</span></li>
<li><span class="badge">Manage</span></li>
<li><span class="badge">Marquez</span></li>
<li><span class="badge">Money</span></li>
<li><span class="badge">Mystery</span></li>
<li><span class="badge">Negotiate</span></li>
<li><span class="badge">Painting</span></li>
<li><span class="badge">Philosophy</span></li>
<li><span class="badge">Photography</span></li>
<li><span class="badge">Poetry</span></li>
<li><span class="badge">Production</span></li>
<li><span class="badge">Programming</span></li>
<li><span class="badge">React</span></li>
<li><span class="badge">Redux</span></li>
<li><span class="badge">River</span></li>
<li><span class="badge">Robotics</span></li>
<li><span class="badge">Rowling</span></li>
<li><span class="badge">Satire</span></li>
<li><span class="badge">Science Fiction</span></li>
<li><span class="badge">Shakespeare</span></li>
<li><span class="badge">Singh</span></li>
<li><span class="badge">Swimming</span></li>
<li><span class="badge">Tale</span></li>
<li><span class="badge">Thrun</span></li>
<li><span class="badge">Time</span></li>
<li><span class="badge">Tolstoy</span></li>
<li><span class="badge">Travel</span></li>
<li><span class="badge">Ultimate</span></li>
<li><span class="badge">Virtual Reality</span></li>
<li><span class="badge">Web Development</span></li>
<li><span class="badge">Tolstoy</span></li>
</ul>
</div>
</div>
)
}

25
src/search.css Normal file
View File

@@ -0,0 +1,25 @@
.tags > ul {
list-style: none;
}
.tags > ul > li {
display: inline-block;
padding: 8px 5px;
}
.tags > ul > li > span {
border-radius: 25px;
padding: 5px 17px;
background: #f2f2f2;
font-size: 12px;
color: #8e8e8e;
}
.tags > ul > li > span:hover {
border-radius: 25px;
padding: 5px 17px;
background: #ececec;
font-size: 12px;
color: #8e8e8e;
}