From 911f60bb71978faed94d63c02b901b734e789fbf Mon Sep 17 00:00:00 2001 From: Nityanand Rai Date: Mon, 19 Sep 2022 12:27:55 +0530 Subject: [PATCH 1/3] Added navbar --- src/containers/home/index.tsx | 40 +++++++++++++++++++++++++++---- src/containers/home/style.scss | 43 ++++++++++++++++++++++++++++++++++ src/containers/login/index.tsx | 1 + 3 files changed, 79 insertions(+), 5 deletions(-) diff --git a/src/containers/home/index.tsx b/src/containers/home/index.tsx index b8e1992..7fd2684 100644 --- a/src/containers/home/index.tsx +++ b/src/containers/home/index.tsx @@ -1,8 +1,38 @@ +import { useEffect, useState, useRef } from 'react'; +import Button from 'react-bootstrap/Button'; +import Overlay from 'react-bootstrap/Overlay'; +import Tooltip from 'react-bootstrap/Tooltip'; +import 'bootstrap/dist/css/bootstrap.css'; +import { useSelector, useDispatch } from '../../store/index'; import './style.scss'; +import profile from "../../component/image/107161_circle_github_icon.png"; export const HomePage = () => { - return( -
-

Hello

-
- ) + const {userData} = useSelector((state) => state.user) + const [show, setShow] = useState(false); + const [searchTerm, setSearchTerm] = useState(''); + const target = useRef(null); + return( +
+ +
+ ) } \ No newline at end of file diff --git a/src/containers/home/style.scss b/src/containers/home/style.scss index e69de29..e4dfa39 100644 --- a/src/containers/home/style.scss +++ b/src/containers/home/style.scss @@ -0,0 +1,43 @@ +nav { + background-color: #003865; + height: 85px; + width: 100%; + display: flex; + } +.github-icon { + height: 50px; + width: 50px; + margin-left: 20px; + margin-top: 20px; +} +.search { + margin-top: 25px; + margin-left: 120px; +} +.avatar { + img { + width: 40px; + height: 40px; + border-radius: 50%; + } + } +.avatar { + background-color: transparent; + margin-top: 22px; + margin-left: 780px; + border: none; +} +.search-feild { + width: 250px; + height: 40px; + border-radius: 10px; + border: none; + border-bottom: 2px solid #003865; + outline: none; + box-shadow: inset 0px 0px 25px 0px #003865; + &:focus { + border: none; + box-shadow: none; + } +} + \ No newline at end of file diff --git a/src/containers/login/index.tsx b/src/containers/login/index.tsx index d34d896..402121c 100644 --- a/src/containers/login/index.tsx +++ b/src/containers/login/index.tsx @@ -6,6 +6,7 @@ import { useSelector, useDispatch } from '../../store/index'; import {loginUser} from "../../store/actions/login"; import { useNavigate } from "react-router-dom"; import profile from "..//../component/image/undraw_login_re_4vu2.svg"; + import './style.scss'; From be427d8837dc4163e936ff285c17869b0176632f Mon Sep 17 00:00:00 2001 From: Nityanand Rai Date: Mon, 19 Sep 2022 15:03:20 +0530 Subject: [PATCH 2/3] Modified Navbar --- src/component/navbar/index.tsx | 51 +++++++++++++++++++++++++++++++++ src/component/navbar/style.scss | 43 +++++++++++++++++++++++++++ src/containers/home/index.tsx | 21 +------------- src/containers/home/style.scss | 43 --------------------------- src/containers/login/style.scss | 4 +-- src/routes/appRoute.tsx | 5 ++-- 6 files changed, 100 insertions(+), 67 deletions(-) create mode 100644 src/component/navbar/index.tsx create mode 100644 src/component/navbar/style.scss diff --git a/src/component/navbar/index.tsx b/src/component/navbar/index.tsx new file mode 100644 index 0000000..8b072da --- /dev/null +++ b/src/component/navbar/index.tsx @@ -0,0 +1,51 @@ +import { useEffect, useState, useRef } from 'react'; +import { useSelector, useDispatch } from '../../store/index'; +import Button from 'react-bootstrap/Button'; +import Overlay from 'react-bootstrap/Overlay'; +import Tooltip from 'react-bootstrap/Tooltip'; +import profile from "../../component/image/107161_circle_github_icon.png"; +import './style.scss'; +import { useNavigate } from "react-router-dom"; + +export const Navbar = () => { + const {userData} = useSelector((state) => state.user) + const [searchedValue,setSearchedValue] = useState(''); + const target = useRef(null); + const [show, setShow] = useState(false); + + const navigate = useNavigate(); + useEffect(()=>{ + if(searchedValue.length!=0){ + navigate("/search"); + } + },[searchedValue,navigate]) + + return( +
+ +
+ ) +} \ No newline at end of file diff --git a/src/component/navbar/style.scss b/src/component/navbar/style.scss new file mode 100644 index 0000000..271b8f3 --- /dev/null +++ b/src/component/navbar/style.scss @@ -0,0 +1,43 @@ +nav { + background-color: #003865; + height: 85px; + width: 100%; + display: flex; + } +.github-icon { + height: 50px; + width: 50px; + margin-left: 20px; + margin-top: 20px; +} +.search { + margin-top: 25px; + margin-left: 120px; +} +.avatar { + img { + width: 40px; + height: 40px; + border-radius: 50%; + } + } +.avatar { + background-color: transparent; + margin-top: 10px; + margin-left: 780px; + border: none; +} +.search-feild { + width: 250px; + height: 40px; + border-radius: 10px; + border: none; + border-bottom: 2px solid #003865; + outline: none; + box-shadow: inset 0px 0px 25px 0px #003865; + &:focus { + border: none; + box-shadow: none; + } +} + \ No newline at end of file diff --git a/src/containers/home/index.tsx b/src/containers/home/index.tsx index 7fd2684..54cc9a9 100644 --- a/src/containers/home/index.tsx +++ b/src/containers/home/index.tsx @@ -13,26 +13,7 @@ export const HomePage = () => { const target = useRef(null); return(
- +
) } \ No newline at end of file diff --git a/src/containers/home/style.scss b/src/containers/home/style.scss index e4dfa39..e69de29 100644 --- a/src/containers/home/style.scss +++ b/src/containers/home/style.scss @@ -1,43 +0,0 @@ -nav { - background-color: #003865; - height: 85px; - width: 100%; - display: flex; - } -.github-icon { - height: 50px; - width: 50px; - margin-left: 20px; - margin-top: 20px; -} -.search { - margin-top: 25px; - margin-left: 120px; -} -.avatar { - img { - width: 40px; - height: 40px; - border-radius: 50%; - } - } -.avatar { - background-color: transparent; - margin-top: 22px; - margin-left: 780px; - border: none; -} -.search-feild { - width: 250px; - height: 40px; - border-radius: 10px; - border: none; - border-bottom: 2px solid #003865; - outline: none; - box-shadow: inset 0px 0px 25px 0px #003865; - &:focus { - border: none; - box-shadow: none; - } -} - \ No newline at end of file diff --git a/src/containers/login/style.scss b/src/containers/login/style.scss index dd0ba9a..8e573d3 100644 --- a/src/containers/login/style.scss +++ b/src/containers/login/style.scss @@ -28,7 +28,7 @@ width: 300px; } .input-feild { - width: 300px; + width: 340px; height: 50px; border-radius: 60px; border: none; @@ -47,7 +47,7 @@ padding-top: 20px; } .login-button { - width: 345px; + width: 340px; height: 50px; border-radius: 60px; background-color: #a5d2f7; diff --git a/src/routes/appRoute.tsx b/src/routes/appRoute.tsx index 0502354..beea1bd 100644 --- a/src/routes/appRoute.tsx +++ b/src/routes/appRoute.tsx @@ -1,6 +1,6 @@ import { Route } from "react-router-dom"; - import PrivateRoute from "./privateRoute" +import { Navbar } from "../component/navbar" type AppRouteProps = { component: JSX.Element; @@ -10,7 +10,8 @@ const AppRoute = ({ component, isPrivate }: AppRouteProps):JSX.Element => ( - isPrivate ? : component + + isPrivate ? <> : component ) From 8759364af48bad4500d305c52efa85102d2504a5 Mon Sep 17 00:00:00 2001 From: Nityanand Rai Date: Fri, 23 Sep 2022 18:15:05 +0530 Subject: [PATCH 3/3] WIP --- src/styles/sass/main.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/sass/main.scss b/src/styles/sass/main.scss index 9bd0084..16bc41d 100644 --- a/src/styles/sass/main.scss +++ b/src/styles/sass/main.scss @@ -1,3 +1,4 @@ @import 'font-awesome/css/font-awesome.min.css'; @import 'pages/login'; +@import 'components/navbar'; \ No newline at end of file