feat(project): add logo component

src/components/Logo/Logo.module.scss

@@ -0,0 +1,47 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+@use '../../styles/mixins/responsive';
+
+//
+// Logo
+// --------------------------------
+
+.brand {
+  align-self: center;
+  text-align: center;
+}
+
+.logo {
+  max-width: 100%;
+  max-height: variables.$header-height - 10px;
+  max-height: 36px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+//
+// mediaQueries
+// --------------------------------
+
+@include responsive.mobile-and-tablet() {
+  .brand {
+    flex: 1;
+
+    .logo {
+      max-height: variables.$header-height-mobile - 20px;
+    }
+  }
+}
+
+@include responsive.mobile-only() {
+  .brand {
+    transition: opacity 0.2s ease;
+  }
+}
+
+@include responsive.desktop-only() {
+  .brand {
+    width: 180px;
+    text-align: left;
+  }
+}

src/components/Logo/Logo.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { render } from '../../testUtils';
+
+import Logo from './Logo';
+
+describe('<Logo/>', () => {
+  it('renders and matches snapshot', () => {
+    const { container } = render(<Logo src="123" />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/Logo/Logo.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import styles from './Logo.module.scss';
+
+type LogoProps = {
+  src: string;
+};
+
+const Logo: React.FC<LogoProps> = ({ src }: LogoProps) => {
+  const history = useHistory();
+
+  const handleClick = () => {
+    history.push('/');
+  };
+
+  return (
+    <div className={styles.brand}>
+      <img className={styles.logo} alt="logo" src={src} onClick={handleClick} />
+    </div>
+  );
+};
+
+export default Logo;

src/components/Logo/__snapshots__/Logo.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Logo/> renders and matches snapshot 1`] = `
+<div>
+  <div>
+    <img
+      alt="logo"
+      src="123"
+    />
+  </div>
+</div>
+`;