mirror of
https://github.com/pds-nest/nest.git
synced 2025-02-16 12:43:58 +00:00
🔧 Add layout to PageHome
This commit is contained in:
parent
863419d3bc
commit
24f70457b6
2 changed files with 50 additions and 1 deletions
|
@ -1,12 +1,28 @@
|
|||
import React from "react"
|
||||
import Style from "./PageHome.module.css"
|
||||
import classNames from "classnames"
|
||||
import BoxHeaderOnly from "../components/BoxHeaderOnly"
|
||||
import BoxWithHeader from "../components/BoxWithHeader"
|
||||
|
||||
|
||||
export default function PageHome({ children, className, ...props }) {
|
||||
return (
|
||||
<div className={classNames(Style.PageHome, className)} {...props}>
|
||||
{children}
|
||||
<BoxHeaderOnly className={Style.Header}>
|
||||
Create a new repository
|
||||
</BoxHeaderOnly>
|
||||
<BoxWithHeader className={Style.SearchByZone} header={"Search by zone"}>
|
||||
|
||||
</BoxWithHeader>
|
||||
<BoxWithHeader className={Style.SearchByHashtags} header={"Search by hashtags"}>
|
||||
|
||||
</BoxWithHeader>
|
||||
<BoxWithHeader className={Style.SearchByTimePeriod} header={"Search by time period"}>
|
||||
|
||||
</BoxWithHeader>
|
||||
<BoxWithHeader className={Style.CreateDialog} header={"Create repository"}>
|
||||
|
||||
</BoxWithHeader>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,3 +1,36 @@
|
|||
.PageHome {
|
||||
display: grid;
|
||||
|
||||
grid-template-areas:
|
||||
"a a"
|
||||
"b c"
|
||||
"b d"
|
||||
"b e"
|
||||
;
|
||||
grid-template-rows: auto 1fr 1fr 1fr;
|
||||
|
||||
grid-gap: 10px;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.Header {
|
||||
grid-area: a;
|
||||
}
|
||||
|
||||
.SearchByZone {
|
||||
grid-area: b;
|
||||
}
|
||||
|
||||
.SearchByHashtags {
|
||||
grid-area: c;
|
||||
}
|
||||
|
||||
.SearchByTimePeriod {
|
||||
grid-area: d;
|
||||
}
|
||||
|
||||
.CreateDialog {
|
||||
grid-area: e;
|
||||
}
|
Loading…
Add table
Reference in a new issue