Ui-1 changes and some fixes

Avdhesh-Varshney · Jun 11, 2024 · ff503f5 · ff503f5
1 parent 2d42540
commit ff503f5
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 141 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="icon" type="image/svg+xml" href="/src/assets/Chanakya-Logo.webp" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Chanakya Niti - A website of Chanakya's life style</title>

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.jsx b/src/App.jsx
@@ -3,12 +3,12 @@ import LoadingBar from 'react-top-loading-bar';
 import RequestEpisode from './components/Pages/RequestEpisode';
 import Alert from './components/Alert/Alert';
 import './App.css';
-import QuoteSection from './components/Quotes/QuotesSection';
+import Navbar from './components/Navbar';
 
 function App() {
   const [value, setValue] = useState(1);
   const [episodeNumber, setEpisodeNumber] = useState(1);
-  const [startPlayback, setStartPlayback] = useState(false);
+  const [startPlayback, setStartPlayback] = useState(true);
   const [progress, setProgress] = useState(0);
   const [alert, setAlert] = useState(null);
 
@@ -23,6 +23,11 @@ function App() {
 
   const handleKeyPress = (event) => {
     if (event.key === 'Enter') {
+
+      if(value<1){
+        showAlert("Enter valid episode");
+        return;
+      }
       setEpisodeNumber(value);
       setStartPlayback(true);
     }
@@ -47,32 +52,16 @@ function App() {
   }
 
   return (
+
     <div className='container'>
       <LoadingBar height={4} color='#f11946' progress={progress} />
       {alert && <Alert alert={alert} />}
 
-      <h1 className='display-1 text-center my-2'>
-        <img src="https://raw.githubusercontent.com/Avdhesh-Varshney/Chanakya/main/src/assets/Chanakya-Logo.webp" alt="Chanakya-Image" style={{ width: '5rem' }} />
-        चाणक्य नीति
-      </h1>
-      <QuoteSection/>
+
+      <Navbar handleOnChange={handleOnChange} handleKeyPress={handleKeyPress} value={value} handleKey={handleKey}/>
+      {/* <QuoteSection/> */}
 
-      <div className="row g-3 text-center align-items-center justify-content-center mb-5">
-        <div className="col-auto">
-          <label htmlFor="inputNumber" className="col-form-label">Episode Number</label>
-        </div>
-        <div className="col-auto">
-          <input type="number" id="inputNumber" className="form-control" value={value} onKeyDown={handleKeyPress} onChange={handleOnChange} />
-        </div>
-        <div className='col-auto'>
-          <button
-            onClick={handleKey}
-            className="px-4 py-2 text-white bg-blue-500 hover:bg-blue-700 rounded"
-          >
-            Enter
-          </button>
-        </div>
-      </div>
+
 
       <div className="info-button-container">
         <button className="info-button">
@@ -83,7 +72,8 @@ function App() {
         </div>
       </div>
 
-      {startPlayback && <RequestEpisode episodeNumber={episodeNumber} setEpisodeNumber={setEpisodeNumber} setProgress={setProgress} />}
+      {startPlayback && <RequestEpisode episodeNumber={episodeNumber} setEpisodeNumber={setEpisodeNumber} setProgress={setProgress} showAlert={showAlert}/>}
+
     </div>
   );
 }

diff --git a/src/components/Alert/Alert.jsx b/src/components/Alert/Alert.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 const Alert = (props) => {
   return (
-    <div style={{ height: '50px' }} className='text-center align-center'>
+    <div style={{ height: '50px'}} className='position-absolute z-2 text-center align-center '>
       {props.alert && <div className={`alert alert-warning alert-dismissible fade show`} role="alert">
         {props.alert.msg}
       </div>}

diff --git a/src/components/Cards/Card.css b/src/components/Cards/Card.css
@@ -1,70 +1,12 @@
 body {
     padding: 1rem;
   }
-
-  .custom-card {
-    max-width: 400px;
-    border: 1px solid #ffffff81;
-    box-shadow: 0 7px 20px 5px #00000088;
-    border-radius: .7rem;
-    backdrop-filter: blur(1px);
-    -webkit-backdrop-filter: blur(1px);
-    overflow: hidden;
-    transition: .5s all;
-    padding: 0.1rem;
-  }
-
-
-  .card-img-overlay {
-    display: flex;
-    flex-direction: column;
-    width: 90%;
-    padding: 1rem;
-    backdrop-filter: blur(2px);
-  }
-
-
-  .card-text {
-    margin-bottom: 1rem;
-    font-size: 1.3rem;
-    font-weight: 600;
-    color: #000000;
-    padding-left: 6rem;
-    padding-top: 5rem;
-  }
-
-
-  .rhap_container {
-    background-color: rgba(86, 78, 21, 0.613); /* Semi-transparent background */
-    backdrop-filter: blur(10px);
+  .audio-player{
+    width: 80vw;
     padding: 1.2rem 1rem; 
-    border-radius: 5px;
-    width: 368px;
+    border-radius: 5px
   }
+
 
-  .rhap_main-controls-button {
-    color: #000000 ;
-  }
-
-  .rhap_time {
-    color: #000000 ;
-  }
-
-  .rhap_progress-indicator {
-    background-color: #000000 ;
-  }
-
-  .rhap_progress-filled {
-    background-color: #2e2e2e ;
-  }
-
-
-  .custom-card:hover {
-    border: 1px solid #ffffff;
-    box-shadow: 0 7px 50px 10px #000000aa;
-    transform: scale(1.09);
-    filter: brightness(1.01);
-    backdrop-filter: blur(0px);
-  }
 
 
diff --git a/src/components/Cards/Card.jsx b/src/components/Cards/Card.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import AudioPlayer from 'react-h5-audio-player';
 import 'react-h5-audio-player/lib/styles.css';
-import './Card.css'; 
+import './Card.css';
 
 
 const Card = (props) => {
@@ -23,25 +23,41 @@ const Card = (props) => {
     setEpisodeNumber(episodeNumber + 1);
   };
   return (
-    <div className="card custom-card">
-      <img src="https://raw.githubusercontent.com/Avdhesh-Varshney/Chanakya/main/src/assets/Chanakya.webp" className="card-img" alt="Chanakya-Image" />
-      <div className="card-img-overlay p-3">
-        <h5 className="card-title">{title}</h5>
-        <p className="card-text">{content}</p>
-        <AudioPlayer
-          src={url}
-          onClickPrevious={epsNumber > 1 ? handlePrevious : undefined}
-          onClickNext={handleNext}
-          customAdditionalControls={[]}
-          customVolumeControls={[]}
-          showDownloadProgress={[]}
-          className='audio-player'
-          showSkipControls={true}
-          style={{ color: "white" }}
+    <>
+      {/* <div className="custom-card">
+        <img src="https://raw.githubusercontent.com/Avdhesh-Varshney/Chanakya/main/src/assets/Chanakya.webp" className="card-img" alt="Chanakya-Image" />
+        <div className="card-img-overlay p-3">
+          <h5 className="card-title">{title}</h5>
+          <p className="card-text">{content}</p>
+        </div>
+      </div> */}
+      <div className='d-flex flex-column align-items-center'>
 
-        />
+        <div className="card" style={{ maxWidth: "18rem" }}>
+          <img src="https://miro.medium.com/v2/resize:fit:350/0*EXGUepXEI4YWTcab.jpg" className="card-img" alt="" />
+          <div className="card-img-overlay">
+            <h5 className="card-title">{title}</h5>
+            <p className="card-text">{content}</p>
+          </div>
+        </div>
+        <div className='audio-player' >
+          <AudioPlayer
+            src={url}
+            onClickPrevious={epsNumber > 1 ? handlePrevious : undefined}
+            onClickNext={handleNext}
+            customAdditionalControls={[]}
+            customVolumeControls={[]}
+            showDownloadProgress={[]}
+            className='audio-player'
+            showSkipControls={true}
+            style={{ color: "white" }}
+          />
+
+        </div>
       </div>
-    </div>
+
+
+    </>
   );
 }
 

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import Searchepisode from './Searchepisode'
+
+function Navbar(props) {
+  const { handleOnChange, handleKeyPress, value, handleKey } = props;
+  const ww=window.innerWidth;
+  return (
+    <>
+      <nav className={`d-flex flex-wrap justify-content-${ww>650?'between':'center'} align-items-center my-3`}>
+        <div className='fs-4 my-2 ' >
+          <img src="https://raw.githubusercontent.com/Avdhesh-Varshney/Chanakya/main/src/assets/Chanakya-Logo.webp" alt="Chanakya-Image" width={"auto"} style={{ width: '5rem' }} />
+          चाणक्य नीति
+        </div>
+        <div className='' style={{margin:""}}>
+          <Searchepisode className="" handleOnChange={handleOnChange} handleKeyPress={handleKeyPress} value={value} handleKey={handleKey} />
+
+        </div>
+      </nav>
+    </>
+  )
+}
+
+export default Navbar
diff --git a/src/components/Pages/RequestEpisode.jsx b/src/components/Pages/RequestEpisode.jsx
@@ -18,13 +18,17 @@ const segregate = (url) => {
 };
 
 const RequestEpisode = (props) => {
-  const { episodeNumber, setProgress, setEpisodeNumber } = props;
+  const { episodeNumber, setProgress, setEpisodeNumber, showAlert } = props;
   const [content, setContent] = useState('');
   const [url, setUrl] = useState('');
   const [nextContent, setNextContent] = useState('');
   const [nextTitle, setNextTitle] = useState('');
 
   const fetchData = async (episodeNumber) => {
+    // if (episodeNumber < 1) {
+    //   showAlert("Enter valid episode");
+    //   return;
+    // }
     setProgress(5);
     setEpisodeNumber(episodeNumber);
     let episodeName = '';
@@ -41,6 +45,7 @@ const RequestEpisode = (props) => {
       const response = await fetch('https://api.github.com/repos/hack-boi/Chanakya/contents');
       setProgress(30);
       const data = await response.json();
+      // console.log(data);
       const audioFiles = data
         .filter(file => file.name.endsWith('.mp3') || file.name.endsWith('.wav') || file.name.endsWith('.m4a') || file.name.endsWith('.aac'))
         .map(file => file.download_url);
@@ -72,25 +77,31 @@ const RequestEpisode = (props) => {
   }, [episodeNumber]);
 
   return (
-    <div className="episode-container">
-      <div className="card-container">
-        <Card
-          title={`Episode ${episodeNumber}`}
-          content={content}
-          url={url}
-          setEpisodeNumber={setEpisodeNumber}
-          episodeNumber={episodeNumber}
-          fetchData={fetchData}
-          useEffect={useEffect}
-        />
-      </div>
-      {nextTitle && nextContent && (
-        <div className="next-episode-card">
-          <h5>Up Next:</h5>
-          <p>{nextTitle}  {nextContent}</p>
+    <>
+      <div className="episode-container">
+
+
+        <div className="card-container">
+          <Card
+            title={`Episode ${episodeNumber}`}
+            content={content}
+            url={url}
+            setEpisodeNumber={setEpisodeNumber}
+            episodeNumber={episodeNumber}
+            fetchData={fetchData}
+            useEffect={useEffect}
+          />
         </div>
-      )}
-    </div>
+      </div>
+      {/* {nextTitle && nextContent && (
+        <button type="button" className="btn btn-secondary position-absolute " style={{ right: 20, bottom: 20 }}
+          data-bs-toggle="tooltip" data-bs-placement="top"
+          data-bs-custom-class="custom-tooltip"
+          data-bs-title={nextContent}>
+          Next
+        </button>
+      )} */}
+    </>
   );
 };
 

diff --git a/src/components/Searchepisode.jsx b/src/components/Searchepisode.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+
+function Searchepisode(props) {
+    const { handleOnChange, handleKeyPress, value, handleKey } = props;
+    return (
+        <>
+            <div className="d-flex text-center align-items-center justify-content-center ">
+                <div className="col-auto">
+                    <label htmlFor="inputNumber" className="col-form-label">Search</label>
+                </div>
+                <div className="col-auto mx-2">
+                    <input type="number" id="inputNumber" className="form-control" value={value} onKeyDown={handleKeyPress} onChange={handleOnChange} placeholder='Episode number' />
+                </div>
+                <div className='col-auto'>
+                    <button
+                        onClick={handleKey}
+                        className="btn"
+                    ><i className="fa fa-search" ></i>
+                    </button>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default Searchepisode