add basic navbar component
This commit is contained in:
parent
c312b00bb9
commit
8ea74311be
17
apps/trading/components/navbar/index.tsx
Normal file
17
apps/trading/components/navbar/index.tsx
Normal 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
12
apps/trading/components/navbar/navbar.module.scss
Normal file
@ -0,0 +1,12 @@
|
||||
.navbar {
|
||||
border-bottom: 1px solid black;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
@ -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>
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user