diff --git a/src/components/Search.jsx b/src/components/Search.jsx
index 1931df8..3cf0456 100644
--- a/src/components/Search.jsx
+++ b/src/components/Search.jsx
@@ -96,6 +96,13 @@ class SearchSongs extends React.Component {
}
class SearchDisc extends React.Component {
+ getReleaseYear = (release) => {
+ const releaseDate = new Date(release);
+ return (
+ {releaseDate.getFullYear()}
+ )
+ }
+
render() {
const disc = this.props.disc;
return (
@@ -103,7 +110,7 @@ class SearchDisc extends React.Component {
{disc.cover_art ?
: }
- {disc.title}
+ {disc.title} {disc.date && this.getReleaseYear(disc.date)}
{disc.artist[0].name}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 0402cb5..556d51d 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -3,7 +3,8 @@
--white: hsl(0, 0%, 99%);
--gray-1: hsl(0, 0%, 95%);
--gray-2: hsl(0, 0%, 85%);
- --gray-3: hsl(0, 0%, 30%);
+ --gray-3: hsl(0, 0%, 80%);
+ --gray-4: hsl(0, 0%, 30%);
--black: hsl(0, 0%, 20%);
--accent: hsl(354, 81%, 56%);
@@ -152,7 +153,7 @@ ul.entity_list {
padding-left: 1rem;
.small {
- color: var(--gray-3);
+ color: var(--gray-4);
font-size: .8rem;
}
}
@@ -175,6 +176,17 @@ ul.entity_list {
margin: 1rem;
border: 1px solid var(--gray-2)
}
+
+ .release-date {
+ display: inline-block;
+ font-size: .7rem;
+ background-color: var(--gray-4);;
+ color: var(--white);
+ padding: .1rem .5rem;
+ border-radius: .25rem;
+ text-align: center;
+ line-height: 1;
+ }
}
}