Auto darkmode

.github/workflows/main.yml

@@ -9,20 +9,15 @@ jobs:
   build:
     name: Build
     runs-on: ubuntu-latest
-
     steps:
     - uses: actions/checkout@v4
     - uses: oven-sh/setup-bun@v1
-
     - name: Install dependencies
       run: bun install
-
     - name: Build
       run: bun run build
-
     - name: Install Firebase CLI
       run: bun install -g firebase-tools
-
     - name: Deploy to Firebase
       env:
         FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

README.md

@@ -3,7 +3,8 @@
 
 ![Uptime Badge](https://uptime.donado.co/api/badge/4/uptime/24) ![Uptime Badge](https://uptime.donado.co/api/badge/4/ping/24)
 
-<img width="2032" alt="Screenshot 2024-05-05 at 00 52 13" src="https://github.com/sjdonado/monocuco/assets/27580836/6dc68821-e206-4f6a-8d8f-2d8482d519a2">
+<img width="2032" alt="Screenshot 2024-05-08 at 05 42 01" src="https://github.com/sjdonado/monocuco/assets/27580836/ff3e7242-6133-4469-98c8-aa83f1bb0617">
+<img width="2032" alt="Screenshot 2024-05-08 at 05 42 12" src="https://github.com/sjdonado/monocuco/assets/27580836/6f30a3b9-69b8-4c03-a492-20d9d036b5cf">
 
 ## ¿Cómo contribuir?
 
@@ -294,3 +295,4 @@ Agrega la nueva palabra directamente en el archivo `src/data.json`, asegurate de
 
 ## Agradecimientos
 - Andres Urquina: Autor del icono [Ilustración Bailarina - Carnaval de Barranquilla, Colombia.](https://www.flickr.com/photos/andresurquina/16246891029)
+ Andres Urquina: Autor del icono [Ilustración Bailarina - Carnaval de Barranquilla, Colombia.](https://www.flickr.com/photos/andresurquina/16246891029)

src/App.tsx

@@ -36,7 +36,7 @@ const App = function App() {
   const emptyResults = results.length === 0;
 
   return (
-    <div className="flex min-h-screen w-full flex-col justify-start gap-12 border-t-4 border-red-600 p-4">
+    <div className="flex min-h-screen w-full flex-col justify-start gap-12 border-t-4 border-red-600 bg-gray-50 p-4 dark:bg-gray-900 dark:text-gray-300">
       <GithubButtons />
       <div className="flex flex-col items-center">
         <Header />

src/components/LazyLoadingSearchResults.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useEffect, useState } from 'react';
+import { Suspense, startTransition, useEffect, useState } from 'react';
 
 import WordCard from './WordCard';
 
@@ -24,15 +24,15 @@ export default function LazyLoadingSearchResults({
       firstResults.length + lazyLoaded.length !== results.length ||
       (results.length > CHUNK_SIZE && lazyLoaded.length === 0)
     ) {
-      setTimeout(() => {
+      startTransition(() => {
         setLazyLoaded(
           results
             .slice(CHUNK_SIZE, results.length)
             .map((result) => (
               <WordCard key={result.id} word={result.word} currentWord={currentWord} />
             )),
         );
-      }, 100);
+      });
     }
   }, [results, currentWord, firstResults, lazyLoaded]);
 

src/components/SearchBar.tsx

@@ -31,15 +31,15 @@ function Input({ onSearch, word }: { onSearch: (value: string) => void; word: st
       <input
         ref={inputRef}
         type="text"
-        className="h-12 w-full appearance-none rounded-lg rounded-r-none border border-r-0 border-gray-400 px-4 leading-9 outline-none"
+        className="h-12 w-full appearance-none rounded-lg rounded-r-none border border-r-0 border-gray-400 px-4 leading-9 outline-none dark:border-gray-700 dark:bg-gray-900"
         autoComplete="off"
         autoCapitalize="off"
         autoCorrect="off"
         onChange={(e) => onSearch(e.target.value)}
         placeholder="Buscar palabra"
         value={word}
       />
-      <div className="flex h-12 items-center justify-center rounded-r-lg border border-l-0 border-gray-400">
+      <div className="flex h-12 items-center justify-center rounded-r-lg border border-l-0 border-gray-400 bg-white dark:border-gray-700 dark:bg-gray-900">
         <MagnifyingGlassIcon className="mr-4 w-5 text-gray-400" />
       </div>
     </div>

src/components/WordCard.tsx

@@ -25,10 +25,10 @@ export default function WordCard({ word, currentWord }: Props) {
   );
 
   return (
-    <div className="relative flex w-full flex-col items-center justify-start gap-5 rounded-lg border p-4 text-center lg:w-[672px] lg:max-w-2xl">
+    <div className="relative flex w-full flex-col items-center justify-start gap-5 rounded-lg border bg-white p-4 text-center lg:w-[672px] lg:max-w-2xl dark:border-gray-700 dark:bg-gray-900">
       <div className="flex w-full flex-col gap-2">
         {synonyms.length > 0 && (
-          <div className="flex justify-end text-sm">Sin. {highlightText(synonyms, 'px-2')}</div>
+          <div className="flex justify-end text-sm">Sin. {highlightText(synonyms)}</div>
         )}
         {highlightText(word.text, 'h-full text-3xl')}
         <span className="mx-auto w-20 border-t-2 border-red-400" />