Added edit option

public/changelog/changelog.json

@@ -1,4 +1,15 @@
 [
+    {
+        "version": "3.8.0",
+        "name": "Routine Edit",
+        "emoji": "📝",
+        "date": "2023-06-29",
+        "description": [
+            "You can now edit your routines.",
+            "Improved UI",
+            "Maybe added some bugs too. 🤔"
+        ]
+    },
     {
         "version": "3.7.2",
         "name": "UX Improvements",

src/App.tsx

@@ -13,6 +13,7 @@ import { loadTheme } from './lib/theme'
 const LazyAbout = React.lazy(() => import('./pages/About'))
 // const LazyStart = React.lazy(() => import('./pages/Start'))
 const LazyMore = React.lazy(() => import('./pages/More'))
+const EditRoutine = React.lazy(() => import('./pages/Edit/EditRoutine'))
 const LazyApplyRoutine = React.lazy(() => import('./pages/ApplyRoutine'))
 const LazyManageRoutine = React.lazy(() => import('./pages/ManageRoutine'))
 const LazyNewRoutine = React.lazy(() => import('./pages/NewRoutine'))
@@ -61,6 +62,7 @@ export default function App() {
           <Route path='/applyRoutine' element={< LazyApplyRoutine />} />
           <Route path='/manageRoutines' element={< LazyManageRoutine />} />
           <Route path='/more' element={<LazyMore />} />
+          <Route path='/editRoutine' element={< EditRoutine />} />
           <Route path='/calendar' element={< Calendar />} />
           <Route path='/notifications' element={< LazyNotifications />} />
           <Route path='/author/buyMeCoffee' element={< BuyMeCoffee />} />

src/components/BottomModal.tsx

@@ -1,12 +1,14 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import delay, { df } from '../lib/delay'
 import Emoji from 'emoji-store'
+import { useDark } from '../lib/lib'
 
 export default function BottomModal({ show, children, btnTxt, cb }: { show: boolean, children: any, btnTxt?: Array<any>, cb?: Array<Function | any> }) {
    const [isShow, setIsShow] = useState(false)
    const [backDisplay, setBackDisplay] = useState(false)
+   const dark = useMemo(useDark, [])
 
    useEffect(() => {
       let t1: any;
@@ -33,7 +35,7 @@ export default function BottomModal({ show, children, btnTxt, cb }: { show: bool
    return <>
       <div
          className={`duration-[300ms] h-[100dvh] w-full ${backDisplay ? 'flex' : 'hidden'}
-          fixed bg-transparent top-0 transition-all ease-linear left-0 z-[100] modal-bg-linear-grad
+          fixed bg-transparent top-0 transition-all ease-linear left-0 z-[100] ${dark ? '' : 'modal-bg-linear-grad'}
           ${isShow ? 'opacity-100' : 'opacity-0'}`}>
       </div>
       <div
@@ -71,7 +73,7 @@ export function BasicModal({ text, desc, emoji }: { text: any, desc?: any, emoji
       <div className='grid animate-bounce-slow mt-10 mb-10'>
          <img src={Emoji.get(emoji || '🤔')} alt="emoji" className={`place-1-1 blur-lg opacity-50 mx-auto mt-5 w-24 h-24`} />
          <img src={Emoji.get(emoji || '🤔')} alt="emoji" className={`place-1-1 mx-auto mt-5 w-24 h-24 z-10`} />
-         </div>
+      </div>
       <p className='text-center text-grey text-xs mt-5 font-[450] px-[5%] text-balance'>
          {desc}
       </p>

src/info.ts

@@ -1,6 +1,6 @@
 const details = {
     name: 'routine',
-    version: '3.7.2',
+    version: '3.8.0',
     url : 'https://codeAbinash.github.io/routine/'
 }
 export default details

src/lib/lib.ts

@@ -1,3 +1,5 @@
+import { Routine } from "./dateMethods";
+
 export function capitalize(str: string) {
     return str.charAt(0).toUpperCase() + str.slice(1)
 }
@@ -72,11 +74,33 @@ export function throttle<T extends (...args: any[]) => void>(
 
 
 
-export const blank_callback = [() => { }, () => { }]
+export const BLANK_CALLBACK_ARR_2 = [() => { }, () => { }]
 // export blank_callback
 
 export function parseEmoji(emoji: string) {
     if (!emoji) return ['']
     let emojis = [...new Intl.Segmenter().segment(emoji)].map(x => x.segment)
     return emojis
+}
+
+
+
+export function searchRoutine(routines: Routine[], query: string) {
+    // Return filtered routines 
+    if (!query) return routines
+    return routines.filter((routine: Routine) => {
+        return routine.name.toLowerCase().includes(query)
+            || routine.description?.toLowerCase().includes(query)
+        // || routine.sub?.toLowerCase().includes(query)
+        // || routine.type.toLowerCase().includes(query)
+        // || routine.emoji.toLowerCase().includes(query)
+    })
+    // return typedList
+}
+
+
+export function useDark() {
+    // If the HTML tag has the .dark class...
+    console.log('Checking if dark mode')
+    return document.documentElement.classList.contains('dark')
 }