LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

add basic navbar component

Browse Source
This commit is contained in:
Matthew Russell 2022-02-16 21:08:17 -08:00
parent c312b00bb9
commit 8ea74311be
4 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/trading/components/navbar/index.tsx Normal file
View File

@ -0,0 +1,17 @@
import styles from './navbar.module.scss';
import Link from 'next/link';
export const Navbar = () => {
return (
<nav className={styles.navbar}>
{[
{ name: 'Portfolio', path: '/portfolio' },
{ name: 'Markets', path: '/markets' },
].map((route) => (
<Link href={route.path} key={route.path}>
{route.name}
</Link>
))}
</nav>
);
};

12
apps/trading/components/navbar/navbar.module.scss Normal file
View File

@ -0,0 +1,12 @@
.navbar {
border-bottom: 1px solid black;
a {
display: inline-block;
padding: 10px;
&:hover {
text-decoration: underline;
}
}
}

2
apps/trading/pages/_app.tsx
View File

@ -1,5 +1,6 @@
import { AppProps } from 'next/app';
import Head from 'next/head';
import { Navbar } from '../components/navbar';
import './styles.css';
function VegaTradingApp({ Component, pageProps }: AppProps) {
@ -8,6 +9,7 @@ function VegaTradingApp({ Component, pageProps }: AppProps) {
<Head>
<title>Welcome to trading!</title>
</Head>
<Navbar />
<main className="app">
<Component {...pageProps} />
</main>

12
apps/trading/pages/index.tsx
View File

@ -2,7 +2,6 @@ import styles from './index.module.scss';
import { EtherscanLink } from '@vegaprotocol/ui-toolkit';
import { ReactHelpers } from '@vegaprotocol/react-helpers';
import { useRouter } from 'next/router';
import Link from 'next/link';
export function Index() {
const router = useRouter();
@ -10,16 +9,7 @@ export function Index() {
return (
<div className={styles.page}>
<h1>Vega Trading</h1>
<nav>
{[
{ name: 'Portfolio', path: '/portfolio' },
{ name: 'Markets', path: '/markets' },
].map((route) => (
<Link href={route.path} key={route.path}>
{route.name}
</Link>
))}
</nav>
<hr />
<h2>Test packages</h2>
<ReactHelpers />
<EtherscanLink