indent-fix

- standardize the indentation of the whole code. - adding .vscode settings for 2-space indentation for editor.
Avdhesh-Varshney · Jun 15, 2024 · 6d0defa · 6d0defa
1 parent 3875484
commit 6d0defa
Show file tree

Hide file tree

Showing 16 changed files with 479 additions and 285 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true
+}
diff --git a/assets/project-intro.webm b/assets/project-intro.webm
diff --git a/index.html b/index.html
@@ -3,14 +3,16 @@
 
 <head>
   <meta charset="UTF-8" />
-  <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>
   <meta name="description"
     content="Explore the life and teachings of Chanakya, an ancient Indian philosopher, economist, and political strategist." />
   <meta name="keywords"
     content="Chanakya, Niti, lifestyle, philosophy, Indian philosophy, economics, political science" />
-    <script type="application/ld+json">
+
+  <title>Chanakya Niti - A website of Chanakya's life style</title>
+  <link rel="icon" type="image/svg+xml" href="/src/assets/Chanakya-Logo.webp" />
+
+  <script type="application/ld+json">
     {
       "@context": "https://schema.org",
       "@type": "WebSite",
@@ -25,12 +27,19 @@
     }
   </script>
 
+</head>
+
 <body>
   <div id="root"></div>
+
   <script type="module" src="/src/main.jsx"></script>
-    <div>
-       <div class="wave"></div>
-       <div class="wave"></div>
-       <div class="wave"></div>
-    </div>
+
+  <div>
+    <div class="wave"></div>
+    <div class="wave"></div>
+    <div class="wave"></div>
+  </div>
+
 </body>
+
+</html>
diff --git a/src/App.css b/src/App.css
@@ -4,6 +4,7 @@ input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+
 /* info button css */
 .info-button-container {
   position: fixed;
@@ -42,14 +43,14 @@ input[type=number]::-webkit-outer-spin-button {
   margin-top: 10px;
   font-size: 14px;
   position: relative;
-  bottom: 60px; 
+  bottom: 60px;
   left: 50%;
   transform: translateX(-50%);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  width: 250px; 
+  width: 250px;
   z-index: 10;
 }
 
 .info-button-container:hover .info-box {
   display: block;
-}
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from 'react';
-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 TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import { options } from './assets/options.js';
+import React, { useState, useEffect } from "react";
+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 TextField from "@mui/material/TextField";
+import Autocomplete from "@mui/material/Autocomplete";
+import { options } from "./assets/options.js";
 
 
 function App() {
@@ -21,12 +21,12 @@ function App() {
     if (!isNaN(newValue)) {
       setValue(newValue);
     } else {
-      setValue('');
+      setValue("");
     }
   };
 
   const handleKeyPress = (event) => {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       setEpisodeNumber(value);
       setStartPlayback(true);
     }
@@ -45,22 +45,21 @@ function App() {
     setAlert({
       msg: message
     })
-     setTimeout(() => {
-       setAlert(null);
-     }, 3500);
+    setTimeout(() => {
+      setAlert(null);
+    }, 3500);
   }
 
   return (
-    <div className='container'>
-      <LoadingBar height={4} color='#f11946' progress={progress} />
+    <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 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/>
-
+      <QuoteSection />
 
       <div className="row g-3 text-center align-items-center justify-content-center mb-5">
         <div className="col-auto">
@@ -71,14 +70,13 @@ function App() {
           <Autocomplete
             disablePortal
             className="bg-white"
-
             options={options}
             sx={{ width: 300 }}
             renderInput={(params) => <TextField onSelect={handleOnChange} onChange={handleOnChange} {...params} label="Input Ep.1 to 806 (Finale)" />}
           />
-
         </div>
-        <div className='col-auto'>
+
+        <div className="col-auto">
           <button
             onClick={handleKey}
             className="px-4 py-2 text-white bg-blue-500 hover:bg-blue-700 rounded"
@@ -96,7 +94,7 @@ function App() {
           <p>Explore the life and teachings of Chanakya, an ancient Indian philosopher, economist, and political strategist. Learn about his contributions to Indian philosophy and political science.</p>
         </div>
       </div>
-      
+
       {startPlayback && <RequestEpisode episodeNumber={episodeNumber} setEpisodeNumber={setEpisodeNumber} setProgress={setProgress} />}
     </div>
   );

diff --git a/src/components/Alert/Alert.css b/src/components/Alert/Alert.css
@@ -1,8 +1,9 @@
-.addMarginBottom{
-    margin-bottom: 5% ;
+.addMarginBottom {
+  margin-bottom: 5%;
 }
-@media (min-width:321px) and (max-width:621px){
-    .addMarginBottom{
-        margin-bottom: 12% ;
-    }
+
+@media (min-width:321px) and (max-width:621px) {
+  .addMarginBottom {
+    margin-bottom: 12%;
+  }
 }
diff --git a/src/components/Alert/Alert.jsx b/src/components/Alert/Alert.jsx
@@ -1,8 +1,8 @@
-import React from 'react'
-import './Alert.css'
+import React from "react"
+import "./Alert.css"
 const Alert = (props) => {
   return (
-    <div style={{ height: '50px'}} className='text-center align-center addMarginBottom'>
+    <div style={{ height: "50px" }} className="text-center align-center addMarginBottom">
       {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,64 @@
 body {
-    padding: 1rem;
-  }
+  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;
-  }
+.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;
+}
 
-
-  .rhap_container {
-    background-color: rgba(86, 78, 21, 0.613); /* Semi-transparent background */
-    backdrop-filter: blur(10px);
-    padding: 1.2rem 1rem; 
-    border-radius: 5px;
-    width: 368px;
-  }
-
-  .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);
-  }
-
-
+.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);
+  backdrop-filter: blur(10px);
+  padding: 1.2rem 1rem;
+  border-radius: 5px;
+  width: 368px;
+}
+
+.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,15 +1,17 @@
-import React, { useState } from 'react';
-import AudioPlayer from 'react-h5-audio-player';
-import 'react-h5-audio-player/lib/styles.css';
-import './Card.css'; 
-
+import React, { useState } from "react";
+import AudioPlayer from "react-h5-audio-player";
+import "react-h5-audio-player/lib/styles.css";
+import "./Card.css";
 
 const Card = (props) => {
   const { title, content, url, setEpisodeNumber, episodeNumber, fetchData, useEffect } = props;
+
   const [epsNumber, setEpsNumber] = useState(episodeNumber);
+
   useEffect(() => {
     fetchData(epsNumber);
   }, [epsNumber]);
+
   useEffect(() => {
     setEpsNumber(episodeNumber);
   }, [episodeNumber]);
@@ -18,10 +20,12 @@ const Card = (props) => {
     setEpsNumber(epsNumber - 1);
     setEpisodeNumber(episodeNumber - 1);
   };
+
   const handleNext = () => {
     setEpsNumber(epsNumber + 1);
     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" />
@@ -35,10 +39,9 @@ const Card = (props) => {
           customAdditionalControls={[]}
           customVolumeControls={[]}
           showDownloadProgress={[]}
-          className='audio-player'
+          className="audio-player"
           showSkipControls={true}
           style={{ color: "white" }}
-
         />
       </div>
     </div>

diff --git a/src/components/Cards/Cards.css b/src/components/Cards/Cards.css
@@ -1,3 +1,3 @@
 .rhap_time {
-    color: white;
+  color: white;
 }