change table UI + add share button + refactor props

cleophass · Oct 27, 2023 · d0efbf0 · d0efbf0
1 parent 99b7ffe
commit d0efbf0
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
     "react-spinners": "^0.13.8"
   },
   "devDependencies": {

diff --git a/src/components/HomePage/HomePage.jsx b/src/components/HomePage/HomePage.jsx
@@ -1,16 +1,13 @@
 // src/components/HomePage.jsx
 
-import React, { useState } from 'react';
+import React from 'react';
 import './HomePage.css';
 import TextInput from '../TextInput/TextInput';
 import ButtonSubmit from '../ButtonSubmit/ButtonSubmit';
 
-function HomePage({ parentOnClick }) {
-  const [artist, setArtist] = useState('');
-  const [song, setSong] = useState('');
-
+function HomePage({ parentOnClick, parentSetSong, parentSetArtist }) {
   const handleSubmit = () => {
-    parentOnClick(artist, song); 
+    parentOnClick(); 
   };
 
   return (
@@ -23,8 +20,8 @@ function HomePage({ parentOnClick }) {
           <div className='subtitle'>Discover your new favorite songs</div>
         </div>
         <div className='form-container'>
-          <TextInput setState={setSong} placeholder={'Enter a song name'}/>
-          <TextInput setState={setArtist} placeholder={'Enter an artist'}/>
+          <TextInput setState={parentSetSong} placeholder={'Enter a song name'}/>
+          <TextInput setState={parentSetArtist} placeholder={'Enter an artist'}/>
           <ButtonSubmit parentOnClick={handleSubmit} placeholder={'Recommend songs'}/>
         </div>
       </div>

diff --git a/src/components/PageSelector/PageSelector.jsx b/src/components/PageSelector/PageSelector.jsx
@@ -20,6 +20,8 @@ const PageSelector = () => {
         { artistName: "Doja Cat", songName: "Paint The Town Red" },
         ];
     const [showHome, setShowHome] = useState(true);
+    const [artist, setArtist] = useState("");
+    const [song, setSong] = useState("");
 
     const homePage = useIsHome();
     const toggleHomePage = useIsHomeUpdate();
@@ -50,11 +52,11 @@ const PageSelector = () => {
             {
                 showHome ?
                 <div className="home-container" style={{transform: homePage ? 'translateY(0)' : 'translateY(-100vh)', opacity: homePage ? '100%' : '0%'}}>
-                    <HomePage parentOnClick={handleAPICall} />
+                    <HomePage parentOnClick={handleAPICall} parentSetSong={setSong} parentSetArtist={setArtist}/>
                 </div>
                 :
                 <div>
-                    <RecommendationPage recommendations={simulatedRecommendations} parentOnClick={handleBackToHome} />
+                    <RecommendationPage parentSong={song} parentArtist={artist} recommendations={simulatedRecommendations} parentOnClick={handleBackToHome} />
                 </div>
             }
         </div>

diff --git a/src/components/Recommendation/RecommendationPage.css b/src/components/Recommendation/RecommendationPage.css
@@ -14,6 +14,10 @@
   margin: auto auto;
   transition: all 2s ease-in-out;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .back-button {
@@ -61,19 +65,88 @@
   }
 }
 
+.title-container-rec {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 42vw;
+  height: 20vh;
+}
+
+.title-rec {
+  font-family: 'Mukta', sans-serif;
+  position: absolute;
+  font-size: 1rem;
+  color: white;
+  letter-spacing: 0.1rem;
+  font-weight: 200;
+
+  opacity: 0.6;
+}
+
+.subtitle-rec {
+  font-family: 'Mukta', sans-serif;
+  position: absolute;
+
+  font-size: 2.5rem;
+  color: white;
+  letter-spacing: 0.1rem;
+  font-weight: 400;
+  margin: 1.75rem 0 0 0;
+}
+
 .recommendation-table {
-  width: 100%;
+  width: 42vw;
   border-collapse: collapse;
+  border: none;
+  text-align: left;
+  user-select: none;
 }
 
-.recommendation-table th,
-.recommendation-table td {
-  border: 1px solid #ddd;
+.recommendation-table th {
+  font-family: 'Mukta', sans-serif;
+  border: none;
+  background-color: none;
   text-align: left;
-  padding: 8px;
+
+  padding: .2rem 0 .2rem 0;
+
+  font-size:  .7rem;
+  color: white;
+  opacity: 0.6;
+  letter-spacing: 0.1rem;
+  font-weight: 300;
 }
 
-.recommendation-table th {
-  background-color: #f2f2f2;
+.recommendation-table td {
+  font-size:  1rem;
+  color: white;
+  letter-spacing: 0.05rem;
+  font-weight: 400;
+
+  padding: .45rem 0 .45rem 0;
+
+  border-bottom: rgba(255, 255, 255, 0.1) 1px solid;
+  transition: all 0.2s ease-in-out;
+
+}
+
+.recommendation-row:hover td {
+  color: rgb(83, 183, 255)
+}
+
+.share-icon {
+  border-radius: 10rem;
+  padding: .3rem;
+  opacity: 0.2;
+  transition: all 0.2s ease-in-out;
+}
+
+.share-icon:hover {
+  opacity: 1;
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
+.share-icon:active {
+  transform: scale(0.9);
+}
diff --git a/src/components/Recommendation/RecommendationPage.jsx b/src/components/Recommendation/RecommendationPage.jsx
@@ -2,8 +2,9 @@
 
 import React from "react";
 import "./RecommendationPage.css";
+import { BiShare } from "react-icons/bi";
 
-function RecommendationPage({ recommendations, parentOnClick }) {
+function RecommendationPage({ parentSong, parentArtist, recommendations, parentOnClick }) {
   const [justLoaded, setJustLoaded] = React.useState(false);
 
   React.useEffect(() => { // just animation purposes
@@ -19,18 +20,26 @@ function RecommendationPage({ recommendations, parentOnClick }) {
         <button className="back-button" onMouseUp={parentOnClick}>
           <a className="back-title">Take me back to home page</a>
         </button>
+        <div className='title-container-rec'>
+          <div className='title-rec'>RECOMMENDATIONS FROM</div>
+          <div className='subtitle-rec'>{parentSong} by {parentArtist}</div>
+        </div>
         <table className="recommendation-table">
           <thead>
             <tr>
-              <th>Artiste</th>
-              <th>Titre</th>
+              <th>SONG</th>
+              <th>ARTIST</th>
+              <th></th>
             </tr>
           </thead>
           <tbody>
             {recommendations.map((rec, index) => (
-              <tr key={index}>
-                <td>{rec.artistName}</td>
+              <tr key={index} className="recommendation-row">
                 <td>{rec.songName}</td>
+                <td>{rec.artistName}</td>
+                <td className='row-action-icon'>
+                  <BiShare className="share-icon" size={17}/>
+                </td>
               </tr>
             ))}
           </tbody>