mirror of
https://github.com/usebruno/bruno.git
synced 2024-11-21 23:43:15 +01:00
feat: navbar component
This commit is contained in:
parent
fd4ac03a97
commit
07fc8af7ed
6
docs/development.md
Normal file
6
docs/development.md
Normal file
@ -0,0 +1,6 @@
|
||||
## development
|
||||
|
||||
```bash
|
||||
# run this at root
|
||||
lerna bootstrap --hoist
|
||||
```
|
50761
package-lock.json
generated
50761
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -6,7 +6,6 @@
|
||||
"packages/grafnode-www"
|
||||
],
|
||||
"dependencies": {
|
||||
"@tabler/icons": "^1.44.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.16.0",
|
||||
|
@ -0,0 +1,8 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
background: #383735;
|
||||
color: white;
|
||||
`;
|
||||
|
||||
export default StyledWrapper;
|
@ -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>
|
||||
)
|
||||
};
|
||||
|
||||
|
@ -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'
|
||||
}
|
||||
};
|
4
packages/grafnode-run/.babelrc
Normal file
4
packages/grafnode-run/.babelrc
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"presets": ["next/babel"],
|
||||
"plugins": [["styled-components", { "ssr": true }]]
|
||||
}
|
2970
packages/grafnode-run/package-lock.json
generated
2970
packages/grafnode-run/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
}
|
||||
|
@ -1,4 +1,5 @@
|
||||
import '../styles/globals.css'
|
||||
import 'tailwindcss/dist/tailwind.min.css';
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return <Component {...pageProps} />
|
||||
|
44
packages/grafnode-run/src/pages/_document.js
Normal file
44
packages/grafnode-run/src/pages/_document.js
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user