feat: navbar component

This commit is contained in:
Anoop M D 2021-12-04 00:16:54 +05:30
parent fd4ac03a97
commit 07fc8af7ed
11 changed files with 28153 additions and 25664 deletions

6
docs/development.md Normal file
View File

@ -0,0 +1,6 @@
## development
```bash
# run this at root
lerna bootstrap --hoist
```

50761
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -6,7 +6,6 @@
"packages/grafnode-www"
],
"dependencies": {
"@tabler/icons": "^1.44.0"
},
"devDependencies": {
"@babel/core": "^7.16.0",

View File

@ -0,0 +1,8 @@
import styled from 'styled-components';
const StyledWrapper = styled.div`
background: #383735;
color: white;
`;
export default StyledWrapper;

View File

@ -1,10 +1,16 @@
import React from 'react';
import { IconBox } from '@tabler/icons';
import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import StyledWrapper from './StyledWrapper';
const Navbar = () => {
return (
<div className="px-3 py-2 flex items-center bg-gray-200 justify-center">
Navbar
</div>
<StyledWrapper className="px-3 py-2 flex items-center bg-gray-200 justify-center">
<IconBox size={22} strokeWidth={1.5}/>
<span className="ml-2">My Workspace</span>
<FontAwesomeIcon className="ml-2 text-gray-200" icon={faCaretDown} style={{fontSize: 13}}/>
</StyledWrapper>
)
};

View File

@ -21,6 +21,10 @@ module.exports = {
]
},
externals: {
'react': 'react'
'react': 'react',
'styled-components': 'styled-components',
'@tabler/icon': '@tabler/icon',
'@fortawesome/free-solid-svg-icons': '@fortawesome/free-solid-svg-icons',
'@fortawesome/react-fontawesome': '@fortawesome/react-fontawesome'
}
};

View File

@ -0,0 +1,4 @@
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}

File diff suppressed because it is too large Load Diff

View File

@ -1,5 +1,5 @@
{
"name": "@grafnode/www",
"name": "@grafnode/run",
"version": "0.0.1",
"description": "",
"main": "src/index.js",
@ -32,6 +32,8 @@
"tailwindcss": "^2.2.19"
},
"devDependencies": {
"babel-plugin-styled-components": "^2.0.2",
"babel-preset-next": "^1.4.0",
"eslint": "7.32.0",
"eslint-config-next": "12.0.4"
}

View File

@ -1,4 +1,5 @@
import '../styles/globals.css'
import 'tailwindcss/dist/tailwind.min.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />

View File

@ -0,0 +1,44 @@
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html>
<Head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}