added verse page and much more 🔥

MuttakinHasib · Dec 31, 2020 · a5f11af · a5f11af
1 parent eeef905
commit a5f11af
Show file tree

Hide file tree

Showing 20 changed files with 290 additions and 50 deletions.
diff --git a/.eslintcache b/.eslintcache
diff --git a/package.json b/package.json
@@ -9,7 +9,9 @@
   "homepage": "./",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.3.0",
     "@craco/craco": "^6.0.0",
+    "@headlessui/react": "^0.2.0",
     "@tailwindcss/postcss7-compat": "^2.0.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

diff --git a/public/electron.js b/public/electron.js
@@ -4,7 +4,7 @@ const path = require('path');
 
 function createWindow() {
   const win = new BrowserWindow({
-    width: 800,
+    minWidth: 800,
     height: 600,
     // titleBarStyle: 'hidden',
     backgroundColor: '#F8F9FA',

diff --git a/src/App.js b/src/App.js
@@ -2,15 +2,17 @@ import React from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import Navbar from './components/Header/Navbar';
 import Home from './pages/Home';
+import Verse from './pages/Verse';
 
 const App = () => {
   return (
     <Router>
       <Navbar />
       {/* <div className='container mt-5 mx-auto'> */}
-        <Switch>
-          <Route exact path='/' component={Home} />
-        </Switch>
+      <Switch>
+        <Route exact path='/' component={Home} />
+        <Route exact path='/:id' component={Verse} />
+      </Switch>
       {/* </div> */}
     </Router>
   );

diff --git a/src/Redux/reducers/themeReducer.js b/src/Redux/reducers/themeReducer.js
@@ -1,7 +1,7 @@
 import { SET_THEME } from '../_actions/Types';
 
 const initial = {
-  dark: true,
+  dark: window.matchMedia('(prefers-color-scheme: dark)').matches
 };
 
 // eslint-disable-next-line

diff --git a/src/assets/images/Background.png b/src/assets/images/Background.png
diff --git a/src/assets/images/macca.jpg b/src/assets/images/macca.jpg
diff --git a/src/components/Cards/ChaptersCard.js b/src/components/Cards/ChaptersCard.js
@@ -1,10 +1,11 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import icon from '../../assets/images/star.svg';
 import ChapterNameIcon from '../Chapters/ChapterNameIcon';
 import './ChapterCard.scss';
 const ChaptersCard = props => {
-  console.log(props);
+  const isDarkTheme = useSelector(({ theme }) => theme.dark);
   return (
     <Link
       to={`${props.id}`}
@@ -22,10 +23,13 @@ const ChaptersCard = props => {
             <h5 className='text-lg font-semibold text-gray-700 dark:text-gray-400 transition-colors duration-500'>
               {props.name}
             </h5>
-            <span className='translated-name'>{props.translated_en}</span>
+            <span className='text-indigo-400'>{props.translated_en}</span>
           </div>
         </div>
-        <ChapterNameIcon id={props.id} />
+        <ChapterNameIcon
+          id={props.id}
+          color={isDarkTheme ? '#818CF8' : '#6D28D9'}
+        />
       </div>
     </Link>
   );

diff --git a/src/components/Cards/VerseHeaderCard.js b/src/components/Cards/VerseHeaderCard.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import macca from '../../assets/images/Background.png';
+import bismillah from '../../assets/images/bismillah.png';
+
+const VerseHeaderCard = ({ item }) => {
+  return (
+    <div className='w-9/12 mx-auto mt-20'>
+      <div className='bg-gray-100 dark:bg-transparent grid md:gap-5 grid-cols-3 justify-center items-center px-10 py-5 rounded-md border-2 border-dashed border-gray-200 dark:border-gray-700 transition-colors duration-500'>
+        <img src={macca} alt='' className='w-56' />
+        <div className='text-center flex-1'>
+          <h1 className='md:text-3xl text-xl text-gray-700 dark:text-gray-400 transition-colors duration-500 font-headTitle font-bold'>
+            {item?.name}
+          </h1>
+          <h4 className='text-lg font-light text-gray-500 dark:text-gray-500 transition-colors duration-500 font-signika'>
+            ( {item?.translated_en} )
+          </h4>
+          <div className='h-px md:w-48 w-32 bg-gray-200 dark:bg-gray-500 transition-colors duration-500 mx-auto' />
+          <h2 className='text-lg text-gray-600 dark:text-gray-400 transition-colors duration-500 mt-1'>
+            {item?.place} - {item?.count} Ayah
+          </h2>
+        </div>
+        <img src={bismillah} alt='' className='w-56' />
+      </div>
+    </div>
+  );
+};
+
+export default VerseHeaderCard;
diff --git a/src/components/Chapters/ChapterNameIcon.js b/src/components/Chapters/ChapterNameIcon.js
@@ -115,7 +115,7 @@ const CONTENT = {
   113: '971',
   114: '972',
 };
-export default styled.span`
+export default styled.span.attrs(({ color }) => ({ style: { color } }))`
   font-family: 'surah_names' !important;
   font-style: normal;
   font-weight: normal;
@@ -124,8 +124,8 @@ export default styled.span`
   line-height: 1;
   font-size: 40px;
   float: right;
-  ${'' /* color: ${({ theme }) => theme.colors.text}; */}
-  color: #672CBC;
+  transition: color .5s ease;
+  ${'' /* color: #672CBC; */}
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   &:before {

diff --git a/src/components/Chapters/Chapters.js b/src/components/Chapters/Chapters.js
@@ -4,7 +4,7 @@ import ChaptersCard from '../Cards/ChaptersCard';
 
 const Chapters = () => {
   return (
-    <div className='grid gap-10 grid-flow-row md:grid-rows-76 lg:grid-rows-38 md:grid-flow-col'>
+    <div className='grid gap-10 grid-flow-row grid-rows-57 lg:grid-rows-38 md:grid-flow-col'>
       {chaptersList.map(chapter => (
         <ChaptersCard key={chapter.id} {...chapter} />
       ))}

diff --git a/src/components/Container.js b/src/components/Container.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Container = ({ children }) => (
+  <div className='mx-auto max-w-screen-xl px-5'>{children}</div>
+);
+
+export default Container;
diff --git a/src/components/Header/Navbar.js b/src/components/Header/Navbar.js
@@ -1,44 +1,52 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import ButtonWithIcon from '../Buttons/ButtonWithIcon';
 import { light, logo, moon, setting } from '../../assets/Icons';
 import useDarkMode from '../../hooks/useDarkMode';
 import SearchBar from './SearchBar';
+import Settings from '../Settings/Settings';
 
 const Navbar = () => {
   const [isDarkTheme, setIsDarkTheme] = useDarkMode();
+  const [isOpen, setIsOpen] = useState(false);
+
   return (
-    <div className='bg-white sticky top-0 z-50 dark:bg-darkNav transition-colors duration-500'>
-      <div className='max-w-screen-xl px-5 mx-auto'>
-        <nav className='flex py-4 justify-between items-center'>
-          <Link
-            to='/'
-            className='focus:outline-none font-signika hover:text-gray-600 text-lg font-bold text-gray-500 dark:text-gray-400 dark:hover:text-gray-100 transition-colors duration-500'
-          >
-            <div className='flex justify-center items-center'>
-              {logo}
-              <h3 className='ml-3 text-lg font-bold text-current'>Al Quran</h3>
-            </div>
-          </Link>
-          <div className='justify-end'>
-            <div className='flex items-center space-x-5'>
-              <SearchBar {...{ isDarkTheme }} />
-              <ButtonWithIcon
-                name={isDarkTheme ? 'Light' : 'Dark'}
-                icon={isDarkTheme ? light : moon}
-                onClick={() => setIsDarkTheme(!isDarkTheme)}
-                className='hidden sm:flex'
-              />
-              <ButtonWithIcon
-                name='Settings'
-                icon={setting}
-                onClick={() => alert('Settings')}
-              />
+    <>
+      <div className='bg-white sticky top-0 z-50 dark:bg-darkNav transition-colors duration-500'>
+        <div className='max-w-screen-xl px-5 mx-auto'>
+          <nav className='flex py-4 justify-between items-center'>
+            <Link
+              to='/'
+              className='focus:outline-none font-signika hover:text-gray-600 text-lg font-bold text-gray-500 dark:text-gray-400 dark:hover:text-gray-100 transition-colors duration-500'
+            >
+              <div className='flex justify-center items-center'>
+                {logo}
+                <h3 className='ml-3 text-lg font-bold text-current'>
+                  Al Quran
+                </h3>
+              </div>
+            </Link>
+            <div className='justify-end'>
+              <div className='flex items-center space-x-5'>
+                <SearchBar {...{ isDarkTheme }} />
+                <ButtonWithIcon
+                  name={isDarkTheme ? 'Light' : 'Dark'}
+                  icon={isDarkTheme ? light : moon}
+                  onClick={() => setIsDarkTheme(!isDarkTheme)}
+                  className='hidden sm:flex'
+                />
+                <ButtonWithIcon
+                  name='Settings'
+                  icon={setting}
+                  onClick={() => setIsOpen(!isOpen)}
+                />
+              </div>
             </div>
-          </div>
-        </nav>
+          </nav>
+        </div>
       </div>
-    </div>
+      <Settings {...{ isOpen, setIsOpen }} />
+    </>
   );
 };
 

diff --git a/src/components/Header/SearchBar.js b/src/components/Header/SearchBar.js
@@ -18,7 +18,7 @@ const SearchBar = ({ isDarkTheme }) => {
       .ant-select-selector { 
         background-color: ${
           isDarkTheme ? 'rgb(20,33,46)' : '#F9FAFB'
-        } !important;
+        } !important; transition: background-color .5s cubic-bezier(0.4, 0, 0.2, 1) !important;
         border:none !important;
       }
       .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{
@@ -27,7 +27,7 @@ const SearchBar = ({ isDarkTheme }) => {
       .ant-select-arrow {display:none !important;}
       .ant-select-selection-placeholder{color: ${
         isDarkTheme ? '#aaa' : 'rgba(17, 24, 39,.6)'
-      }!important;}
+      }!important; transition: color .5s cubic-bezier(0.4, 0, 0.2, 1) !important;}
     `,
         }}
       />
@@ -36,6 +36,7 @@ const SearchBar = ({ isDarkTheme }) => {
           showSearch
           className='font-semibold dark:text-gray-300'
           style={{ width: 200 }}
+          autoFocus
           placeholder='Select a surah'
           optionFilterProp='children'
           onChange={val => {
@@ -54,7 +55,7 @@ const SearchBar = ({ isDarkTheme }) => {
         </Select>
         <button
           type='submit'
-          class='absolute right-0 top-0 mt-2 mr-4 focus:outline-none'
+          className='absolute right-0 top-0 mt-2 mr-4 focus:outline-none'
         >
           <svg
             className='h-4 w-4 fill-current dark:text-gray-400 transition-colors duration-500'

diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js
@@ -0,0 +1,60 @@
+import { Transition } from '@headlessui/react';
+import React from 'react';
+import SettingsContainer from './SettingsContainer';
+
+const Settings = props => {
+  return (
+    <Transition show={props?.isOpen || false}>
+      <div className='fixed inset-0 overflow-hidden z-30'>
+        <div className='absolute inset-0 overflow-hidden'>
+          <Transition.Child
+            enter='transition-opacity ease-linear duration-300'
+            enterFrom='opacity-0'
+            enterTo='opacity-100'
+            leave='transition-opacity ease-linear duration-300'
+            leaveFrom='opacity-100'
+            leaveTo='opacity-0'
+          >
+            <div
+              className='absolute inset-0 bg-gray-600 bg-opacity-75 transition-opacity'
+              aria-hidden='true'
+              onClick={() => props?.setIsOpen(!props?.isOpen)}
+            ></div>
+          </Transition.Child>
+          <section
+            className='absolute inset-y-0 right-0 pl-10 max-w-full flex'
+            aria-labelledby='slide-over-heading'
+          >
+            <Transition.Child
+              enter='transition ease-in-out duration-300 transform'
+              enterFrom='translate-x-full'
+              enterTo='translate-x-0'
+              leave='transition ease-in-out duration-300 transform'
+              leaveFrom='translate-x-0'
+              leaveTo='translate-x-full'
+            >
+              <div className='relative w-screen max-w-md h-screen'>
+                <div className='h-full flex flex-col py-6 bg-white dark:bg-darkNav transition-colors duration-500 shadow-xl overflow-y-auto'>
+                  <div className='mt-16 pt-2 relative flex-1 px-4 sm:px-6'>
+                    {/* Replace with your content */}
+                    <div className='absolute inset-0 px-4 sm:px-6'>
+                      <div
+                        className='h-full border-2 border-dashed border-gray-200 dark:border-gray-700 transition-colors duration-500 p-5'
+                        aria-hidden='true'
+                      >
+                        <SettingsContainer/>
+                      </div>
+                    </div>
+                    {/* /End replace */}
+                  </div>
+                </div>
+              </div>
+            </Transition.Child>
+          </section>
+        </div>
+      </div>
+    </Transition>
+  );
+};
+
+export default Settings;