Skip to content

Commit 4ab62e9

Browse files
mmtandocmmtandoc
committed
Updated home page
1 parent 3760bd3 commit 4ab62e9

File tree

1 file changed

+154
-56
lines changed

1 file changed

+154
-56
lines changed

‎pages/index.tsx

Lines changed: 154 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,71 +4,169 @@ import React from "react"
44

55
import { NextPageWithLayout } from "types/common"
66

7+
type HomeGridItem = {
8+
id: string
9+
header: string
10+
links: { label: string; url: string }[]
11+
}
12+
13+
const homeLinks: HomeGridItem[] = [
14+
{
15+
id: "compounds",
16+
header: "Compounds & MFRs",
17+
links: [{ label: "View all", url: "/compounds" }],
18+
},
19+
{
20+
id: "risk-assessments",
21+
header: "Risk assessments",
22+
links: [
23+
{ label: "View all", url: "/risk-assessments" },
24+
{
25+
label: "Create",
26+
url: "/risk-assessments/new",
27+
},
28+
],
29+
},
30+
{
31+
id: "sds-summaries",
32+
header: "SDS summaries",
33+
links: [
34+
{ label: "View all", url: "/sds" },
35+
{ label: "Create", url: "/sds/new" },
36+
],
37+
},
38+
{
39+
id: "products",
40+
header: "Products",
41+
links: [
42+
{ label: "View all", url: "/products" },
43+
{ label: "Create", url: "/products/new" },
44+
],
45+
},
46+
{
47+
id: "chemicals",
48+
header: "Chemicals",
49+
links: [
50+
{ label: "View all", url: "/chemicals" },
51+
{ label: "Create", url: "/chemicals/new" },
52+
],
53+
},
54+
]
55+
/* {
56+
header: "Misc.",
57+
links: [
58+
{ label: "Health hazards table", url: "/hazards" },
59+
{ label: "Link directory", url: "/links" },
60+
{ label: "Settings", url: "/settings" },
61+
],
62+
}, */
63+
64+
const HomeCell = ({ item }: { item: HomeGridItem }) => (
65+
<div className={`home-cell ${item.id}`}>
66+
<div className="header">{item.header}</div>
67+
<div className="links">
68+
{item.links.map((link, i) => (
69+
<Link href={link.url} key={i}>
70+
{link.label}
71+
</Link>
72+
))}
73+
</div>
74+
<style jsx>{`
75+
.home-cell {
76+
grid-area: ${item.id};
77+
}
78+
`}</style>
79+
</div>
80+
)
81+
782
const Home: NextPageWithLayout = () => {
883
return (
984
<>
10-
<div className="data-links-row">
11-
<div className="data-links">
12-
<h2>Risk Assessments</h2>
13-
<ul>
14-
<li>
15-
<Link href="/risk-assessments">View Risk Assessments</Link>
16-
</li>
17-
<li>
18-
<Link href="/risk-assessments/new">New Risk Assessment</Link>
19-
</li>
20-
</ul>
21-
</div>
22-
<div className="data-links">
23-
<h2>SDS Summaries</h2>
24-
<ul>
25-
<li>
26-
<Link href="/sds">View SDS Summaries</Link>
27-
</li>
28-
<li>
29-
<Link href="/sds/new">New SDS Summary</Link>
30-
</li>
31-
</ul>
32-
</div>
33-
<div className="data-links">
34-
<h2>Chemicals</h2>
35-
<ul>
36-
<li>
37-
<Link href="/chemicals">View Chemicals</Link>
38-
</li>
39-
<li>
40-
<Link href="/chemicals/new">New Chemical</Link>
41-
</li>
42-
</ul>
43-
</div>
44-
<div className="data-links">
45-
<h2>Products</h2>
46-
<ul>
47-
<li>
48-
<Link href="/products">View Products</Link>
49-
</li>
50-
<li>
51-
<Link href="/products/new">New Product</Link>
52-
</li>
53-
</ul>
54-
</div>
85+
<div className="home-grid">
86+
{homeLinks.map((item, i) => (
87+
<HomeCell key={i} item={item} />
88+
))}
5589
</div>
56-
<style jsx>{`
57-
.data-links-row {
58-
display: flex;
59-
flex-wrap: wrap;
60-
}
90+
<style jsx global>{`
91+
.home-grid {
92+
margin-top: 5rem;
93+
padding: 0.5rem;
94+
display: grid;
95+
grid-template-columns: 1fr;
96+
grid-template-areas:
97+
"compounds"
98+
"risk-assessments"
99+
"sds-summaries"
100+
"products"
101+
"chemicals";
102+
gap: 1rem;
103+
margin-inline: auto;
104+
105+
> div {
106+
border: var(--border-default);
107+
display: flex;
108+
flex-direction: column;
109+
> .header {
110+
margin-block: 0;
111+
font-size: var(--font-size-lg);
112+
font-weight: 600;
113+
background: var(--color-canvas-subtle);
114+
border-bottom: var(--border-default);
115+
text-align: center;
116+
padding: 0.3rem 3rem;
117+
}
61118
62-
.data-links {
63-
flex: 1;
119+
> .links {
120+
display: flex;
121+
height: 100%;
122+
> * {
123+
flex: 1;
124+
font-size: var(--font-size-base);
125+
text-align: center;
126+
padding: 0.3rem 0.6rem;
127+
}
128+
129+
> :not(:last-child) {
130+
border-right: var(--border-default);
131+
}
132+
}
133+
}
64134
}
65135
66-
.data-links > h2 {
67-
margin-bottom: 0;
136+
@media (min-width: 850px) {
137+
.home-grid {
138+
grid-template-columns: repeat(3, 1fr);
139+
grid-template-rows: repeat(3, 1fr);
140+
grid-template-areas:
141+
"compounds risk-assessments sds-summaries"
142+
". . products"
143+
". . chemicals";
144+
145+
width: fit-content;
146+
147+
> div {
148+
> .header {
149+
font-size: var(--font-size-lg);
150+
white-space: nowrap;
151+
}
152+
153+
> .links > * {
154+
font-size: var(--font-size-base);
155+
}
156+
}
157+
}
68158
}
69159
70-
.data-links > ul {
71-
margin-top: 0;
160+
@media (min-width: 1000px) {
161+
.home-grid > div {
162+
> .header {
163+
font-size: var(--font-size-xl);
164+
}
165+
166+
> .links > * {
167+
font-size: var(--font-size-lg);
168+
}
169+
}
72170
}
73171
`}</style>
74172
</>

0 commit comments

Comments
 (0)