diff --git a/components/Layout/Footer.tsx b/components/Layout/Footer.tsx new file mode 100644 index 000000000..d4c5f443f --- /dev/null +++ b/components/Layout/Footer.tsx @@ -0,0 +1,23 @@ +import Link from 'next/link' + +import { useRouter } from 'next/router' +import cn from 'classnames' + +export default function Footer() { + const { locale, asPath } = useRouter() + + return ( + + ) +} \ No newline at end of file diff --git a/components/Layout/Header.tsx b/components/Layout/Header.tsx new file mode 100644 index 000000000..de99147ee --- /dev/null +++ b/components/Layout/Header.tsx @@ -0,0 +1,55 @@ +import Image from 'next/image' +import Link from 'next/link' + +import utilStyles from '../../styles/utils.module.scss' + +import { LayoutProps, SITE_TITLE } from '.' + +export default function Header(props: LayoutProps) { + const { home = false } = props + + return ( +
+ {home ? ( + <> + {SITE_TITLE} +

{SITE_TITLE}

+ + ) : ( + <> + + + {SITE_TITLE} + + +

+ + {SITE_TITLE} + +

+ + )} + +
+ ) +} \ No newline at end of file diff --git a/components/Layout/Layout.style.ts b/components/Layout/Layout.style.ts index 31381b216..80f06f61c 100644 --- a/components/Layout/Layout.style.ts +++ b/components/Layout/Layout.style.ts @@ -7,12 +7,6 @@ export default css` margin: 3rem auto 6rem; } -.header { - display: flex; - flex-direction: column; - align-items: center; -} - .backToHome { margin: 3rem 0 0; } diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx index a9e8ba76f..d34ec0490 100644 --- a/components/Layout/index.tsx +++ b/components/Layout/index.tsx @@ -1,81 +1,52 @@ import Head from 'next/head' -import Image from 'next/image' import Link from 'next/link' import styles from './Layout.style' -import utilStyles from '../../styles/utils.module.scss' import { PropsWithChildren } from 'react' -import { useRouter } from 'next/router' -import cn from 'classnames' + import { Trans } from '@lingui/macro' +import Header from './Header' +import Footer from './Footer' -const name = 'CoW Protocol' -export const siteTitle = 'CoW Protocol' +export const SITE_TITLE = 'CoW Protocol' +export const URL_PRODUCTION = "https://cowswap.exchange" -type LayoutProps = PropsWithChildren<{ +export type LayoutProps = PropsWithChildren<{ home?: boolean }> export default function Layout(props: LayoutProps) { const { children, home = false } = props - const router = useRouter() - const { locale } = router return ( <> -
- - - + + + + + + + + + + + - - - - -
- {home ? ( - <> - {name} -

{name}

- - ) : ( - <> - - - {name} - - -

- - {name} - -

- - )} -
+ + + {/* TODO: Add URL */} + + + + + + +
+
{children}
{!home && (
@@ -85,18 +56,8 @@ export default function Layout(props: LayoutProps) {
)}
- +