code7-leia 0.1.144 → 0.1.146

package/dist/components/MultiSelect/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Language } from '../../interface/Language';
 interface Option {
     label: string;
     value: string;
@@ -9,6 +10,7 @@ interface MultiSelectProps {
     setPresset: React.Dispatch<React.SetStateAction<string[]>>;
     setOptions: React.Dispatch<React.SetStateAction<Option[]>>;
     modal: boolean;
+    language: keyof Record<'en' | 'pt-br' | 'es', Language>;
 }
 declare const MultiSelect: React.FC<MultiSelectProps>;
 export default MultiSelect;

package/dist/interface/Language.d.ts

@@ -22,6 +22,7 @@ declare type Buttons = {
     send: string;
     delete: string;
     test: string;
+    addNewOpinion: string;
 };
 declare type TestArea = {
     description: string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.144",
+  "version": "0.1.146",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/FileArea/index.tsx

@@ -173,8 +173,8 @@ export const FileArea = () => {
               />
               </div>
               <div className='presset'>
-                <p>Presset</p>
-                <MultiSelect setOptions={setOptionsPresset} options={optionsPresset} presset={presset} setPresset={setPresset} modal={modal} />
+                <p>{t.fileArea.presset}</p>
+                <MultiSelect setOptions={setOptionsPresset} options={optionsPresset} presset={presset} setPresset={setPresset} modal={modal} language={language} />
               </div>              
             </ModalContent>
             <ModalFooter>

package/src/components/FileArea/styles.tsx

@@ -24,10 +24,10 @@ export const Container = styled.div<ContainerProps>`
       #loading::after {
         content: "";
         border: 4px solid #f3f3f3; /* Cor do símbolo de carregamento */
-        border-top: 4px solid #35373f; /* Cor do símbolo de carregamento */
+        border-top: 4px solid #5a5d68; /* Cor do símbolo de carregamento */
         border-radius: 50%;
-        width: 15px;
-        height: 15px;
+        width: 13px;
+        height: 13px;
         animation: spin 1s linear infinite;
       }
 
@@ -93,6 +93,12 @@ export const Container = styled.div<ContainerProps>`
     padding-top: 10px;
     display: flex;
     flex-direction: column;
+
+    p {
+      font-size: 14px;
+      weight: 600;
+      padding: 4px 0;
+    }
   }
 
   #warning {

package/src/components/MultiSelect/index.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import * as S from './styles';
+import { getLanguage } from '../../utils/getLanguage'
+import { Language } from '../../interface/Language';
 
 interface Option {
   label: string;
@@ -12,11 +14,13 @@ interface MultiSelectProps {
   setPresset: React.Dispatch<React.SetStateAction<string[]>>;
   setOptions: React.Dispatch<React.SetStateAction<Option[]>>;
   modal: boolean;
+  language: keyof Record<'en' | 'pt-br' | 'es', Language>;
 }
 
-const MultiSelect: React.FC<MultiSelectProps> = ({ options, presset, setPresset, setOptions, modal }) => {
+const MultiSelect: React.FC<MultiSelectProps> = ({ options, presset, setPresset, setOptions, modal, language }) => {
   const [expanded, setExpanded] = useState(false);
   const [newOption, setNewOption] = useState('');
+  const t = getLanguage(language)
 
   useEffect(() => {
     setExpanded(false)
@@ -64,7 +68,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ options, presset, setPresset,
           <S.OverSelect>
             <input
               type="text"
-              placeholder="Add new option"
+              placeholder={t.buttons.addNewOpinion}
               value={newOption}
               onChange={handleInputChange}
               onKeyPress={handleInputKeyPress}

package/src/components/MultiSelect/styles.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
 export const MultiSelectWrapper = styled.div`
-  width: 200px;
+  width: 100%;
+  height: 40px;
 `;
 
 export const SelectBox = styled.div`
@@ -10,6 +11,8 @@ export const SelectBox = styled.div`
   select {
     width: 100%;
     font-weight: bold;
+    height: 40px;
+    border-radius: 4px;
   }
 `;
 
@@ -19,6 +22,18 @@ export const OverSelect = styled.div`
   right: 0;
   top: 0;
   bottom: 0;
+
+  input {
+    height: 38px;
+    width: 95%;
+    border: none;
+    margin: 1px;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 3px #6690ff;
+    }
+  }
 `;
 
 export const Checkboxes = styled.div`
@@ -30,6 +45,6 @@ export const CheckboxLabel = styled.label`
   display: block;
 
   &:hover {
-    background-color: #1e90ff;
+    background-color: #6690ff;
   }
 `;

package/src/components/TestArea/styles.tsx

@@ -25,10 +25,10 @@ export const Container = styled.div<ContainerProps>`
       #loading::after {
         content: "";
         border: 4px solid #f3f3f3; /* Cor do símbolo de carregamento */
-        border-top: 4px solid #35373f; /* Cor do símbolo de carregamento */
+        border-top: 4px solid #5a5d68; /* Cor do símbolo de carregamento */
         border-radius: 50%;
-        width: 15px;
-        height: 15px;
+        width: 13px;
+        height: 13px;
         animation: spin 1s linear infinite;
       }
 

package/src/interface/Language.ts

@@ -23,6 +23,7 @@ type Buttons = {
   send: string;
   delete: string;
   test: string;
+  addNewOpinion: string;
 };
 
 type TestArea = {

package/src/utils/languages/en.ts

@@ -27,6 +27,7 @@ export const enTranslation: Language = {
     send: 'Send',
     delete: 'Delete',
     test: 'Test',
+    addNewOpinion: 'Add new Opinion'
   },
   testArea: {
     description: 'Type a sentence to test artificial intelligence',

package/src/utils/languages/es.ts

@@ -27,6 +27,7 @@ export const esTranslation: Language = {
     send: 'Enviar',
     delete: 'Eliminar',
     test: 'Prueba',
+    addNewOpinion: 'Agregar nueva preconfiguración'
   },
   testArea: {
     description: 'Escribe una frase para probar la inteligencia artificial.',

package/src/utils/languages/pt-br.ts

@@ -27,6 +27,7 @@ export const ptTranslation: Language = {
     send: 'Enviar',
     delete: 'Excluir',
     test: 'Teste',
+    addNewOpinion: 'Adicionar nova predefinição'
   },
   testArea: {
     description: 'Digite uma frase para testar a inteligência artificial.',