diff --git a/src/components/VacanciesFound/VacanciesFound.test.tsx b/src/components/VacanciesFound/VacanciesFound.test.tsx
new file mode 100644
index 0000000..62bdf8b
--- /dev/null
+++ b/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().container;
+ });
+
+ it('should be defined', () => {
+ expect(container).toBeDefined();
+ });
+ it('to be render allVacancies', () => {
+ screen.getByText('255 vagas encontradas');
+ });
+});
diff --git a/src/components/VacanciesFound/VacanciesFound.tsx b/src/components/VacanciesFound/VacanciesFound.tsx
new file mode 100644
index 0000000..bc65ffb
--- /dev/null
+++ b/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 (
+
+
+ Vagas em React
+
+ }
+ fontSize="large"
+ fontColor="purple-dark"
+ />
+
+
+ );
+};
+
+export default VacanciesFound;
diff --git a/src/components/VacanciesFound/index.ts b/src/components/VacanciesFound/index.ts
new file mode 100644
index 0000000..3949a7b
--- /dev/null
+++ b/src/components/VacanciesFound/index.ts
@@ -0,0 +1 @@
+export { default } from './VacanciesFound';
diff --git a/src/components/VacanciesFound/styles.ts b/src/components/VacanciesFound/styles.ts
new file mode 100644
index 0000000..3177c79
--- /dev/null
+++ b/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;
+ }
+`;
diff --git a/src/pages/VacanciesPage/VacanciesPage.tsx b/src/pages/VacanciesPage/VacanciesPage.tsx
index 5a38543..d87bdbf 100644
--- a/src/pages/VacanciesPage/VacanciesPage.tsx
+++ b/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 (
+
diff --git a/src/styles/global.ts b/src/styles/global.ts
index b7511ae..1c08958 100644
--- a/src/styles/global.ts
+++ b/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;