From 597cbb60e55f2198f1aa1f80bc5d98ba36555cd2 Mon Sep 17 00:00:00 2001 From: Yogesh Kotadiya Date: Tue, 1 Oct 2019 16:34:15 +0530 Subject: [PATCH 1/9] feat: Add Footer component to layout --- src/components/footer.tsx | 202 ++++++++++++++++++++++++++++++++++++++ src/components/layout.tsx | 7 +- src/pages/docs.tsx | 66 +++++++------ src/styles/layout.css | 113 ++++++++++++++++----- src/styles/mobile.css | 42 ++++++-- src/templates/learn.tsx | 32 +++--- 6 files changed, 382 insertions(+), 80 deletions(-) create mode 100644 src/components/footer.tsx diff --git a/src/components/footer.tsx b/src/components/footer.tsx new file mode 100644 index 0000000000..b37f89a970 --- /dev/null +++ b/src/components/footer.tsx @@ -0,0 +1,202 @@ +import React, { useState } from 'react'; +import { Link } from 'gatsby'; +import { css, SerializedStyles } from '@emotion/core'; + +const dropDownData = [ + '🇦🇪 العربية', + '🇦🇩 Catalan', + '🇩🇪 Deutsche', + '🇺🇸 English', + '🇪🇸 Español', + '🇫🇷 Français', + '🇪🇸 Galego', + '🇮🇳 हिंदी', + '🇮🇷 زبان فارسی', +]; + +const DropDownContainer: SerializedStyles = css` + position: absolute; + display: flex; + flex-direction: column; + margin: 10px; + background-color: var(--color-fill-app); + top: calc(-40px * ${dropDownData.length} - 40px); + left: -25px; + box-shadow: 0 5px 15px -5px var(--color-border-primary); + border-bottom: 2px solid var(--color-brand-primary); + z-index: 100; + &::after { + content: ''; + position: absolute; + bottom: -10px; + transform: rotate(45deg); + left: calc(50% - 10px); + width: 15px; + height: 15px; + z-index: -1; + background-color: var(--color-fill-app); + border-right: 2px solid var(--color-brand-primary); + border-bottom: 2px solid var(--color-brand-primary); + } +`; + +const DropDownContainerButton: SerializedStyles = css` + border: none; + width: 120px; + padding: 10px; + height: 40px; + color: var(--color-text-primary); + &:hover { + background-color: var(--brand2); + color: var(--black9); + } +`; + +const DropDownButton: SerializedStyles = css` + border: none; + color: var(--color-text-accent); + &:focus { + & > span { + transform: rotate(180deg); + } + } +`; + +const FooterDropDown: React.FC = (): JSX.Element => { + const [state, setState] = useState<{ active: number; isOpen: boolean }>({ + active: 3, + isOpen: false, + }); + + const handleOnClick = (): void => { + setState({ ...state, isOpen: !state.isOpen }); + }; + + const handleOnSelectLang = (index: number): void => { + setState({ active: index, isOpen: !state.isOpen }); + }; + + return ( +
+ {state.isOpen && ( +
+ {dropDownData.map( + (data: string, index: number): JSX.Element => ( + + ) + )} +
+ )} + +
+ ); +}; + +function Footer(): JSX.Element { + return ( + + ); +} + +export default Footer; diff --git a/src/components/layout.tsx b/src/components/layout.tsx index 4b29e1e34f..0a0f60afdb 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -2,6 +2,7 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'; import 'prismjs/themes/prism-okaidia.css'; import React from 'react'; import Header from './header'; +import Footer from './footer'; import '../styles/tokens.css'; import '../styles/layout.css'; import '../styles/mobile.css'; @@ -12,7 +13,9 @@ interface Props { title?: string; description?: string; img?: string; - href: string; + href?: string; + showFooter?: boolean; + location?: any; } const Layout = ({ @@ -21,12 +24,14 @@ const Layout = ({ description, img, location, + showFooter = true, }: Props): JSX.Element => { return (
{children} + {showFooter &&