updates

halituzan · Nov 6, 2024 · 028dcb6 · 028dcb6
1 parent bc78e17
commit 028dcb6
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 35 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -137,7 +137,13 @@ pre {
 
   @keyframes loadingDots {
     0% { content: '.'; }
-    33% { content: '..'; }
-    66% { content: '...'; }
+    10% { content: '..'; }
+    20% { content: '...'; }
+    40% { content: '....'; }
+    50% { content: '.....'; }
+    60% { content: '......'; }
+    70% { content: '.......'; }
+    80% { content: '........'; }
+    90% { content: '.........'; }
     100% { content: '.'; }
   }
diff --git a/pages/kelimeler/index.tsx b/pages/kelimeler/index.tsx
@@ -1,5 +1,6 @@
 import { useTheme } from "@/app/Configs/ThemeContext";
 import { useState } from "react";
+import { Icon } from "@iconify/react";
 import XLSX from "xlsx";
 const Kelimeler = () => {
   const { theme } = useTheme();
@@ -96,99 +97,105 @@ const Kelimeler = () => {
   return (
     <div className='p-10 flex flex-col w-full'>
       <div className='mb-4'>
-        <h1>Kelime Anlamları Convert Aracı</h1>
-        <p>
+        <h1 className='leading-none md:leading-3 md:text-[2.25rem] text-[1.8rem]'>
+          Kelime Anlamları Convert Aracı
+        </h1>
+        <p className='mb:text-[1.8rem] text-[10px]'>
           Satır atlayarak girdiğiniz kelimeleri TDK datası ile karşılaştırarak
           dataset içinde bulunan kelimelerin anlamlarını bularak excel çıktısı
           olarak alabileceğiniz bir ara yazılımdır.{" "}
         </p>
       </div>
       <div className='flex w-full self-stretch flex-1 h-full'>
-        <div>
+        <div className='flex-1'>
           <label
             htmlFor='words'
             className={`${
               theme === "dark" ? "text-light5" : "text-dark5"
-            } block text-sm font-medium mb-2`}
+            } block font-medium mb-2 md:text-[1rem] text-[10px]`}
           >
             Kelimeler
           </label>
           <textarea
             id='words'
             cols={100}
-            className='block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded border border-gray-300 focus:ring-blue-500 focus:border-blue-500 h-full'
+            className='block md:text-[1rem] text-[10px] p-2.5 w-full text-gray-900 bg-gray-50 rounded border border-gray-300 focus:ring-blue-500 focus:border-blue-500 h-full'
             placeholder='Kelimeleri satır atlayarak girin...'
           ></textarea>
         </div>
 
-        <div className='md:w-[300px] flex items-start mt-10 justify-center px-1 md:px-10'>
+        <div className='md:w-[260px] flex items-start mt-10 justify-center px-1 md:px-10 flex-1 md:flex-none'>
           <button
             className={`${
               theme === "dark" ? "bg-dark3 text-light5" : "bg-light6 text-dark5"
-            } border rounded-lg py-2  px-4`}
+            } border rounded-lg py-2 md:text-[1rem] text-[10px] md:px-4 px-1`}
             onClick={handleButtonClick}
             disabled={loading}
           >
             {loading ? (
-              <div className='relative w-full'>
-                <p className='loading-text'>
-                  Dönüştürülüyor <span className='dots'></span>
+              <div className='relative w-full md:text-[1rem] text-[10px]'>
+                <p className='loading-text md:text-[1rem] text-[10px]'>
+                  Dönüştürülüyor
                 </p>
+                <span className='dots'></span>
               </div>
             ) : (
               <div className='w-full'>Dönüştür</div>
             )}
           </button>
         </div>
 
-        <div className='self-stretch flex flex-col'>
-          <div className='flex-1'>
+        <div className='self-stretch flex flex-col flex-1'>
+          <div className='md:flex-1 flex flex-col'>
             <label
               htmlFor='message'
               className={`${
                 theme === "dark" ? "text-light5" : "text-dark5"
-              } block text-sm font-medium mb-2`}
+              } block md:text-[1rem] text-[10px] font-medium mb-2`}
             >
-              Anlamı Olan Kelimeler
+              TDK'da Olanlar
             </label>
             <textarea
               id='message'
               cols={100}
               value={matches.map((match) => match.madde).join("\n")}
               readOnly
-              className='block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded border border-gray-300 focus:ring-blue-500 focus:border-blue-500 h-full'
+              className='block p-2.5 w-full md:text-[1rem] text-[10px] text-gray-900 bg-gray-50 rounded border border-gray-300 focus:ring-blue-500 focus:border-blue-500 h-[100px] md:h-full'
             ></textarea>
+            <div className='w-full flex justify-end md:text-[1rem] text-[10px] my-2'>
+              <button
+                className={`${
+                  theme === "dark"
+                    ? "bg-green-600 text-light5"
+                    : "bg-green-600 text-light5"
+                } border rounded-lg py-2 px-2 md:px-4 md:text-[1rem] text-[10px] items-center justify-center w-full md:w-auto`}
+                onClick={handleDownload}
+                style={{ display: matches.length > 0 ? "flex" : "none" }}
+              >
+                Xlsx İndir{" "}
+                <Icon
+                  icon='ri:file-download-fill'
+                  className={`md:text-[24px] ml-1 text-[10px]`}
+                />
+              </button>
+            </div>
           </div>
 
-          <div className='h-20 self-end'>
-            <button
-              className={`${
-                theme === "dark"
-                  ? "bg-dark3 text-light5"
-                  : "bg-light6 text-dark5"
-              } border rounded-lg py-2 px-4`}
-              onClick={handleDownload}
-              style={{ display: matches.length > 0 ? "inline" : "none" }}
-            >
-              Excele İndir
-            </button>
-          </div>
-
-          <div className='flex flex-col flex-1'>
+          <div className='flex flex-col md:flex-1'>
             <label
               htmlFor='message'
               className={`${
                 theme === "dark" ? "text-light5" : "text-dark5"
-              } block text-sm font-medium mb-2`}
+              } block md:text-[1rem] text-[10px] font-medium mb-2`}
             >
-              Anlamı Olmayan Kelimeler
+              TDK'da Olmayanlar
             </label>
             <textarea
               id='message'
               cols={100}
               value={nonMatchingWords.join("\n")}
               readOnly
-              className='block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded border border-gray-300 focus:ring-blue-500 focus:border-blue-500 h-full self-stretch'
+              className='block p-2.5 w-full text-gray-900 bg-gray-50 rounded border border-gray-300 focus:ring-blue-500 focus:border-blue-500 h-full self-stretch'
             ></textarea>
           </div>
         </div>