Skip to content

Commit 4b6112f

Browse files
softmarshmallowsoftmarshmallow
committed
add home layouts & coresponding layouts - generated
1 parent 396414f commit 4b6112f

15 files changed

Lines changed: 510 additions & 69 deletions

‎editor/babel.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ module.exports = {
88
root: ["."],
99
alias: {
1010
components: "./components",
11+
icons: "./icons",
1112
layouts: "./layouts",
1213
utils: "./utils",
1314
public: "./public",

‎editor/components/home-input/README.md‎

Whitespace-only changes.

‎editor/components/home-input/home-input-appbar.tsx‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import React from "react";
2+
import styled from "@emotion/styled";
3+
4+
export function HomeInputAppbar() {
5+
return (
6+
<RootWrapperHomeInputAppbar>
7+
<GithubMenu>
8+
<Github>Github</Github>
9+
</GithubMenu>
10+
<GridacoMenu>
11+
<GridaCo>Grida.co</GridaCo>
12+
</GridacoMenu>
13+
<DocsMenu>
14+
<Docs>Docs</Docs>
15+
</DocsMenu>
16+
<SigninButton>
17+
<SignIn>Sign in</SignIn>
18+
</SigninButton>
19+
</RootWrapperHomeInputAppbar>
20+
);
21+
}
22+
23+
const RootWrapperHomeInputAppbar = styled.div`
24+
display: flex;
25+
justify-content: flex-end;
26+
flex-direction: row;
27+
align-items: center;
28+
gap: 10px;
29+
align-self: stretch;
30+
box-sizing: border-box;
31+
padding: 16px 40px;
32+
`;
33+
34+
const GithubMenu = styled.div`
35+
display: flex;
36+
justify-content: flex-start;
37+
flex-direction: row;
38+
align-items: start;
39+
flex: none;
40+
gap: 10px;
41+
border-radius: 4px;
42+
width: 68px;
43+
height: 39px;
44+
box-sizing: border-box;
45+
padding: 10px 10px;
46+
`;
47+
48+
const Github = styled.span`
49+
color: rgba(147, 147, 147, 1);
50+
text-overflow: ellipsis;
51+
font-size: 16px;
52+
font-family: "Helvetica Neue", sans-serif;
53+
font-weight: 400;
54+
text-align: left;
55+
`;
56+
57+
const GridacoMenu = styled.div`
58+
display: flex;
59+
justify-content: flex-start;
60+
flex-direction: row;
61+
align-items: start;
62+
flex: none;
63+
gap: 10px;
64+
border-radius: 4px;
65+
width: 82px;
66+
height: 39px;
67+
box-sizing: border-box;
68+
padding: 10px 10px;
69+
`;
70+
71+
const GridaCo = styled.span`
72+
color: rgba(147, 147, 147, 1);
73+
text-overflow: ellipsis;
74+
font-size: 16px;
75+
font-family: "Helvetica Neue", sans-serif;
76+
font-weight: 400;
77+
text-align: left;
78+
`;
79+
80+
const DocsMenu = styled.div`
81+
display: flex;
82+
justify-content: flex-start;
83+
flex-direction: row;
84+
align-items: start;
85+
flex: none;
86+
gap: 10px;
87+
border-radius: 4px;
88+
width: 58px;
89+
height: 39px;
90+
box-sizing: border-box;
91+
padding: 10px 10px;
92+
`;
93+
94+
const Docs = styled.span`
95+
color: rgba(147, 147, 147, 1);
96+
text-overflow: ellipsis;
97+
font-size: 16px;
98+
font-family: "Helvetica Neue", sans-serif;
99+
font-weight: 400;
100+
text-align: left;
101+
`;
102+
103+
const SigninButton = styled.div`
104+
display: flex;
105+
justify-content: flex-start;
106+
flex-direction: row;
107+
align-items: start;
108+
flex: none;
109+
gap: 10px;
110+
border-radius: 4px;
111+
width: 69px;
112+
height: 39px;
113+
box-sizing: border-box;
114+
padding: 10px 10px;
115+
`;
116+
117+
const SignIn = styled.span`
118+
color: rgba(255, 255, 255, 1);
119+
text-overflow: ellipsis;
120+
font-size: 16px;
121+
font-family: "Helvetica Neue", sans-serif;
122+
font-weight: 400;
123+
text-align: left;
124+
`;

‎editor/components/home-input/home-primary-input-next-button.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from "react";
2+
import styled from "@emotion/styled";
3+
4+
export function HomePrimaryInputNextButton({
5+
disabled = false,
6+
}: {
7+
disabled?: boolean;
8+
}) {
9+
if (disabled) {
10+
return <DisabledTrueThemeDark />;
11+
}
12+
return <DisabledFalseThemeDark />;
13+
}
14+
15+
function DisabledFalseThemeDark() {
16+
return (
17+
<RootWrapperDisabledFalseThemeDark
18+
src="grida://assets-reservation/images/734:9050"
19+
alt="icon"
20+
></RootWrapperDisabledFalseThemeDark>
21+
);
22+
}
23+
24+
const RootWrapperDisabledFalseThemeDark = styled.img`
25+
width: 24px;
26+
height: 24px;
27+
object-fit: cover;
28+
`;
29+
30+
function DisabledTrueThemeDark() {
31+
return (
32+
<RootWrapperDisabledTrueThemeDark
33+
src="grida://assets-reservation/images/734:9046"
34+
alt="icon"
35+
></RootWrapperDisabledTrueThemeDark>
36+
);
37+
}
38+
39+
const RootWrapperDisabledTrueThemeDark = styled.img`
40+
width: 24px;
41+
height: 24px;
42+
object-fit: cover;
43+
`;

‎editor/components/home-input/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from "./home-input-appbar";
2+
export * from "./home-primary-input-next-button";

‎editor/components/home/README.md‎

Whitespace-only changes.

‎editor/components/home/card.tsx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import React from "react";
2+
import styled from "@emotion/styled";
3+
4+
export function HomeSceneCard({
5+
label,
6+
description,
7+
onClick,
8+
thumbnail,
9+
labelIcon,
10+
}: {
11+
label: string;
12+
description?: string;
13+
onClick?: () => void;
14+
thumbnail: string;
15+
labelIcon?: React.ReactElement;
16+
}) {
17+
return (
18+
<RootWrapperBaseHomeSceneCard onClick={onClick}>
19+
<Body>
20+
<ThumbnailArea>
21+
<SceneCardPreviewThumbnailImage>
22+
<ThumbnailImage src={thumbnail}></ThumbnailImage>
23+
</SceneCardPreviewThumbnailImage>
24+
</ThumbnailArea>
25+
<ContentArea>
26+
<LabelDescContainer>
27+
<LabelArea>
28+
{labelIcon && <LabelIcon>{labelIcon}</LabelIcon>}
29+
<ThisLabel>{label}</ThisLabel>
30+
</LabelArea>
31+
{description && <Description>{description}</Description>}
32+
</LabelDescContainer>
33+
</ContentArea>
34+
</Body>
35+
</RootWrapperBaseHomeSceneCard>
36+
);
37+
}
38+
39+
const RootWrapperBaseHomeSceneCard = styled.div`
40+
display: flex;
41+
justify-content: flex-start;
42+
flex-direction: column;
43+
align-items: start;
44+
flex: none;
45+
gap: 10px;
46+
border: solid 1px rgba(72, 72, 72, 1);
47+
border-radius: 2px;
48+
background-color: rgba(37, 37, 38, 1);
49+
box-sizing: border-box;
50+
51+
:hover {
52+
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
53+
border: solid 1px rgba(72, 72, 72, 1);
54+
}
55+
`;
56+
57+
const Body = styled.div`
58+
display: flex;
59+
justify-content: flex-start;
60+
flex-direction: column;
61+
align-items: start;
62+
flex: 1;
63+
gap: 3px;
64+
align-self: stretch;
65+
box-sizing: border-box;
66+
`;
67+
68+
const ThumbnailArea = styled.div`
69+
display: flex;
70+
justify-content: flex-start;
71+
flex-direction: column;
72+
align-items: start;
73+
flex: 1;
74+
gap: 10px;
75+
align-self: stretch;
76+
box-sizing: border-box;
77+
`;
78+
79+
const SceneCardPreviewThumbnailImage = styled.div`
80+
height: 101px;
81+
position: relative;
82+
align-self: stretch;
83+
`;
84+
85+
const ThumbnailImage = styled.img`
86+
object-fit: cover;
87+
width: 100%;
88+
height: 100%;
89+
`;
90+
91+
const ContentArea = styled.div`
92+
display: flex;
93+
justify-content: flex-start;
94+
flex-direction: row;
95+
align-items: start;
96+
flex: 1;
97+
gap: 10px;
98+
align-self: stretch;
99+
box-sizing: border-box;
100+
padding: 10px 10px;
101+
`;
102+
103+
const LabelDescContainer = styled.div`
104+
display: flex;
105+
justify-content: flex-start;
106+
flex-direction: column;
107+
align-items: start;
108+
flex: none;
109+
gap: 10px;
110+
width: 221px;
111+
height: 48px;
112+
box-sizing: border-box;
113+
`;
114+
115+
const LabelArea = styled.div`
116+
display: flex;
117+
justify-content: flex-start;
118+
flex-direction: row;
119+
align-items: center;
120+
flex: 1;
121+
gap: 8px;
122+
align-self: stretch;
123+
box-sizing: border-box;
124+
`;
125+
126+
const LabelIcon = styled.img`
127+
width: 16px;
128+
height: 16px;
129+
`;
130+
131+
const ThisLabel = styled.span`
132+
color: rgba(212, 212, 212, 1);
133+
text-overflow: ellipsis;
134+
font-size: 18px;
135+
font-family: "Helvetica Neue", sans-serif;
136+
font-weight: 400;
137+
text-align: left;
138+
width: 197px;
139+
`;
140+
141+
const Description = styled.span`
142+
color: rgba(152, 152, 152, 1);
143+
text-overflow: ellipsis;
144+
font-size: 14px;
145+
font-family: "Helvetica Neue", sans-serif;
146+
font-weight: 400;
147+
text-align: left;
148+
align-self: stretch;
149+
`;

‎editor/components/recent-design-card/recent-design-card-list.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,5 @@ export function RecentDesignCardList() {
3939
const ListWrap = styled.div`
4040
display: flex;
4141
flex-direction: row;
42+
gap: 20px;
4243
`;

0 commit comments

Comments
 (0)