-
Notifications
You must be signed in to change notification settings - Fork 1
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
1 parent
3caa111
commit 6595f2e
Showing
14 changed files
with
762 additions
and
5 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Large diffs are not rendered by default.
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 |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import React from "react"; | ||
import { MDBInput, MDBContainer, MDBRow, MDBBtn, MDBCol,MDBDropdownItem,MDBDropdownMenu ,MDBDropdown,MDBDropdownToggle} from "mdbreact"; | ||
|
||
const AddProduct = () => { | ||
return ( | ||
<MDBContainer className=" mx-auto border p-5"> | ||
<MDBRow className=" mx-auto"> | ||
<MDBCol md="8" className="mx-auto"> | ||
<form> | ||
<p className="h3 text-center mb-4">Add Product</p> | ||
<div className="grey-text"> | ||
<MDBInput label="Name of Product" type="text" /> | ||
<MDBInput type="textarea" label="Description" rows="3" /> | ||
</div> | ||
<div className="input-group"> | ||
<div className="input-group-prepend"> | ||
<span className="input-group-text" id="inputGroupFileAddon01"> | ||
Upload</span> | ||
</div> | ||
<div className="custom-file"> | ||
<input | ||
type="file" | ||
className="custom-file-input" | ||
id="inputGroupFile01" | ||
aria-describedby="inputGroupFileAddon01" | ||
/> | ||
<label className="custom-file-label" htmlFor="inputGroupFile01"> | ||
Choose Image</label> | ||
</div> | ||
</div> | ||
<MDBDropdown className="mt-3" dropright size="sm"> | ||
<MDBDropdownToggle caret color="green"> | ||
Categories | ||
</MDBDropdownToggle> | ||
<MDBDropdownMenu basic> | ||
<MDBDropdownItem>category 1</MDBDropdownItem> | ||
<MDBDropdownItem>category 2</MDBDropdownItem> | ||
<MDBDropdownItem>category 3</MDBDropdownItem> | ||
<MDBDropdownItem>category 4</MDBDropdownItem> | ||
<MDBDropdownItem>category 5</MDBDropdownItem> | ||
<MDBDropdownItem>category 6</MDBDropdownItem> | ||
</MDBDropdownMenu> | ||
</MDBDropdown> | ||
<div className="text-center mt-3"> | ||
<MDBBtn color="green" size="sm">Add Product</MDBBtn> | ||
</div> | ||
</form> | ||
</MDBCol> | ||
</MDBRow> | ||
</MDBContainer> | ||
); | ||
} | ||
|
||
export default AddProduct; |
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
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 |
---|---|---|
@@ -0,0 +1,161 @@ | ||
import { | ||
SLIDE_IN, | ||
SLIDE_OUT, | ||
SLIDE_IN_MOBILE, | ||
SLIDE_OUT_MOBILE, | ||
} from './animation'; | ||
|
||
import React, {useState, useCallback, useRef} from 'react'; | ||
import * as Icon from 'react-feather'; | ||
import {useTranslation} from 'react-i18next'; | ||
import {Link} from 'react-router-dom'; | ||
import {useSpring, useTransition, animated} from 'react-spring'; | ||
import {useLockBodyScroll, useWindowSize} from 'react-use'; | ||
|
||
function Navbar({ | ||
pages, | ||
darkMode, | ||
}) { | ||
|
||
|
||
const [expand, setExpand] = useState(false); | ||
|
||
useLockBodyScroll(expand); | ||
const windowSize = useWindowSize(); | ||
|
||
const [spring, set, stop] = useSpring(() => ({opacity: 0})); | ||
set({opacity: 1}); | ||
stop(); | ||
|
||
const transitions = useTransition(expand, null, { | ||
from: windowSize.width < 769 ? SLIDE_IN_MOBILE : SLIDE_IN, | ||
enter: windowSize.width < 769 ? SLIDE_OUT_MOBILE : SLIDE_OUT, | ||
leave: windowSize.width < 769 ? SLIDE_IN_MOBILE : SLIDE_IN, | ||
config: {mass: 1, tension: 210, friction: 26}, | ||
}); | ||
|
||
const handleMouseEnter = useCallback(() => { | ||
if (windowSize.width > 769) { | ||
setExpand(true); | ||
} | ||
}, [windowSize.width]); | ||
|
||
return ( | ||
<animated.div className="Navbar" style={spring}> | ||
|
||
|
||
<div className="navbar-middle"> | ||
<Link to="/" onClick={setExpand.bind(this, false)}> | ||
Covid19<span>India</span> | ||
</Link> | ||
</div> | ||
|
||
<div | ||
className="navbar-right" | ||
onMouseEnter={handleMouseEnter} | ||
{...(windowSize.width < 769 && { | ||
onClick: setExpand.bind(this, !expand), | ||
})} | ||
> | ||
{windowSize.width < 769 && ( | ||
<span></span> | ||
)} | ||
|
||
{windowSize.width > 769 && ( | ||
<React.Fragment> | ||
<Link to="/"> | ||
<span> | ||
<Icon.Home {...activeNavIcon('/')} /> | ||
</span> | ||
</Link> | ||
<Link to="/blog"> | ||
<span> | ||
<Icon.Book {...activeNavIcon('/blog')} /> | ||
</span> | ||
</Link> | ||
<Link to="/about"> | ||
<span> | ||
<Icon.HelpCircle {...activeNavIcon('/about')} /> | ||
</span> | ||
</Link> | ||
<span> | ||
<SunMoon {...{darkMode}} /> | ||
</span> | ||
</React.Fragment> | ||
)} | ||
</div> | ||
|
||
{transitions.map(({item, key, props}) => | ||
item ? ( | ||
<animated.div key={key} style={props}> | ||
<Expand {...{pages, setExpand, darkMode, windowSize}} /> | ||
</animated.div> | ||
) : ( | ||
<animated.div key={key} style={props}></animated.div> | ||
) | ||
)} | ||
</animated.div> | ||
); | ||
} | ||
|
||
function Expand({pages, setExpand, darkMode, windowSize}) { | ||
const expandElement = useRef(null); | ||
const {t} = useTranslation(); | ||
|
||
const handleMouseLeave = useCallback(() => { | ||
windowSize.width > 768 && setExpand(false); | ||
}, [setExpand, windowSize.width]); | ||
|
||
return ( | ||
<div className="expand" ref={expandElement} onMouseLeave={handleMouseLeave}> | ||
{pages.map((page, i) => { | ||
if (page.showInNavbar === true) { | ||
return ( | ||
<Link | ||
to={page.pageLink} | ||
key={i} | ||
{...(windowSize.width < 769 && { | ||
onClick: setExpand.bind(this, false), | ||
})} | ||
> | ||
<span | ||
{...navLinkProps(page.pageLink, page.animationDelayForNavbar)} | ||
> | ||
{t(page.displayName)} | ||
</span> | ||
</Link> | ||
); | ||
} | ||
return null; | ||
})} | ||
|
||
{windowSize.width < 768 && <SunMoon {...{darkMode}} />} | ||
|
||
<div className="expand-bottom"> | ||
<h5>{t('A crowdsourced initiative.')}</h5> | ||
</div> | ||
</div> | ||
); | ||
} | ||
|
||
export default Navbar; | ||
|
||
const navLinkProps = (path, animationDelay) => ({ | ||
className: `${window.location.pathname === path ? 'focused' : ''}`, | ||
}); | ||
|
||
const activeNavIcon = (path) => ({ | ||
style: { | ||
stroke: window.location.pathname === path ? '#4c75f2' : '', | ||
}, | ||
}); | ||
|
||
const SunMoon = ({darkMode}) => { | ||
return ( | ||
<div className="SunMoon" onClick={darkMode.toggle}> | ||
<div> | ||
{darkMode.value ? <Icon.Sun color={'#ffc107'} /> : <Icon.Moon />} | ||
</div> | ||
</div> | ||
); | ||
}; |
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 |
---|---|---|
@@ -0,0 +1,85 @@ | ||
|
||
/* | ||
* Navbar | ||
*/ | ||
|
||
export const SLIDE_IN = { | ||
position: 'absolute', | ||
transform: 'translate3d(-20rem, 0, 0)', | ||
height: '100vh', | ||
zIndex: -1, | ||
}; | ||
|
||
export const SLIDE_OUT = { | ||
position: 'absolute', | ||
transform: 'translate3d(10rem, 0, 0)', | ||
}; | ||
|
||
export const SLIDE_IN_MOBILE = { | ||
opacity: 1, | ||
position: 'absolute', | ||
height: '100vh', | ||
top: 64, | ||
zIndex: 999, | ||
}; | ||
|
||
export const SLIDE_OUT_MOBILE = { | ||
opacity: 1, | ||
position: 'absolute', | ||
height: '100vh', | ||
top: 64, | ||
zIndex: 999, | ||
}; | ||
|
||
/* | ||
* Tooltip | ||
*/ | ||
|
||
export const TOOLTIP_FADE_IN = { | ||
opacity: 1, | ||
transform: 'translate3d(0, 0px, 0)', | ||
zIndex: 999, | ||
position: 'absolute', | ||
pointerEvents: 'none', | ||
}; | ||
|
||
export const TOOLTIP_FADE_OUT = { | ||
opacity: 0, | ||
transform: 'translate3d(0, 2px, 0)', | ||
zIndex: 999, | ||
position: 'absolute', | ||
pointerEvents: 'none', | ||
}; | ||
|
||
/* | ||
* Language Switcher | ||
*/ | ||
|
||
export const ENTER_IN = { | ||
opacity: 1, | ||
marginTop: '7.5rem', | ||
marginBottom: '30rem', | ||
}; | ||
|
||
export const ENTER_OUT = { | ||
opacity: 0, | ||
height: '0rem', | ||
marginTop: '0rem', | ||
marginBottom: '0rem', | ||
}; | ||
|
||
/* | ||
* Table | ||
*/ | ||
|
||
export const TABLE_FADE_IN = { | ||
opacity: 1, | ||
transform: 'translate3d(0, 0px, 0)', | ||
height: 200, | ||
}; | ||
|
||
export const TABLE_FADE_OUT = { | ||
opacity: 0, | ||
transform: 'translate3d(0, 2px, 0)', | ||
height: 0, | ||
}; |
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 |
---|---|---|
@@ -0,0 +1,13 @@ | ||
{ | ||
"english": "English", | ||
"hindi": "हिंदी", | ||
"bengali": "বাংলা", | ||
"gujarati": "ગુજરાતી", | ||
"kannada": "ಕನ್ನಡ", | ||
"malayalam": "മലയാളം", | ||
"marathi": "मराठी", | ||
"odiya": "ଓଡିଆ", | ||
"punjabi": "ਪੰਜਾਬੀ", | ||
"tamil": "தமிழ்", | ||
"telugu": "తెలుగు" | ||
} |
Oops, something went wrong.