mirror of
https://github.com/yusufipk/trillo-react.git
synced 2026-09-11 19:06:10 +00:00
created the layout
This commit is contained in:
+9
-1
@@ -1,7 +1,15 @@
|
||||
import React from "react";
|
||||
import "./App.scss";
|
||||
import Header from "./commons/header/header";
|
||||
import Main from "./commons/main/main";
|
||||
|
||||
function App() {
|
||||
return <div>Trillo</div>;
|
||||
return (
|
||||
<div className="container">
|
||||
<Header />
|
||||
<Main />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -7,3 +7,5 @@
|
||||
@import "./SASS/base/typography";
|
||||
@import "./SASS/base/base";
|
||||
@import "./SASS/base/utilities";
|
||||
|
||||
@import "./SASS/layout/layout";
|
||||
|
||||
@@ -44,6 +44,7 @@ $big-font-size: 5rem;
|
||||
$shadow-default: 0 1.5rem 4rem rgba($color-black, 0.15);
|
||||
$shadow-light: 0.5rem 1rem 2rem rgba($color-black, 0.2);
|
||||
$shadow-link: 0 1rem 2rem rgba($color-black, 0.4);
|
||||
$shadow-blurry: 0 2rem 6rem rgba($color-black, 0.3);
|
||||
|
||||
$border-radius-small: 0.2rem;
|
||||
$border-radius-default: 0.3rem;
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
.container {
|
||||
max-width: 120rem;
|
||||
margin: 8rem auto;
|
||||
background-color: $color-grey-light-2;
|
||||
box-shadow: $shadow-blurry;
|
||||
|
||||
min-height: 50rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 7rem;
|
||||
background-color: $color-white;
|
||||
border-bottom: $color-grey-light-2;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: $color-grey-dark-1;
|
||||
|
||||
flex: 0 0 18%;
|
||||
}
|
||||
|
||||
.hotel-view {
|
||||
background-color: $color-white;
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
function Header() {
|
||||
return <header className="header">Header Part</header>;
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@@ -0,0 +1,5 @@
|
||||
function HotelView() {
|
||||
return <main className="hotel-view">Hotel view</main>;
|
||||
}
|
||||
|
||||
export default HotelView;
|
||||
@@ -0,0 +1,13 @@
|
||||
import HotelView from "../hotel-view/hotel-view";
|
||||
import Nav from "../navigation/navigation";
|
||||
|
||||
function Main() {
|
||||
return (
|
||||
<div className="content">
|
||||
<Nav />
|
||||
<HotelView />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Main;
|
||||
@@ -0,0 +1,5 @@
|
||||
function Nav() {
|
||||
return <nav className="sidebar">Navigation</nav>;
|
||||
}
|
||||
|
||||
export default Nav;
|
||||
Reference in New Issue
Block a user