mirror of
https://github.com/yusufipk/trillo-react.git
synced 2026-09-11 10:56:15 +00:00
created the layout
This commit is contained in:
+9
-1
@@ -1,7 +1,15 @@
|
|||||||
|
import React from "react";
|
||||||
import "./App.scss";
|
import "./App.scss";
|
||||||
|
import Header from "./commons/header/header";
|
||||||
|
import Main from "./commons/main/main";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return <div>Trillo</div>;
|
return (
|
||||||
|
<div className="container">
|
||||||
|
<Header />
|
||||||
|
<Main />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
@@ -7,3 +7,5 @@
|
|||||||
@import "./SASS/base/typography";
|
@import "./SASS/base/typography";
|
||||||
@import "./SASS/base/base";
|
@import "./SASS/base/base";
|
||||||
@import "./SASS/base/utilities";
|
@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-default: 0 1.5rem 4rem rgba($color-black, 0.15);
|
||||||
$shadow-light: 0.5rem 1rem 2rem rgba($color-black, 0.2);
|
$shadow-light: 0.5rem 1rem 2rem rgba($color-black, 0.2);
|
||||||
$shadow-link: 0 1rem 2rem rgba($color-black, 0.4);
|
$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-small: 0.2rem;
|
||||||
$border-radius-default: 0.3rem;
|
$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