code7-leia 0.1.13 → 0.1.16

package/src/components/FileArea/index.tsx

@@ -6,12 +6,16 @@ import { useLocation } from 'react-router-dom';
 
 import type { FileData } from '../../interface/FileData'
 
+import { getLanguage } from '../../utils/getLanguage'
+
 import * as S from './styles';
+import Table from './components/Table';
 
 export const FileArea = () => {
   const [files, setFiles] = useState<FileData[]>([]);
   const { pathname } = useLocation();
   const id = pathname.split('/')[4]
+  const t = getLanguage('pt-br')
 
   useEffect(() => {
     setFiles([
@@ -35,29 +39,47 @@ export const FileArea = () => {
   }, [])
 
   useEffect(() => {
-    console.log('files, id: ', files, id)
+    console.log('files, id, t: ', files, id, t)
   }, [files])
 
+  const presset = (tags: string): string => tags.split(',').map(tag => `<p class='tag'>${tag}</p>`).join('');
+
   const renderFiles = () => {
     if (files.length === 0) {
       return null;
     }
   
     return (
-      <ul>
-        {files.map(({ name, tags }, index) => (
-          <li key={index}>
-            <div>{name}</div>
-            <div>{tags}</div>
-          </li>
-        ))}
-      </ul>
+      <Table>
+        <thead>
+          <tr>
+            <th className="th_file_name">
+              {t.fileArea.fileName}
+            </th>
+            <th className="th_pressets">
+            {t.fileArea.presset}
+            </th>
+            <th className="th_actions">
+            {t.fileArea.actions}
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {files.map((object) => (
+            <tr>
+              <td>{object.name}</td>
+              <td>{presset(object.tags)}</td>
+              <td>{t.buttons.delete}</td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
     );
   }
 
   return (
     <S.Container>
-      <div>File Area</div>
       {renderFiles()}
     </S.Container>
   );

package/src/interface/Language.ts

@@ -0,0 +1,42 @@
+type FileArea = {
+  description: string;
+  fileName: string;
+  presset: string;
+  actions: string;
+  search: string;
+  fileUpload: string;
+  emptyState: {
+    title: string;
+    description: string;
+  };
+  modal: {
+    descriptionUpload: string;
+    chooseFile: string;
+  };
+};
+
+type Buttons = {
+  cancel: string;
+  send: string;
+  delete: string;
+  test: string;
+};
+
+type TestArea = {
+  description: string;
+  typeSentence: string;
+  selectPersona: string;
+  selectPresset: string;
+  emptyState: {
+    title: string;
+    description: string;
+  };
+};
+
+export type Language = {
+  files: string;
+  test: string;
+  fileArea: FileArea;
+  buttons: Buttons;
+  testArea: TestArea;
+};

package/src/interface/Table.ts

@@ -0,0 +1,12 @@
+export interface TableProps {
+  children: React.ReactNode;
+  className?: string;
+  size?: 'small' | 'medium' | 'large';
+  isLoading?: boolean;
+}
+
+export interface SpinnerProps {
+  color?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}

package/src/utils/getLanguage.tsx

@@ -1,23 +1,128 @@
-type Language = {
-  files: string;
-  test: string;
+
+import { Language } from '../interface/Language'
+
+const defaultLanguage: Language = {
+  files: 'Files',
+  test: 'Test',
+  fileArea: {
+    description: 'bla bla bla bla bla',
+    fileName: 'File name',
+    presset: 'Presset',
+    actions: 'Actions',
+    search: 'Search',
+    fileUpload: 'File upload',
+    emptyState: {
+      title: 'No data',
+      description: 'bla bla bla bla bla',
+    },
+    modal: {
+      descriptionUpload: 'Drag and drop files here or',
+      chooseFile: 'Choose a file',
+    },
+  },
+  buttons: {
+    cancel: 'Cancel',
+    send: 'Send',
+    delete: 'Delete',
+    test: 'Test',
+  },
+  testArea: {
+    description: 'bla bla bla bla bla',
+    typeSentence: 'Type a sentence',
+    selectPersona: 'Select a Persona',
+    selectPresset: 'Select a presset',
+    emptyState: {
+      title: 'No data for analysis',
+      description: 'Do a search, click the "Test" button.',
+    },
+  },
 };
 
 export const getLanguage = (language: keyof Record<'en' | 'pt-br' | 'es', Language>): Language => {
-  const languages: Record<'en' | 'pt-br' | 'es', Language> = {
-    en: {
-      files: 'Files',
-      test: 'Test',
-    },
+  const languages = {
+    en: defaultLanguage,
     'pt-br': {
       files: 'Arquivos',
       test: 'Teste',
+      fileArea: {
+        ...defaultLanguage.fileArea,
+        fileName: 'Nome do arquivo',
+        presset: 'Presset',
+        actions: 'Ações',
+        search: 'Pesquisar',
+        fileUpload: 'Upload de arquivo',
+        emptyState: {
+          ...defaultLanguage.fileArea.emptyState,
+          title: 'Sem dados',
+        },
+        modal: {
+          ...defaultLanguage.fileArea.modal,
+          descriptionUpload: 'Arraste e solte os arquivos aqui ou',
+          chooseFile: 'Escolha um arquivo',
+        },
+      },
+      buttons: {
+        ...defaultLanguage.buttons,
+        cancel: 'Cancelar',
+        send: 'Enviar',
+        delete: 'Excluir',
+        test: 'Testar',
+      },
+      testArea: {
+        ...defaultLanguage.testArea,
+        description: 'bla bla bla bla bla',
+        typeSentence: 'Digite uma frase',
+        selectPersona: 'Selecione uma Persona',
+        selectPresset: 'Selecione uma predefinição',
+        emptyState: {
+          ...defaultLanguage.testArea.emptyState,
+          title: 'Sem dados para análise',
+          description: 'Faça uma pesquisa, clique no botão "Teste".',
+        },
+      },
     },
     es: {
+      ...defaultLanguage,
       files: 'Archivos',
       test: 'Prueba',
-    }
+      fileArea: {
+        ...defaultLanguage.fileArea,
+        fileName: 'Nombre del archivo',
+        presset: 'Presset',
+        actions: 'Acciones',
+        search: 'Buscar',
+        fileUpload: 'Carga de archivos',
+        emptyState: {
+          ...defaultLanguage.fileArea.emptyState,
+          title: 'Sin datos',
+        },
+        modal: {
+          ...defaultLanguage.fileArea.modal,
+          descriptionUpload: 'Arrastre y suelte los archivos aquí o',
+          chooseFile: 'Elegir un archivo',
+        },
+      },
+      buttons: {
+        ...defaultLanguage.buttons,
+        cancel: 'Cancelar',
+        send: 'Enviar',
+        delete: 'Eliminar',
+        test: 'Probar',
+      },
+      testArea: {
+        ...defaultLanguage.testArea,
+        description: 'bla bla bla bla bla',
+        typeSentence: 'Escribe una oración',
+        selectPersona: 'Seleccionar una Persona',
+        selectPresset: 'Seleccionar una configuración preestablecida',
+        emptyState: {
+          ...defaultLanguage.testArea.emptyState,
+          title: 'Sin datos para el análisis',
+          description: 'Realiza una búsqueda, haz clic en el botón "Prueba".',
+        },
+      },
+    },
   };
 
-  return languages[language] || languages['pt-br'];
+  return languages[language] || defaultLanguage;
 };