feat: add guest banner

Author: deboracosilveira

package-lock.json

@@ -54,7 +54,8 @@
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-react": "7.28.0",
     "postcss": "8.4.7",
-    "prettier": "2.5.1",
+    "prettier": "^2.5.1",
+    "prettier-plugin-tailwindcss": "^0.1.8",
     "tailwindcss": "3.0.23"
   }
 }

package.json

@@ -1,11 +1,15 @@
 import { FC } from 'react';
 import Provider from './context/Context';
 import AppRoutes from './AppRoutes';
+import { Header } from './components';
 
 const App: FC = () => {
   return (
     <Provider>
-      <AppRoutes />
+      <Header />
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <AppRoutes />
+      </div>
     </Provider>
   );
 };

src/App.tsx

@@ -1,13 +1,13 @@
 import { FC } from 'react';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { Wall } from './pages';
+import { Route, Routes } from 'react-router-dom';
+import { SignUpIn, Wall } from './pages';
 
 const AppRoutes: FC = () => (
-  <BrowserRouter>
-    <Routes>
-      <Route path="/" element={<Wall />} />
-    </Routes>
-  </BrowserRouter>
+  <Routes>
+    <Route path="/" element={<Wall />} />
+    <Route path="/sign-up" element={<SignUpIn />} />
+    <Route path="/sign-in" element={<SignUpIn />} />
+  </Routes>
 );
 
 export default AppRoutes;

src/AppRoutes.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+
+interface Props {
+  onClick?: () => void;
+  title: string;
+  type: 'outlined' | 'primary' | 'secondary' | 'white';
+}
+
+const Button: FC<Props> = ({ onClick, title, type }) => {
+  const style = {
+    outlined: {
+      class:
+        'border border-white bg-primary text-white hover:bg-white hover:text-primary'
+    },
+    white: {
+      class: 'bg-white text-primary'
+    },
+    primary: {
+      class: 'bg-primary text-white'
+    },
+    secondary: {
+      class: 'bg-secondary text-white'
+    }
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        text-md ml-6 inline-flex items-center rounded-md bg-opacity-90
+        px-4 py-2 font-medium hover:bg-opacity-100 ${style[type].class}`}>
+      {title}
+    </button>
+  );
+};
+
+export default Button;

src/components/button/Button.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from '..';
+
+const GuestBanner: FC = () => {
+  return (
+    <div className="flex w-full items-center justify-between">
+      <span className="hidden text-xl font-light text-white md:block">
+        Don’ t miss the chance to interact with us!
+      </span>
+      <div className="flex w-full justify-around md:w-auto">
+        <Link to="/sign-in">
+          <Button title="Sign in" type="outlined" />
+        </Link>
+        <Link to="/sign-up">
+          <Button title="Sign up" type="white" />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default GuestBanner;

src/components/header/GuestBanner.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import GuestBanner from './GuestBanner';
+
+const Header: FC = () => {
+  return (
+    <header className="bg-primary">
+      <div className="mx-auto flex h-16 max-w-7xl px-4 sm:px-6 lg:px-8">
+        <GuestBanner />
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/components/header/Header.tsx

@@ -0,0 +1,2 @@
+export { default as Button } from './button/Button';
+export { default as Header } from './header/Header';

src/components/index.ts

@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  body {
+    background-color: #f3f4f6;
+    font-family: Roboto, sans-serif;
+  }
+}

src/index.css

@@ -1,12 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')
 );

src/index.tsx

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+
+const SignUpIn: FC = () => {
+  return <div>SignUpIn</div>;
+};
+
+export default SignUpIn;

src/pages/SignUpIn.tsx

@@ -1 +1,2 @@
 export { default as Wall } from './Wall';
+export { default as SignUpIn } from './SignUpIn';

src/pages/index.ts

@@ -1,7 +1,12 @@
 module.exports = {
   content: ['./src/**/*.{ts,tsx}'],
   theme: {
-    extend: {}
+    extend: {
+      colors: {
+        primary: '#7D49AA',
+        secondary: '#F3C677'
+      }
+    }
   },
   plugins: []
-};
+};