album list

davidtacer · Jun 1, 2022 · 4f3f7a0 · 4f3f7a0
1 parent 8468fb6
commit 4f3f7a0
Show file tree

Hide file tree

Showing 9 changed files with 385 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -1 +0,0 @@
-# Spotify-Starter

diff --git a/src/App.css b/src/App.css
@@ -1 +1,127 @@
 @import '~antd/dist/antd.css';
+
+.ant-layout {
+    min-height: 100vh;
+}
+
+.ant-layout-sider {
+    background-image: linear-gradient(#1e2422, #000000);
+    background-attachment:fixed;
+    width: 800px;
+    padding: 30px;
+}
+
+.ant-layout-content {
+    background-image: linear-gradient(#494B4A, #030404);
+    background-attachment:fixed;
+}
+
+.ant-layout-footer {
+    background-color: #292929;
+    padding-bottom: 4px;
+    padding-top: 15px;
+}
+
+.ant-tabs-top > .ant-tabs-nav::before {
+    border-bottom: 0px;
+}
+
+.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+    color: white;
+    text-shadow: 0 0 0.25px currentcolor;
+}
+
+.ant-tabs-tab-btn:focus {
+    color: white;
+}
+
+.ant-tabs-tab {
+    color: rgb(125, 125, 125);
+    font-size: 18px;
+    letter-spacing: 2px;
+}
+
+.ant-tabs-tab:hover {
+    color: white;
+}
+
+.ant-tabs-ink-bar {
+    background: #1DB954;
+    width: 10px;
+}
+
+.ant-slider-track {
+    background-color: #1DB954;
+}
+
+.ant-slider:hover .ant-slider-track {
+    background-color: #1DB954;
+}
+
+.ant-slider-handle {
+    border: 0px
+}
+
+.ant-slider-rail {
+    background-color: #3E3E3E;
+}
+
+.logo {
+    width:50px;
+    margin-bottom: 20px;
+}
+
+.searchBar {
+    border-top: 2px solid rgb(125, 125, 125);
+    border-bottom: 2px solid rgb(125, 125, 125);
+    padding: 15px 0px;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+.sideBar {
+    color: white;
+    font-size: 20px;
+    font-weight: 500;
+    letter-spacing: 1px;
+}
+
+.recentPlayed {
+    border-top: 2px solid rgb(125, 125, 125);
+    border-bottom: 2px solid rgb(125, 125, 125);
+    padding: 15px 0px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: calc(100vh - 400px);
+}
+
+.recentTitle {
+    color: rgb(125, 125, 125);
+    font-size: 15px;
+    font-weight: 400;
+}
+
+.install {
+    display: flex;
+    justify-content: space-between;
+}
+
+.contentWindow {
+    padding: 50px 0px;
+}
+
+.footer {
+    position: sticky;
+    bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items:center;
+    background-color: #292929;
+    color: rgb(205, 203, 203) !important;
+}
+
+
+
+
diff --git a/src/App.js b/src/App.js
@@ -1,15 +1,43 @@
 import React from 'react';
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route, Link } from "react-router-dom";
 import Home from "./pages/Home";
 import Album from './pages/Album';
 import './App.css';
+import { Layout } from 'antd';
+import DataVallis from './images/logoSp.svg';
+import {SearchOutlined, DownCircleOutlined} from "@ant-design/icons";
+
+const { Footer, Sider, Content } = Layout;
 
 const App = () => {
   return(
-    <Routes>
-      <Route path="/" element={<Home />} />
-      <Route path="/album" element={<Album />} />
-    </Routes>
+      <Layout>
+          <Sider width={300} className="sideBar">
+              <img src={DataVallis} alt="logo" className="logo"/>
+              <div className="searchBar">
+                  <span>Search</span>
+                  <SearchOutlined style={{fontSize:'30px'}}/>
+              </div>
+              <Link to="/">
+                <p style={{color: "1DB954"}}>Home</p>
+              </Link>
+              <p>Your Music</p>
+              <div className="recentPlayed">
+                  <p className="recentTitle">RECENTLY PLAYED</p>
+                  <div className="install">
+                      <span>Install app</span>
+                      <DownCircleOutlined style={{fontSize: "30px"}}/>
+                  </div>
+              </div>
+          </Sider>
+          <Content className="contentWindow">
+              <Routes>
+                  <Route path="/" element={<Home />} />
+                  <Route path="/album" element={<Album />} />
+              </Routes>
+          </Content>
+      </Layout>
+
   )
 };
 

diff --git a/src/images/Spotify.png b/src/images/Spotify.png
diff --git a/src/images/logoSp.svg b/src/images/logoSp.svg
diff --git a/src/pages/Album.css b/src/pages/Album.css
@@ -0,0 +1,107 @@
+.albumContent {
+    padding: 10px 40px;
+}
+
+.topBan {
+    display: flex;
+    gap:30px;
+}
+
+.albumCover {
+    width:200px;
+}
+
+.albumDeets {
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    color: rgb(205, 203, 203);
+}
+
+.title {
+    color:white;
+    font-size: 40px;
+    font-weight: bold;
+}
+
+.artist {
+    font-size: 20px;
+    color:white;
+}
+
+.playButton {
+    padding: 10px;
+    background-color: #1DB954;
+    width: 120px;
+    color:white;
+    display: flex;
+    justify-content: center;
+    margin-top: 35px;
+    margin-bottom: 35px;
+    border-radius: 25px;
+    letter-spacing: 1.5px;
+    transition: transform 0.4s;
+}
+.openButton {
+    padding: 10px;
+    background-color: transparent;
+    width: 200px;
+    color:white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap:10px;
+    margin-top: 35px;
+    margin-bottom: 35px;
+    border: 2px solid white;
+    border-radius: 25px;
+    letter-spacing: 1.5px;
+    transition: transform 0.4s;
+}
+
+.openLogo{
+    height:20px;
+}
+
+.playButton:hover {
+    cursor: pointer;
+    transform: scale(1.05);;
+}
+
+.openButton:hover{
+    cursor: pointer;
+    transform: scale(1.05);;
+}
+
+.tableHeader {
+    border-bottom: 1px solid rgb(67, 67, 67);
+    display: flex;
+    color: rgb(125, 125, 125);
+    letter-spacing: 1.4px;
+    font-size: 16px;
+    font-weight: 500;
+    padding-bottom: 8px;
+}
+
+.numberHeader {
+    display: flex;
+    justify-content: center;
+    width: 10%;
+}
+
+.titleHeader {
+    width: 80%;
+    padding-left: 5%;
+    display: flex;
+    justify-content: start;
+}
+
+.tableContent {
+    border-bottom: 1px solid rgb(67, 67, 67);
+    display: flex;
+    color: rgb(125, 125, 125);
+    font-size: 16px;
+    font-weight: 500;
+    padding-bottom: 13px;
+    padding-top: 13px;
+}
diff --git a/src/pages/Album.js b/src/pages/Album.js
@@ -1,12 +1,34 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React           from 'react';
+import { useLocation } from 'react-router-dom';
+import './Album.css';
+import {apiResponse}   from '../helpers/apiCallResponse';
 
 const Album = () => {
-
+  const {state:album} = useLocation();
+
+  const albumDetails = apiResponse;
+
   return (
   <>
-  <div className="container">
-  <Link to="/" className="link">Home</Link>
+  <div className="albumContent">
+    <div className="topBan">
+      <img
+          src={album.image}
+          alt="albumcover"
+          className="albumCover"
+        />
+      <div className="albumDeets">
+        <div>Album</div>
+        <div className="title">{album.title}</div>
+        <div className="artist">
+          {albumDetails && JSON.parse(albumDetails[0].metadata).artist}
+        </div>
+        <div>
+          {albumDetails && JSON.parse(albumDetails[0].metadata).year} •{" "}
+          {albumDetails && albumDetails.length} Songs
+        </div>
+      </div>
+    </div>
   </div>
   </>
 )

diff --git a/src/pages/Home.css b/src/pages/Home.css
@@ -1,3 +1,36 @@
 .link {
   margin: 20px;
-}
+}
+.featuredTitle {
+  color: white;
+  font-size: 35px;
+  font-weight: 600;
+  justify-content: center;
+  display: flex;
+  letter-spacing: 2px;
+  margin-top: 20px;
+  margin-bottom: 30px;
+}
+
+.albums {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 0 auto;
+  max-width: 1000px;
+  width: 100%;
+  gap: 20px;
+  row-gap: 50px;
+  -webkit-box-pack: start;
+}
+
+.albumSelection {
+  color:rgb(205, 203, 203);
+  text-align: center;
+  transition: transform .4s;
+}
+
+.albumSelection:hover {
+  color: white;
+  transform: scale(1.05);
+}