1
Fork 0
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:
Stefano Pigozzi 2021-04-21 18:46:35 +02:00
parent 863419d3bc
commit 24f70457b6
Signed by untrusted user who does not match committer: steffo
GPG key ID: 6965406171929D01
2 changed files with 50 additions and 1 deletions

View file

@ -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>
)
}

View file

@ -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;
}