diff --git a/smart-hut/public/avatar.png b/smart-hut/public/avatar.png new file mode 100644 index 0000000..86ce723 Binary files /dev/null and b/smart-hut/public/avatar.png differ diff --git a/smart-hut/public/avatar2.png b/smart-hut/public/avatar2.png new file mode 100644 index 0000000..97ac118 Binary files /dev/null and b/smart-hut/public/avatar2.png differ diff --git a/smart-hut/public/avatar3.png b/smart-hut/public/avatar3.png new file mode 100644 index 0000000..ec160b5 Binary files /dev/null and b/smart-hut/public/avatar3.png differ diff --git a/smart-hut/public/smart-home.png b/smart-hut/public/smart-home.png new file mode 100644 index 0000000..d2681ce Binary files /dev/null and b/smart-hut/public/smart-home.png differ diff --git a/smart-hut/public/smart-home_index.png b/smart-hut/public/smart-home_index.png new file mode 100644 index 0000000..3b678bc Binary files /dev/null and b/smart-hut/public/smart-home_index.png differ diff --git a/smart-hut/public/title.png b/smart-hut/public/title.png new file mode 100644 index 0000000..0e288cf Binary files /dev/null and b/smart-hut/public/title.png differ diff --git a/smart-hut/public/title2.png b/smart-hut/public/title2.png new file mode 100644 index 0000000..b98cab7 Binary files /dev/null and b/smart-hut/public/title2.png differ diff --git a/smart-hut/public/title3.png b/smart-hut/public/title3.png new file mode 100644 index 0000000..635a665 Binary files /dev/null and b/smart-hut/public/title3.png differ diff --git a/smart-hut/public/title4.png b/smart-hut/public/title4.png new file mode 100644 index 0000000..8a39bf1 Binary files /dev/null and b/smart-hut/public/title4.png differ diff --git a/smart-hut/public/title5.png b/smart-hut/public/title5.png new file mode 100644 index 0000000..c72b33b Binary files /dev/null and b/smart-hut/public/title5.png differ diff --git a/smart-hut/public/user-icon.png b/smart-hut/public/user-icon.png new file mode 100644 index 0000000..7c2a03c Binary files /dev/null and b/smart-hut/public/user-icon.png differ diff --git a/smart-hut/src/Routes.js b/smart-hut/src/Routes.js index 0afa599..32bfded 100644 --- a/smart-hut/src/Routes.js +++ b/smart-hut/src/Routes.js @@ -1,15 +1,22 @@ import React from 'react'; import {Route, Switch} from 'react-router-dom'; +import ConfirmRegistration from "./views/ConfirmRegistration"; +import ForgotPassword from "./views/ForgotPassword"; import Home from './views/Home'; import Login from "./views/Login"; import Signup from "./views/Signup"; +import TestHeaderController from "./views/TestHeaderController" export default function Routes() { return ( + + + + ) } diff --git a/smart-hut/src/components/HeaderController.js b/smart-hut/src/components/HeaderController.js new file mode 100644 index 0000000..355d08a --- /dev/null +++ b/smart-hut/src/components/HeaderController.js @@ -0,0 +1,191 @@ +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 = () => ( + + ) + + const ImageExampleWrapped2 = () => ( + + ) + +const ImageExampleWrapped3 = () => ( + + ) + +const HeaderExampleIconProp = () => ( +
+) + + + +const GridExampleInverted = () => ( + + + + + + + + + + + + + + + + + + + + Settings + + Document + Image + + + See profile... + + Logout + + + + + + ) + +export default class MyHeader extends React.Component { + render() { + return ( +
+ +
+ ); + } + } + + + + // 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 = () => ( +// +// +// +// + +// +// +// +// +// +// +// +// +// +// +// ) + + + + + + + + +// class MenuExampleInvertedSegment extends Component { +// state = { activeItem: 'home' } + +// handleItemClick = (e, { name }) => this.setState({ activeItem: name }) + +// render() { +// const { activeItem } = this.state + +// return ( +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// New + +// +// Document +// Image +// +// +// Open +// Save... +// Edit Permissions +// +// Export +// Share +// +// +// +// +// +// +// ) +// } +// } \ No newline at end of file diff --git a/smart-hut/src/components/HomeNavbar.js b/smart-hut/src/components/HomeNavbar.js new file mode 100644 index 0000000..5bcafb5 --- /dev/null +++ b/smart-hut/src/components/HomeNavbar.js @@ -0,0 +1,130 @@ +import _ from "lodash"; +import React, { Component } from "react"; +import { render } from "react-dom"; +import { + Container, + Icon, + Image, + Menu, + Sidebar, + Responsive +} from "semantic-ui-react"; + + +const NavBarMobile = ({ + children, + leftItems, + onPusherClick, + onToggle, + rightItems, + visible + }) => ( + + + + + + + + + + + + {_.map(rightItems, item => )} + + + {children} + + + ); + + const NavBarDesktop = ({ leftItems, rightItems }) => ( + + + + + {_.map(leftItems, item => )} + + {_.map(rightItems, item => )} + + + ); + + const NavBarChildren = ({ children }) => ( + {children} + ); + + +class HomeNavabarApp extends Component { + constructor(props) { + super(props); + this.state = { + logged : true, + email: "", + password : "" + }; + } + state = { + visible: false + }; + + handlePusher = () => { + const { visible } = this.state; + + if (visible) this.setState({ visible: false }); + }; + + handleToggle = () => this.setState({ visible: !this.state.visible }); + + render() { + const { children, leftItems, rightItems } = this.props; + const { visible } = this.state; + + return ( +
+ + + {children} + + + + + {children} + +
+ ); + } +} + +const leftItems = [ + { as: "a", content: "Home", key: "home", href:"/" }, + ]; + const rightItems = [ + { as: "a", content: "Login", key: "login", href:"/login" }, + { as: "a", content: "Sign up", key: "register", href:"/signup" } + ]; + +const HomeNavbarApp = () => ( + + + ); + +export default HomeNavbarApp; diff --git a/smart-hut/src/views/ConfirmRegistration.js b/smart-hut/src/views/ConfirmRegistration.js new file mode 100644 index 0000000..9bec496 --- /dev/null +++ b/smart-hut/src/views/ConfirmRegistration.js @@ -0,0 +1,107 @@ +import React, { Component } from "react"; +import { render } from "react-dom"; +import HomeNavbar from "./../components/HomeNavbar"; +import { + Container, + Icon, + Image, + Menu, + Sidebar, + Responsive, + Header, + Divider, + Message, + Grid +} from "semantic-ui-react"; + +class Paragraph extends Component { + state = { visible: true } + + handleDismiss = () => { + this.setState({ visible: false }) + + setTimeout(() => { + this.setState({ visible: true }) + }, 2000) + } + + render() { + if (this.state.visible) { + return ( + + ) + } + + return ( +

+
+ The message will return in 2s +
+
+

+ ) + } + } + + + const MessageReg = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) + +export default class ConfirmRegistration extends React.Component { + render () { + return ( + + ) + } +} \ No newline at end of file diff --git a/smart-hut/src/views/ForgotPassword.js b/smart-hut/src/views/ForgotPassword.js new file mode 100644 index 0000000..7b3a2bd --- /dev/null +++ b/smart-hut/src/views/ForgotPassword.js @@ -0,0 +1,107 @@ +import React, { Component } from "react"; +import { render } from "react-dom"; +import HomeNavbar from "./../components/HomeNavbar"; +import { + Container, + Icon, + Image, + Menu, + Sidebar, + Responsive, + Header, + Divider, + Message, + Grid +} from "semantic-ui-react"; + +class Paragraph extends Component { + state = { visible: true } + + handleDismiss = () => { + this.setState({ visible: false }) + + setTimeout(() => { + this.setState({ visible: true }) + }, 2000) + } + + render() { + if (this.state.visible) { + return ( + + ) + } + + return ( +

+
+ The message will return in 2s +
+
+

+ ) + } + } + + + const MessageReg = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) + +export default class ForgotPasswrod extends React.Component { + render () { + return ( + + ) + } +} \ No newline at end of file diff --git a/smart-hut/src/views/Home.js b/smart-hut/src/views/Home.js index c73c137..4937938 100644 --- a/smart-hut/src/views/Home.js +++ b/smart-hut/src/views/Home.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; +import HomeNavbar from './../components/HomeNavbar'; import { Button, Container, @@ -89,30 +90,7 @@ class DesktopContainer extends Component { }} vertical > - - - - Home - - - - - - - - + diff --git a/smart-hut/src/views/TestHeaderController.js b/smart-hut/src/views/TestHeaderController.js new file mode 100644 index 0000000..6293908 --- /dev/null +++ b/smart-hut/src/views/TestHeaderController.js @@ -0,0 +1,20 @@ +import _ from "lodash"; +import React, { Component } from "react"; +import HeaderController from "./../components/HeaderController"; +import { render } from "react-dom"; +import { + Container, + Icon, + Image, + Menu, + Sidebar, + Responsive +} from "semantic-ui-react"; + +export default class TestHeaderController extends React.Component { + render () { + return ( + + ) + } +} \ No newline at end of file