-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
192 additions
and
136 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,71 +1,72 @@ | ||
| import React from 'react' | ||
| import "./Header.css" | ||
| import SearchIcon from '@mui/icons-material/Search'; | ||
| import HomeIcon from '@mui/icons-material/Home'; | ||
| import FlagIcon from '@mui/icons-material/Flag'; | ||
| import SubscriptionsOutlinedIcon from '@mui/icons-material/SubscriptionsOutlined'; | ||
| import StorefrontOutlinedIcon from '@mui/icons-material/StorefrontOutlined'; | ||
| import SupervisedUserCircleIcon from '@mui/icons-material/SupervisedUserCircle'; | ||
| import { Avatar } from '@mui/material'; | ||
| import { IconButton } from '@mui/material'; | ||
| import AddIcon from '@mui/icons-material/Add'; | ||
| import ForumIcon from '@mui/icons-material/Forum'; | ||
| import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive'; | ||
| import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; | ||
| import { useStateValue } from './StateProvider'; | ||
|
|
||
| import React from "react"; | ||
| import "./Header.css"; | ||
| import SearchIcon from "@mui/icons-material/Search"; | ||
| import HomeIcon from "@mui/icons-material/Home"; | ||
| import FlagIcon from "@mui/icons-material/Flag"; | ||
| import SubscriptionsOutlinedIcon from "@mui/icons-material/SubscriptionsOutlined"; | ||
| import StorefrontOutlinedIcon from "@mui/icons-material/StorefrontOutlined"; | ||
| import SupervisedUserCircleIcon from "@mui/icons-material/SupervisedUserCircle"; | ||
| import { Avatar } from "@mui/material"; | ||
| import { IconButton } from "@mui/material"; | ||
| import AddIcon from "@mui/icons-material/Add"; | ||
| import ForumIcon from "@mui/icons-material/Forum"; | ||
| import NotificationsActiveIcon from "@mui/icons-material/NotificationsActive"; | ||
| import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; | ||
| import { useStateValue } from "./StateProvider"; | ||
| import logo1 from "./assets/logo1.png"; | ||
| function Header() { | ||
| const [{user}, dispatch] = useStateValue(); | ||
| const [{ user }, dispatch] = useStateValue(); | ||
| return ( | ||
| <div className='header'> | ||
| <div className="header"> | ||
| <div className="header__left"> | ||
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1024px-2021_Facebook_icon.svg.png" alt="facebook logo" /> | ||
| <img src={logo1} alt="facebook logo" /> | ||
| <div className="header__input"> | ||
| <SearchIcon /> | ||
| <input placeholder="Search Facebook" type="text" /> | ||
| <SearchIcon /> | ||
| <input placeholder="Search Facebook" type="text" /> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <div className="header__center"> | ||
| <div className="header__option | ||
| header__option--active"> | ||
| <HomeIcon fontSize='large' /> | ||
| <div | ||
| className="header__option | ||
| header__option--active" | ||
| > | ||
| <HomeIcon fontSize="large" /> | ||
| </div> | ||
| <div className="header__option"> | ||
| <FlagIcon fontSize='large' /> | ||
| <FlagIcon fontSize="large" /> | ||
| </div> | ||
| <div className="header__option"> | ||
| <SubscriptionsOutlinedIcon fontSize='large' /> | ||
| <SubscriptionsOutlinedIcon fontSize="large" /> | ||
| </div> | ||
| <div className="header__option"> | ||
| <StorefrontOutlinedIcon fontSize='large' /> | ||
| <StorefrontOutlinedIcon fontSize="large" /> | ||
| </div> | ||
| <div className="header__option"> | ||
| <SupervisedUserCircleIcon fontSize='large' /> | ||
| <SupervisedUserCircleIcon fontSize="large" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="header__right"> | ||
| <div className="header__info"> | ||
| <Avatar src={user.photoURL}/> | ||
| <h4>{user.displayName}</h4> | ||
| <Avatar src={user.photoURL} /> | ||
| <h4>{user.displayName}</h4> | ||
| </div> | ||
| <IconButton> | ||
| <AddIcon /> | ||
| <AddIcon /> | ||
| </IconButton> | ||
| <IconButton> | ||
| <ForumIcon /> | ||
| <ForumIcon /> | ||
| </IconButton> | ||
| <IconButton> | ||
| <NotificationsActiveIcon /> | ||
| <NotificationsActiveIcon /> | ||
| </IconButton> | ||
| <IconButton> | ||
| <ExpandMoreIcon /> | ||
| <ExpandMoreIcon /> | ||
| </IconButton> | ||
| </div> | ||
| </div> | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| export default Header | ||
| export default Header; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,63 @@ | ||
| import React from 'react' | ||
| import "./Login.css" | ||
| import { Button } from '@mui/material' | ||
| import { auth, provider } from './firebase' | ||
| import { useStateValue } from './StateProvider' | ||
| import { actionTypes } from './reducer' | ||
| import React from "react"; | ||
| import "./Login.css"; | ||
| import { Button } from "@mui/material"; | ||
| import { auth, provider } from "./firebase"; | ||
| import { useStateValue } from "./StateProvider"; | ||
| import { actionTypes } from "./reducer"; | ||
| import logo from "./assets/logo.png"; | ||
| import logo1 from "./assets/logo1.png"; | ||
|
|
||
| function Login() { | ||
| const [state, dispatch] = useStateValue(); | ||
| const [state, dispatch] = useStateValue(); | ||
|
|
||
| const signIn = () => { | ||
| auth.signInWithPopup(provider) | ||
| .then(result => { | ||
| dispatch({ | ||
| type: actionTypes.SET_USER, | ||
| user: result.user | ||
| }) | ||
| console.log(result) | ||
| }).catch(error=> alert(error.message)) | ||
| } | ||
| const signInGuest = () => { | ||
| const signIn = () => { | ||
| auth | ||
| .signInWithPopup(provider) | ||
| .then((result) => { | ||
| dispatch({ | ||
| type: actionTypes.SET_USER, | ||
| user: { | ||
| displayName: "Guest" | ||
| }, | ||
| }) | ||
| } | ||
| type: actionTypes.SET_USER, | ||
| user: result.user, | ||
| }); | ||
| console.log(result); | ||
| }) | ||
| .catch((error) => alert(error.message)); | ||
| }; | ||
| const signInGuest = () => { | ||
| dispatch({ | ||
| type: actionTypes.SET_USER, | ||
| user: { | ||
| displayName: "Guest", | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className='login'> | ||
| <div className="login__logo"> | ||
| <img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/04/Facebook_f_logo_%282021%29.svg/512px-Facebook_f_logo_%282021%29.svg.png?20210818083032" alt="logo" className="src" /> | ||
| <img src="https://www.logo.wine/a/logo/Facebook/Facebook-Logo.wine.svg" alt="" className="src" /> | ||
| <h1>Clone!</h1> | ||
| <h2>by Hoon Kang <a href='https://github.com/hoon610' target='_blank' rel='noopener noreferrer'> | ||
| GitHub | ||
| </a></h2> | ||
| </div> | ||
| <div className="buttons"> | ||
| <div className="login"> | ||
| <div className="login__logo"> | ||
| <img src={logo1} alt="logo" className="logo" /> | ||
| <img src={logo} alt="" className="logotext" /> | ||
|
|
||
| <h2> | ||
| by Hoon Kang{" "} | ||
| <a | ||
| href="https://github.com/hoon610" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| GitHub | ||
| </a> | ||
| </h2> | ||
| </div> | ||
| <div className="buttons"> | ||
| <Button type="submit" onClick={signIn}> | ||
| Sign in | ||
| Sign in | ||
| </Button> | ||
| <Button type="submit" onClick={signInGuest}> | ||
| Sign in as guest | ||
| Sign in as guest | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| export default Login | ||
| export default Login; |
Oops, something went wrong.