Development

src/components/VacanciesFound/VacanciesFound.test.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { render, screen } from '@testing-library/react';
+import { expect } from '@jest/globals';
+import VacanciesFound from './VacanciesFound';
+
+describe('VacanciesFound component', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = render(<VacanciesFound allVacancies={'255'} />).container;
+  });
+
+  it('should be defined', () => {
+    expect(container).toBeDefined();
+  });
+  it('to be render allVacancies', () => {
+    screen.getByText('255 vagas encontradas');
+  });
+});

src/components/VacanciesFound/VacanciesFound.tsx

@@ -0,0 +1,29 @@
+import Text from '@components/Text';
+import * as S from './styles';
+
+type props = {
+  allVacancies: string;
+};
+
+const VacanciesFound = ({ allVacancies }: props) => {
+  return (
+    <S.Container>
+      <Text
+        label={
+          <p>
+            Vagas em <b>React</b>
+          </p>
+        }
+        fontSize="large"
+        fontColor="purple-dark"
+      />
+      <Text
+        label={`${allVacancies} vagas encontradas`}
+        fontSize="medium"
+        fontColor="dark-gray"
+      />
+    </S.Container>
+  );
+};
+
+export default VacanciesFound;

src/components/VacanciesFound/index.ts

@@ -0,0 +1 @@
+export { default } from './VacanciesFound';

src/components/VacanciesFound/styles.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const Container = styled.section`
+  display: flex;
+  flex-direction: column;
+  padding: 3rem 0px 0px 8.438rem;
+
+  .text {
+    justify-content: flex-start;
+  }
+
+  b {
+    font-weight: bold;
+  }
+`;

src/pages/VacanciesPage/VacanciesPage.tsx

@@ -12,6 +12,7 @@ import useResource from '@hooks/useResource';
 import useFetchResource from '@hooks/useFetchResource';
 
 import * as S from './styles';
+import VacanciesFound from '@components/VacanciesFound';
 
 const VacanciesPage = () => {
   const { query } = useContext(queryContext);
@@ -27,6 +28,7 @@ const VacanciesPage = () => {
   return (
     <S.VacanciesPage data-cy="vacancies-page">
       <SearchBar />
+      <VacanciesFound allVacancies={'255'} />
       <S.Content>
         <Filter />
         <S.VacancyChartContainer>

src/styles/global.ts

@@ -8,7 +8,7 @@ export default createGlobalStyle`
     --purple-dark-secondary: #6950A1;
     --white: #FFFFFF;
     --gray: #A6A8AB;
-    --dark-grey: #4A4A68;
+    --dark-gray: #4A4A68;
     --gray-medium: #8C8CA1;
     --gray-light: #D1D1D1;
     --yellow: #FBB04D;