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;