Added two more fonts

Added Settings for font selection

README.md

@@ -53,7 +53,7 @@ npm run electron:package:linux
 - [x] Favorites
 - [x] Dark Mode
 - [x] Virtual Keyboard
-- [ ] Ability to change the default font
+- [x] Font Settings
 
 ## Contributing
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sayad-ganj",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Balochi Dictionary",
   "private": true,
   "main": "public/electron.js",

src/App.js

@@ -9,12 +9,18 @@ import Navigation from './components/Navigation/Navigation';
 import SearchResults from './components/Search/SearchResults';
 import WordDetail from './components/WordDetail/WordDetail';
 import Favorites from './components/Favorites/Favorites';
+import { setCurrentFont, getCurrentFont } from './util/localStorage';
+import { FontSettingsModal } from './components/Modals/FontSettingsModal';
 
 const App = () => {
+
   const prefersDarkMode = window.matchMedia(
     '(prefers-color-scheme: dark)'
   ).matches
 
+  const [font, setFont] = useState(getCurrentFont())
+  const [isFontSettingsModalOpen, setIsFontSettingsModalOpen] = useState(false)
+
   const [isDarkMode, setIsDarkMode] = useState(
     localStorage.getItem('theme')
       ? localStorage.getItem('theme') === 'dark'
@@ -29,7 +35,30 @@ const App = () => {
     } else {
       document.documentElement.classList.remove('dark')
     }
-  }, [isDarkMode])
+
+    setCurrentFont(font)
+    switch (font) {
+      case 0:
+        document.body.classList.remove('font-Estedad')
+        document.body.classList.remove('font-Vazirmatn')
+        document.body.classList.add('font-Amiri')
+        break;
+      case 1:
+        document.body.classList.remove('font-Amiri')
+        document.body.classList.remove('font-Vazirmatn')
+        document.body.classList.add('font-Estedad')
+        break;
+      case 2:
+        document.body.classList.remove('font-Estedad')
+        document.body.classList.remove('font-Amiri')
+        document.body.classList.add('font-Vazirmatn')
+        break;
+      default:
+        break;
+    }
+
+  }, [isDarkMode, font])
+
 
   const handleDarkMode = (isDarkMode) => {
     setIsDarkMode(isDarkMode)
@@ -39,9 +68,9 @@ const App = () => {
   return (
     <div className='ُmin-h-screen relative'>
       <div className='min-h-[calc(100vh-28px)] h-[calc(100vh-28px)] absolute top-0 bottom-0 right-0 border-l border-gray-300 dark:border-gray-700 w-12'>
-        <Navigation isDarkMode={isDarkMode} handleDarkMode={handleDarkMode} />
+        <Navigation isDarkMode={isDarkMode} handleDarkMode={handleDarkMode} handleFontSettingsModal={() => setIsFontSettingsModalOpen(true)} />
       </div>
-      <div className='h-[calc(100vh-28px)] absolute top-0 bottom-0 left-0 right-12  overflow-auto'>
+      <div className='h-[calc(100vh-28px)] absolute top-0 bottom-0 left-0 right-12 overflow-auto'>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/history" element={<History />} />
@@ -50,6 +79,7 @@ const App = () => {
           <Route path="/word/:id" element={<WordDetail />} />
         </Routes>
       </div>
+      <FontSettingsModal isOpen={isFontSettingsModalOpen} handleClose={() => setIsFontSettingsModalOpen(false)} font={font} handleFontChange={(ifont) => setFont(parseInt(ifont))} />
     </div>
   )
 }

src/components/Navigation/Navigation.jsx

@@ -1,32 +1,35 @@
 import { HiHome, HiMoon, HiSun } from 'react-icons/hi'
 import { MdHistory, MdFavorite } from 'react-icons/md'
+import { BsFonts } from 'react-icons/bs'
 import React from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
 import cx from 'classnames'
 
-const Navigation = ({ isDarkMode, handleDarkMode }) => {
+const Navigation = ({ isDarkMode, handleDarkMode, handleFontSettingsModal }) => {
     const navigate = useNavigate()
     const location = useLocation()
     return (
         <div className='h-full items-center text-center flex flex-col justify-between'>
             <div className='mt-1'>
-                <HiHome className={cx('inline-flex w-10 h-10 mt-1 cursor-pointer self-center text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg p-1', {
+                <HiHome className={cx('inline-flex w-10 h-10 mt-1 cursor-pointer self-center text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg p-1', {
                     'text-black dark:text-white bg-gray-300 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500': location.pathname === "/"
                 })} onClick={() => { location.pathname !== "/" && navigate("/") }} />
 
-                <MdFavorite className={cx('inline-flex w-10 h-10 mt-1 cursor-pointer self-center text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg p-1', {
-                    'text-black dark:text-white bg-gray-300 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500': location.pathname === "/favorites"
+                <MdFavorite className={cx('inline-flex w-10 h-10 mt-1 cursor-pointer self-center text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg p-1', {
+                    'text-black dark:text-white bg-gray-300 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600': location.pathname === "/favorites"
                 })} onClick={() => { location.pathname !== "/favorites" && navigate("/favorites") }} />
 
-                <MdHistory className={cx('inline-flex w-10 h-10 mt-1 cursor-pointer self-center text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg p-1', {
-                    'text-black dark:text-white bg-gray-300 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500': location.pathname === "/history"
+                <MdHistory className={cx('inline-flex w-10 h-10 mt-1 cursor-pointer self-center text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg p-1', {
+                    'text-black dark:text-white bg-gray-300 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600': location.pathname === "/history"
                 })} onClick={() => { location.pathname !== "/history" && navigate("/history") }} />
 
 
             </div>
             <div className='mb-1'>
-                {isDarkMode ? <HiSun className='inline-flex w-10 h-10 cursor-pointer self-center text-gray-400 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg p-1' onClick={() => { handleDarkMode(false) }} />
-                    : <HiMoon className='inline-flex w-10 h-10 cursor-pointer self-center text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg p-1' onClick={() => { handleDarkMode(true) }} />}
+                <BsFonts className={'inline-flex w-10 h-10 mt-1 cursor-pointer self-center dark:text-gray-300 text-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg p-1'} onClick={() => handleFontSettingsModal()} />
+
+                {isDarkMode ? <HiSun className='inline-flex w-10 h-10 cursor-pointer self-center text-gray-400 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg p-1' onClick={() => { handleDarkMode(false) }} />
+                    : <HiMoon className='inline-flex w-10 h-10 cursor-pointer self-center text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg p-1' onClick={() => { handleDarkMode(true) }} />}
             </div>
         </div>
     )

src/components/WordDetail/WordDetail.jsx

@@ -3,7 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { HiChevronRight } from 'react-icons/hi';
 import { MdContentCopy, MdFavorite, MdFavoriteBorder, MdInfoOutline } from 'react-icons/md';
 import Skeleton from '../Skeleton';
-import { InfoModal } from '../modals/InfoModal';
+import { InfoModal } from '../Modals/InfoModal';
 import { useToast } from '../../hooks/useToast'
 import { addToFavorites, deleteFavorite, isInFavorites } from '../../util/localStorage'
 

src/components/modals/BaseModal.jsx

@@ -1,9 +1,10 @@
 import React, { Fragment, useRef } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
 import { RiCloseCircleLine } from 'react-icons/ri'
+import cx from 'classnames'
 
 
-export const BaseModal = ({ title, children, isOpen, handleClose }) => {
+export const BaseModal = ({ title, isScrollable, children, isOpen, handleClose }) => {
     let closeButtonRef = useRef(null)
 
     return (
@@ -26,9 +27,11 @@ export const BaseModal = ({ title, children, isOpen, handleClose }) => {
                         leave="ease-in duration-200"
                         leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                         leaveTo="opacity-0 translate-y-4 sm:translate-0 sm:scale-95">
-                        <div className="w-full h-[calc(100vh-70px)] inline-block align-bottom bg-white rounded-lg text-left overflow-auto shadow-xl transform translate-all sm:align-middle sm:max-w-xl sm:w-full dark:bg-gray-800">
+                        <div className={cx('w-full inline-block align-bottom bg-white rounded-lg text-left overflow-auto shadow-xl transform translate-all sm:align-middle sm:max-w-xl sm:w-full dark:bg-gray-800',
+                            { 'h-[calc(100vh-70px)]': isScrollable }
+                        )}>
                             <div className="absolute sticky top-0 p-2 bg-white dark:bg-gray-800">
-                                <RiCloseCircleLine  className="h-6 w-6 cursor-pointer dark:stroke-white" onClick={() => handleClose()} />
+                                <RiCloseCircleLine className="h-6 w-6 cursor-pointer dark:stroke-white" onClick={() => handleClose()} />
                             </div>
                             <div className='p-2'>
                                 <div className="text-center">

src/components/modals/FontSettingsModal.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { BaseModal } from './BaseModal'
+export const FontSettingsModal = ({ isOpen, handleClose, font, handleFontChange }) => {
+    const fonts = ["Amiri", "Estedad", "Vazirmatn"]
+
+    return (
+        <BaseModal title={'نبشتہئے شکل'} isOpen={isOpen} handleClose={handleClose}>
+            <div className="flex flex-col mt-2 divide-y">
+                {/* font family */}
+                <div className="flex justify-between gap-4 p-3">
+                    <div className="mt-2">
+                        <p className='text-xl'>فونٹ</p>
+                    </div>
+                    <div>
+                        <select className="form-select cursor-pointer outline-none w-full max-w-xs rounded-lg border border-gray-400 dark:border-gray-600 p-1" onChange={(e) => handleFontChange(e.target.value)} defaultValue={font}>
+                            {fonts.map((ifont) => (
+                                <option key={ifont} value={fonts.indexOf(ifont)} className={"font-" + ifont}>{ifont}</option>
+                            ))}
+                        </select>
+                    </div>
+                </div>
+
+            </div>
+        </BaseModal>
+    )
+}

src/components/modals/InfoModal.jsx

@@ -112,7 +112,7 @@ export const InfoModal = ({ isOpen, handleClose }) => {
 
 
     return (
-        <BaseModal title={'رھشونی'} isOpen={isOpen} handleClose={handleClose} >
+        <BaseModal title={'رھشونی'} isOpen={isOpen} isScrollable={true} handleClose={handleClose} >
             <div className='text-center items-center content-center'>
                 <div className="text-xl text-gray-500 dark:text-gray-300">
                     <p>گْونڈگل ءُ ٹِک کہ ماں اے بزانت بلد ءَ پہ اشارہ ءَ کار مرزبوتگ اَنت</p>

src/index.css

@@ -34,28 +34,28 @@
   }
 
   body {
-    @apply font-Amiri overflow-hidden w-full h-full 
+    @apply font-Amiri overflow-hidden w-full h-full
   }
-
-::-webkit-scrollbar {
-  width: 10px;
-}
 
-/* Track */
-::-webkit-scrollbar-track {
-  @apply bg-gray-300 dark:bg-gray-500;
-  /* border-radius: 5px; */
-}
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
 
-/* Handle */
-::-webkit-scrollbar-thumb {
-  @apply bg-gray-400 dark:bg-gray-400;
-}
+  /* Track */
+  ::-webkit-scrollbar-track {
+    @apply bg-gray-300 dark:bg-gray-500;
+    /* border-radius: 5px; */
+  }
 
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  @apply bg-gray-500 dark:bg-gray-300;
-}
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    @apply bg-gray-400 dark:bg-gray-400;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-500 dark:bg-gray-300;
+  }
 }
 
 @tailwind components;
@@ -64,7 +64,17 @@
 
 @font-face {
   font-family: "Amiri";
-  src: url("/src/font/Amiri-Regular.ttf");
+  src: url("/src/fonts/Amiri-Regular.ttf");
+}
+
+@font-face {
+  font-family: "Estedad";
+  src: url("/src/fonts/Estedad-Regular.ttf");
+}
+
+@font-face {
+  font-family: "Vazirmatn";
+  src: url("/src/fonts/Vazirmatn-Regular.ttf");
 }
 
 html.dark {
@@ -98,4 +108,4 @@ html.dark {
   content: '';
   flex: 1;
   flex-basis: 0;
-}
+}

src/util/localStorage.js

@@ -1,5 +1,6 @@
 const searchHistoryKey = "searchHistory"
 const favoritesKey = "favorites"
+const currentFontKey = "currentFont"
 
 export const getHistory = () => {
     return JSON.parse(localStorage.getItem(searchHistoryKey)) || []
@@ -47,4 +48,12 @@ export const deleteFavorite = (id) => {
 
 export const deleteFavorites = () => {
     localStorage.setItem(favoritesKey, JSON.stringify([]))
+}
+
+export const setCurrentFont = (font) => {
+    localStorage.setItem(currentFontKey, font)
+}
+
+export const getCurrentFont = () => {
+    return localStorage.getItem(currentFontKey) | 0
 }

tailwind.config.js

@@ -6,6 +6,8 @@ module.exports = {
   theme: {
     fontFamily: {
       Amiri: ["Amiri", "sans-serif"],
+      Estedad: ["Estedad", "sans-serif"],
+      Vazirmatn: ["Vazirmatn", "sans-serif"],
     },
     extend: {},
   },