finished News, Operation Sumary

pages/news.tsx

@@ -1,4 +1,3 @@
-import Image from 'next/image'
 import React from 'react'
 import Banner from '../src/components/banner/Banner'
 import Header from '../src/components/header/Header'

pages/resumoOperacao.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import Header from '../src/components/header/Header';
 import PageTitle from '../src/components/pageTitle/PageTitle';
-import Sidebar from '../src/components/sidebar/Sidebar';
 import BasicButton from '../src/components/buttons/basicButton/BasicButton';
-import { TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
+import { TableView, Pagination } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
 
 export default function ResumoOperacao() {
   return(
@@ -72,14 +71,15 @@ export default function ResumoOperacao() {
             <td className='tg-0tzy'>300,36</td>
             <td className='tg-hq65'>5.965,95</td>
           </tr>
-          <BasicButton title='Enviar PDF' />
-            <p>Mostando de 1 a 10 de 30 Entradas</p>
-            {/* <div className=''>
-              <p>Anterior 01 02 ... Proxima</p>
-            </div> */}
-
         </tbody>
       </table>
+      <BasicButton title='Baixar PDF' />
+
+      <Pagination>
+      <p>Mostrando 1 a 10 de 30 Entradas</p>
+      <p >Anterior <span className='number'>01</span>     <span className='numberColor'>02  ..  05</span>  <span className='number'>Proxima</span> </p>
+      </Pagination>
+
     </TableView>
   )
 }

src/components/buttons/basicButton/BasicButtonView.ts

@@ -4,8 +4,9 @@ export const BasicButtonView = styled.button`
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-top: 10px;
 
-  width: 120px;
+  width: 140px;
   height: 45px;
   cursor: pointer;
   background: #254F7F;

styles/layouts/ResumoOperacao/ResumoOperacaoView.ts

@@ -139,4 +139,25 @@ display: flex;
 
     color: #254F7F;
     }
+
+    .pagination{
+
+    }
 `;
+
+export const Pagination = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+
+  .number{
+    color: #2E5581;
+  }
+  .numberColor{
+    color: #ABAFB3;
+;
+  }
+
+`;
+