frontend/smart-hut/src/components/HeaderController.js

191 lines
5.2 KiB
JavaScript
Raw Normal View History

import React, { Component } from "react";
import { render } from "react-dom";
import { Button, Menu, Header, Dropdown, Icon, Grid, Divider} from 'semantic-ui-react'
import { Segment, Image } from 'semantic-ui-react'
const ImageExampleWrapped = () => (
<Image src='avatar3.png' size='tiny' centered
/>
)
const ImageExampleWrapped2 = () => (
<Image
src='smart-home.png'
size='tiny'
centered
as='a'
href='/'
/>
)
const ImageExampleWrapped3 = () => (
<Image src='title2.png' size='medium' centered/>
)
const HeaderExampleIconProp = () => (
<Header as='h2' icon='plug' color="white" content='Smart Hut' />
)
const GridExampleInverted = () => (
<Grid columns='equal' divided inverted padded >
<Grid.Row color='black' textAlign='center'>
<Grid.Column width={2}>
<Segment color='black' inverted>
<ImageExampleWrapped2 />
</Segment>
</Grid.Column>
<Grid.Column>
<Segment color='black' inverted>
<ImageExampleWrapped3 />
</Segment>
</Grid.Column>
<Grid.Column width={3}>
<ImageExampleWrapped />
<Divider />
<Dropdown item icon='setting' size='huge'>
<Dropdown.Menu>
<Dropdown.Item>
<Icon name='dropdown' />
<span className='text'>Settings</span>
<Dropdown.Menu>
<Dropdown.Item>Document</Dropdown.Item>
<Dropdown.Item>Image</Dropdown.Item>
</Dropdown.Menu>
</Dropdown.Item>
<Dropdown.Item>See profile...</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>Logout</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Grid.Column>
</Grid.Row>
</Grid>
)
export default class MyHeader extends React.Component {
render() {
return (
<div>
<GridExampleInverted />
</div>
);
}
}
// const navbar = {
// backgroundColor: "#20222b",
// color: "white",
// marginBottom: "4.6rem",
// padding: "3.2rem 0"
// };
// const navbar__buttons = {
// borderBottom: "1px solid lighten($light-blue, 10%)",
// display: "flex",
// justifyContent: "space-between",
// padding: "3.2rem 1.6rem"
// }
// const button = {
// background: "#8357c5",
// border: "none",
// borderBottom: "1px solid purple",
// color: "white",
// fontWeight: "500",
// padding: "1.2rem"
// }
// const MenuExampleButtons = () => (
// <Menu>
// <Menu.Item>
// <Button primary>Sign up</Button>
// </Menu.Item>
// <Menu.Item>
// <Button>Log-in</Button>
// </Menu.Item>
// <Menu.Item>
// <Button>Log-in</Button>
// </Menu.Item>
// <Menu.Item>
// <Button>Log-in</Button>
// </Menu.Item>
// </Menu>
// )
// class MenuExampleInvertedSegment extends Component {
// state = { activeItem: 'home' }
// handleItemClick = (e, { name }) => this.setState({ activeItem: name })
// render() {
// const { activeItem } = this.state
// return (
// <Segment inverted>
// <Menu inverted secondary>
// <Menu.Item
// name='home'
// active={activeItem === 'home'}
// onClick={this.handleItemClick}
// />
// <Menu.Item
// name='messages'
// active={activeItem === 'messages'}
// onClick={this.handleItemClick}
// />
// <Menu.Item />
// <Menu.Item />
// <Menu.Item />
// <Menu.Item />
// <Menu.Item />
// <Menu.Item />
// <HeaderExampleIconProp />
// <Menu.Item />
// <Menu.Item />
// <Menu.Item />
// <Menu.Item />
// <Menu.Item />
// <Menu.Item
// name='messages'
// active={activeItem === 'messages'}
// onClick={this.handleItemClick}
// />
// <Dropdown item icon='wrench' simple>
// <Dropdown.Menu>
// <Dropdown.Item>
// <Icon name='dropdown' />
// <span className='text'>New</span>
// <Dropdown.Menu>
// <Dropdown.Item>Document</Dropdown.Item>
// <Dropdown.Item>Image</Dropdown.Item>
// </Dropdown.Menu>
// </Dropdown.Item>
// <Dropdown.Item>Open</Dropdown.Item>
// <Dropdown.Item>Save...</Dropdown.Item>
// <Dropdown.Item>Edit Permissions</Dropdown.Item>
// <Dropdown.Divider />
// <Dropdown.Header>Export</Dropdown.Header>
// <Dropdown.Item>Share</Dropdown.Item>
// </Dropdown.Menu>
// </Dropdown>
// <ImageExampleWrapped />
// <Menu.Item />
// </Menu>
// </Segment>
// )
// }
// }