add: loading & more

Syafwan000 · Feb 16, 2022 · 744cca6 · 744cca6
1 parent 1990088
commit 744cca6
Show file tree

Hide file tree

Showing 11 changed files with 180 additions and 25 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,7 +3,7 @@ import NavbarTop from "./components/NavbarTop";
 import Surah from "./components/Surah";
 import Ayat from "./components/Ayat";
 import About from "./components/About";
-import Footer from "./components/Footer";
+import NotFound from "./components/NotFound";
 
 function App() {
   return (
@@ -13,8 +13,8 @@ function App() {
         <Route path="/" element={<Surah />}></Route>
         <Route path="/surah/:id" element={<Ayat />}></Route>
         <Route path="/about" element={<About />}></Route>
+        <Route path="*" element={<NotFound />}></Route>
       </Routes>
-      <Footer />
     </>
   )
 }

diff --git a/src/components/About.css b/src/components/About.css
@@ -0,0 +1,26 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+:root {
+    --primary-color: #041C32;
+    --secondary-color: #04293A;
+    --third-color: #064663;
+    --white-color: #efefef;
+}
+
+.about-wrapper {
+    font-family: 'Poppins', sans-serif;
+    margin-top: 100px;
+}
+
+.about-title {
+    font-weight: 600;
+    color: var(--primary-color);
+}
+
+.about-link, .about-link:hover {
+    color: #38a9c5;
+}
+
+.logo-react {
+    color: #4fbfdb;
+}
diff --git a/src/components/About.js b/src/components/About.js
@@ -1,7 +1,16 @@
+import { Container } from "react-bootstrap";
+import { SiReact } from "react-icons/si";
+import './About.css';
+
 function About() {
     return (
         <>
-            <h1>Page About</h1>
+            <Container className="about-wrapper">
+                <h3 className="about-title">About</h3>
+                <p>Data diambil dari <a className="about-link" href="https://api.quran.sutanlab.id/" target="_blank" rel="noreferrer">Quran API</a> (<a className="about-link" href="https://github.com/sutanlab" target="_blank" rel="noreferrer">sutanlab</a>)</p>
+                <p>Dibuat dengan React <SiReact className="logo-react" /></p>
+                <p>Qur'an Digital &copy; 2022 - Present | <a className="about-link" href="https://github.com/syafwan000" target="_blank" rel="noreferrer">Muhammad Syafwan Ardiansyah</a></p>
+            </Container>
         </>
     )
 }

diff --git a/src/components/Ayat.css b/src/components/Ayat.css
@@ -61,12 +61,17 @@
     text-align: end;
 }
 
-.ayat-translation {
-    font-family: 'Poppins', sans-serif;
+.ayat-number {
+    font-weight: 800;
+    background-color: var(--primary-color);
+    padding: 4px 10px;
+    color: var(--white-color);
+    border-radius: 0.25rem;
 }
 
-.loading-wrapper {
-    height: 100vh;
+.ayat-translation {
+    font-family: 'Poppins', sans-serif;
+    line-height: 32px;
 }
 
 .loading {

diff --git a/src/components/Ayat.js b/src/components/Ayat.js
@@ -3,6 +3,7 @@ import { Link, useParams } from "react-router-dom";
 import { FiChevronsLeft } from "react-icons/fi";
 import { useEffect, useLayoutEffect, useState } from "react";
 import { Helmet } from "react-helmet";
+import Footer from "./Footer";
 import './Ayat.css';
 
 function Ayat() {
@@ -25,7 +26,7 @@ function Ayat() {
             setLoading(false);
         }
         getAyat();
-    }, []);
+    }, [params]);
 
     useLayoutEffect(function() {
         window.scrollTo(0, 0);
@@ -34,7 +35,7 @@ function Ayat() {
     if(loading) {
         return (
             <>
-                <Container className="loading-wrapper">
+                <Container>
                     <h1 className="loading text-center">Loading Ayat <Spinner animation="border" /></h1>
                 </Container>
             </>
@@ -68,13 +69,16 @@ function Ayat() {
                     <Row key={a.number.inSurah}>
                         <Col className="ayat-wrapper">
                             <p className="ayat">{a.text.arab}</p>
-                            <p className="ayat-translation">{a.translation.id}</p>
+                            <p className="ayat-translation">
+                                <span className="ayat-number">{a.number.inSurah}</span> {a.translation.id}
+                            </p>
                             <audio controls src={a.audio.primary}></audio>
                         </Col>
                     </Row>
                     )
                 })}
             </Container>
+            <Footer />
         </>
     )
 }

diff --git a/src/components/NotFound.css b/src/components/NotFound.css
@@ -0,0 +1,27 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+:root {
+    --primary-color: #041C32;
+    --secondary-color: #04293A;
+    --third-color: #064663;
+    --white-color: #efefef;
+}
+
+.notfound-wrapper {
+    font-family: 'Poppins', sans-serif;
+    margin-top: 100px;
+}
+
+.notfound-title {
+    font-weight: 600;
+}
+
+.btn-back {
+    background-color: var(--primary-color) !important;
+    border: 1px solid var(--primary-color) !important;
+}
+
+.btn-back a, .btn-back a:hover {
+    color: var(--white-color);
+    text-decoration: none;
+}
diff --git a/src/components/NotFound.js b/src/components/NotFound.js
@@ -0,0 +1,22 @@
+import { Button, Container } from "react-bootstrap";
+import { Helmet } from "react-helmet";
+import { Link } from "react-router-dom";
+import './NotFound.css';
+
+function NotFound() {
+    return (
+        <>
+            <Helmet>
+                <title>404 Halaman Tidak Ditemukan</title>
+            </Helmet>
+            <Container className="notfound-wrapper text-center">
+                <h3 className="notfound-title">404 Halaman Tidak Ditemukan</h3>
+                <Button className="btn-back" varian="light">
+                    <Link to="/">Kembali</Link>
+                </Button>
+            </Container>
+        </>
+    )
+}
+
+export default NotFound;
diff --git a/src/components/Surah.css b/src/components/Surah.css
@@ -49,7 +49,7 @@
     margin-bottom: 5px;
 }
 
-.surah-revelation {
+.surah-info {
     font-family: 'Poppins', sans-serif;
 }
 
@@ -67,13 +67,6 @@
     color: var(--white-color);
 }
 
-.btn-read-tafsir {
-    font-family: 'Poppins', sans-serif;
-    background-color: var(--third-color) !important;
-    color: var(--white-color) !important;
-    margin-left: 5px;
-}
-
 .title-container {
     font-family: 'Poppins', sans-serif;
     margin-top: 90px;
@@ -88,11 +81,24 @@
     color: var(--primary-color);
 }
 
-.loading-wrapper {
-    height: 100vh;
-}
-
 .loading {
     font-family: 'Poppins', sans-serif;
     margin-top: 100px;
+    color: var(--primary-color) !important;
+}
+
+@media (max-width: 1200px) {
+    .surah-number, .surah-title {
+        font-size: 20px;
+    }
+}
+
+@media (max-width: 768px) {
+    .surah-number, .surah-title {
+        font-size: 16px;
+    }
+
+    .surah-arti, .surah-info {
+        font-size: 15px;
+    }
 }
diff --git a/src/components/Surah.js b/src/components/Surah.js
@@ -2,6 +2,8 @@ import { Container, Row, Col, Button, Card, Spinner } from "react-bootstrap";
 import { useEffect, useLayoutEffect, useState } from "react";
 import { Helmet } from "react-helmet";
 import { Link } from "react-router-dom";
+import Footer from "./Footer";
+import Tafsir from "./Tafsir";
 import './Surah.css';
 
 function Surah() {
@@ -26,7 +28,7 @@ function Surah() {
     if(loading) {
         return (
             <>
-                <Container className="loading-wrapper">
+                <Container>
                     <h1 className="loading text-center">Loading Surah <Spinner animation="border" /></h1>
                 </Container>
             </>
@@ -59,16 +61,19 @@ function Surah() {
                                         </span>
                                     </h4>
                                     <p className="surah-arti">"{surat.name.translation.id}"</p>
-                                    <p className="surah-revelation">{surat.revelation.id}</p>
+                                    <p className="surah-info">
+                                        {surat.numberOfVerses} Ayat | {surat.revelation.id}
+                                    </p>
                                     <Button className="btn-read-surah shadow-none" variant="light"><Link to={`/surah/${surat.number}`}>Baca Surah</Link></Button>
-                                    <Button className="btn-read-tafsir shadow-none" variant="light">Tafsir</Button>
+                                    <Tafsir>{surat.tafsir.id}</Tafsir>
                                 </Card.Body>
                             </Card>
                         </Col>
                     )
                 })}
                 </Row>
             </Container>
+            <Footer />
         </>
     )
 }

diff --git a/src/components/Tafsir.css b/src/components/Tafsir.css
@@ -0,0 +1,23 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+:root {
+    --primary-color: #041C32;
+    --secondary-color: #04293A;
+    --third-color: #064663;
+    --white-color: #efefef;
+}
+
+.btn-read-tafsir {
+    font-family: 'Poppins', sans-serif;
+    background-color: var(--third-color) !important;
+    color: var(--white-color) !important;
+    margin-left: 5px;
+}
+
+.tafsir-text {
+    margin-top: 12px;
+    margin-bottom: 0;
+    font-family: 'Raleway', sans-serif;
+    font-weight: 500;
+}
diff --git a/src/components/Tafsir.js b/src/components/Tafsir.js
@@ -0,0 +1,28 @@
+import { Button, Collapse } from "react-bootstrap";
+import { useState } from "react";
+import './Tafsir.css';
+
+function Tafsir(props) {
+    const [open, setOpen] = useState(false);
+
+    function tafsirHandler() {
+        setOpen(!open);
+    }
+
+    return (
+        <>
+            <Button 
+                className="btn-read-tafsir shadow-none" 
+                variant="light"
+                onClick={tafsirHandler}
+                >
+                    Tafsir
+            </Button>
+            <Collapse in={open}>
+                <p className="tafsir-text">{props.children}</p>
+            </Collapse>
+        </>
+    )
+}
+
+export default Tafsir;