1121 save searches

src/components/SaveSearches/SaveSearches.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import { expect } from '@jest/globals';
+import SaveSearches from './SaveSearches';
+
+describe('SaveSearches component', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = render(<SaveSearches />).container;
+  });
+
+  it('should be defined', () => {
+    expect(container).toBeDefined();
+  });
+
+  it('to be render SaveButton', () => {
+    screen.getByText('Salvar busca');
+  });
+});

src/components/SaveSearches/SaveSearches.tsx

@@ -0,0 +1,32 @@
+import Text from '@components/Text';
+import * as S from './styles';
+import * as I from '@assets/db.icons';
+
+const SaveSearches = () => {
+  return (
+    <S.Container>
+      <Text
+        label={
+          <p>
+            Salve essa busca, te <b>avisaremos por e-mail</b> quando
+            encontrarmos mais vagas
+          </p>
+        }
+        fontSize="medium"
+        fontColor="white"
+      />
+
+      <S.Button>
+        <I.Save fill="yellow" width={24} />
+        <Text
+          label="Salvar busca"
+          fontSize="normal"
+          fontColor="white"
+          fontWeight="500"
+        />
+      </S.Button>
+    </S.Container>
+  );
+};
+
+export default SaveSearches;

src/components/SaveSearches/index.ts

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

src/components/SaveSearches/styles.ts

@@ -0,0 +1,25 @@
+/* eslint-disable indent */
+import styled from 'styled-components';
+
+export const Container = styled.section`
+  display: flex;
+  gap: 1.5rem;
+  padding-top: 2.5rem;
+
+  b {
+    font-weight: bold;
+    font-style: italic;
+  }
+
+  .text {
+    justify-content: flex-start;
+  }
+`;
+
+export const Button = styled.button`
+  display: flex;
+  gap: 0.5rem;
+  background-color: var(--purple-dark-secondary);
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.625rem;
+`;

src/components/SearchBar/SearchBar.tsx

@@ -7,8 +7,11 @@ import Button from './../Button';
 import useField from '@hooks/useField';
 import useRecentSearches from '@hooks/useRecentSearches';
 import useSearchHandling from '@hooks/useSearchHandling';
+import SaveSearches from '@components/SaveSearches';
 
 import * as S from './styles';
+import { useContext } from 'react';
+import { userContext } from '@contexts/user';
 
 const SearchBar = () => {
   const [location] = useField('text', 'location');
@@ -18,6 +21,8 @@ const SearchBar = () => {
 
   const [recentSearches, addRecentSearch] = useRecentSearches();
 
+  const { user } = useContext(userContext);
+
   const handleSearch = useSearchHandling(
     positionOrTech.value,
     location.value,
@@ -102,6 +107,7 @@ const SearchBar = () => {
           </div>
         </div>
       )}
+      {user && pathname === '/vacancies' && <SaveSearches />}
     </S.Container>
   );
 };

src/components/VacanciesFound/VacanciesFound.test.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { render, screen } from '@testing-library/react';
 import { expect } from '@jest/globals';
 import VacanciesFound from './VacanciesFound';