Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 0da7fe4

Browse files
jaaydenhjaaydenh
committed
feat: styling and add template creation options
1 parent 77cfb7c commit 0da7fe4

File tree

2 files changed

+128
-66
lines changed

2 files changed

+128
-66
lines changed

‎site/src/pages/CreateTemplatesGalleryPage/CreateTemplatesPageView.tsx

Lines changed: 125 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,171 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2+
import Card from "@mui/material/Card";
3+
import CardActionArea from "@mui/material/CardActionArea";
4+
import CardContent from "@mui/material/CardContent";
5+
import Stack from "@mui/material/Stack";
26
import { useState, type FC } from "react";
3-
import { useQuery } from "react-query";
4-
import { Link, useSearchParams } from "react-router-dom";
5-
import { templateExamples } from "api/queries/templates";
6-
import type { Organization, TemplateExample } from "api/typesGenerated";
7+
import { Link as RouterLink } from "react-router-dom";
8+
import type { Organization } from "api/typesGenerated";
79
import { ErrorAlert } from "components/Alert/ErrorAlert";
10+
import { ExternalImage } from "components/ExternalImage/ExternalImage";
811
import { Loader } from "components/Loader/Loader";
912
import { Margins } from "components/Margins/Margins";
1013
import { OrganizationAutocomplete } from "components/OrganizationAutocomplete/OrganizationAutocomplete";
1114
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
12-
import { Stack } from "components/Stack/Stack";
13-
import { useDashboard } from "modules/dashboard/useDashboard";
14-
import { TemplateExampleCard } from "modules/templates/TemplateExampleCard/TemplateExampleCard";
15-
import {
16-
getTemplatesByTag,
17-
type StarterTemplatesByTag,
18-
} from "utils/starterTemplates";
15+
// import { useDashboard } from "modules/dashboard/useDashboard";
16+
import type { StarterTemplatesByTag } from "utils/starterTemplates";
1917
import { StarterTemplates } from "./StarterTemplates";
2018

21-
// const getTagLabel = (tag: string) => {
22-
// const labelByTag: Record<string, string> = {
23-
// all: "All templates",
24-
// digitalocean: "DigitalOcean",
25-
// aws: "AWS",
26-
// google: "Google Cloud",
27-
// };
28-
// // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- this can be undefined
29-
// return labelByTag[tag] ?? tag;
30-
// };
31-
32-
// const selectTags = (starterTemplatesByTag: StarterTemplatesByTag) => {
33-
// return starterTemplatesByTag
34-
// ? Object.keys(starterTemplatesByTag).sort((a, b) => a.localeCompare(b))
35-
// : undefined;
36-
// };
37-
3819
export interface CreateTemplatePageViewProps {
3920
starterTemplatesByTag?: StarterTemplatesByTag;
4021
error?: unknown;
4122
}
4223

43-
// const removeScratchExample = (data: TemplateExample[]) => {
44-
// return data.filter((example) => example.id !== "scratch");
45-
// };
46-
4724
export const CreateTemplatesPageView: FC<CreateTemplatePageViewProps> = ({
4825
starterTemplatesByTag,
4926
error,
5027
}) => {
5128
const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null);
5229
// const { organizationId } = useDashboard();
53-
// const templateExamplesQuery = useQuery(templateExamples(organizationId));
54-
// const starterTemplatesByTag = templateExamplesQuery.data
55-
// ? // Currently, the scratch template should not be displayed on the starter templates page.
56-
// getTemplatesByTag(removeScratchExample(templateExamplesQuery.data))
57-
// : undefined;
30+
// TODO: if there is only 1 organization, set the dropdown to the default organizationId
5831

5932
return (
6033
<Margins>
6134
<PageHeader>
6235
<PageHeaderTitle>Create a Template</PageHeaderTitle>
6336
</PageHeader>
37+
<Stack spacing={8}>
38+
<Stack direction="row" spacing={7}>
39+
<h2 css={styles.sectionTitle}>Choose an Organization</h2>
40+
<OrganizationAutocomplete
41+
css={styles.autoComplete}
42+
value={selectedOrg}
43+
onChange={(newValue) => {
44+
setSelectedOrg(newValue);
45+
}}
46+
/>
47+
</Stack>
6448

65-
<OrganizationAutocomplete
66-
css={styles.autoComplete}
67-
value={selectedOrg}
68-
onChange={(newValue) => {
69-
setSelectedOrg(newValue);
70-
}}
71-
/>
49+
<Stack direction="row" spacing={7}>
50+
<h2 css={styles.sectionTitle}>Choose a starting point</h2>
51+
<div
52+
css={{
53+
display: "flex",
54+
flexWrap: "wrap",
55+
gap: 32,
56+
height: "max-content",
57+
}}
58+
>
59+
<Card variant="outlined" sx={{ width: 320 }}>
60+
<CardActionArea
61+
component={RouterLink}
62+
to="../templates/new?exampleId=scratch"
63+
sx={{ height: 115, padding: 1 }}
64+
>
65+
<CardContent>
66+
<Stack
67+
direction="row"
68+
spacing={3}
69+
css={{ alignItems: "center" }}
70+
>
71+
<div css={styles.icon}>
72+
<ExternalImage
73+
src="/emojis/1f4c4.png"
74+
css={{
75+
width: "100%",
76+
height: "100%",
77+
}}
78+
/>
79+
</div>
80+
<div>
81+
<h4 css={styles.cardTitle}>Scratch Template</h4>
82+
<span css={styles.cardDescription}>
83+
Create a minimal starter template that you can customize
84+
</span>
85+
</div>
86+
</Stack>
87+
</CardContent>
88+
</CardActionArea>
89+
</Card>
90+
<Card variant="outlined" sx={{ width: 320 }}>
91+
<CardActionArea
92+
component={RouterLink}
93+
to="../templates/new"
94+
sx={{ height: 115, padding: 1 }}
95+
>
96+
<CardContent>
97+
<Stack
98+
direction="row"
99+
spacing={3}
100+
css={{ alignItems: "center" }}
101+
>
102+
<div css={styles.icon}>
103+
<ExternalImage
104+
src="/emojis/1f4e1.png"
105+
css={{
106+
width: "100%",
107+
height: "100%",
108+
}}
109+
/>
110+
</div>
111+
<div>
112+
<h4 css={styles.cardTitle}>Upload Template</h4>
113+
<span css={styles.cardDescription}>
114+
Get started by uploading an existing template
115+
</span>
116+
</div>
117+
</Stack>
118+
</CardContent>
119+
</CardActionArea>
120+
</Card>
121+
</div>
122+
</Stack>
72123

73-
{Boolean(error) && <ErrorAlert error={error} />}
124+
{Boolean(error) && <ErrorAlert error={error} />}
74125

75-
{Boolean(!starterTemplatesByTag) && <Loader />}
126+
{Boolean(!starterTemplatesByTag) && <Loader />}
76127

77-
<StarterTemplates starterTemplatesByTag={starterTemplatesByTag} />
128+
<StarterTemplates starterTemplatesByTag={starterTemplatesByTag} />
129+
</Stack>
78130
</Margins>
79131
);
80132
};
81133

82134
const styles = {
83135
autoComplete: {
84-
width: 300,
136+
width: 415,
85137
},
86138

87-
filterCaption: (theme) => ({
88-
textTransform: "uppercase",
89-
fontWeight: 600,
90-
fontSize: 12,
91-
color: theme.palette.text.secondary,
92-
letterSpacing: "0.1em",
139+
sectionTitle: (theme) => ({
140+
color: theme.palette.text.primary,
141+
fontSize: 16,
142+
fontWeight: 400,
143+
margin: 0,
93144
}),
94145

95-
tagLink: (theme) => ({
96-
color: theme.palette.text.secondary,
97-
textDecoration: "none",
146+
cardTitle: (theme) => ({
98147
fontSize: 14,
99-
textTransform: "capitalize",
148+
fontWeight: 600,
149+
margin: 0,
150+
marginBottom: 4,
151+
}),
100152

101-
"&:hover": {
102-
color: theme.palette.text.primary,
103-
},
153+
cardDescription: (theme) => ({
154+
fontSize: 13,
155+
color: theme.palette.text.secondary,
156+
lineHeight: "1.6",
157+
display: "block",
104158
}),
105159

106-
tagLinkActive: (theme) => ({
107-
color: theme.palette.text.primary,
108-
fontWeight: 600,
160+
icon: {
161+
flexShrink: 0,
162+
width: 32,
163+
height: 32,
164+
},
165+
166+
menuItemIcon: (theme) => ({
167+
color: theme.palette.text.secondary,
168+
width: 20,
169+
height: 20,
109170
}),
110171
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/pages/CreateTemplatesGalleryPage/StarterTemplates.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const StarterTemplates: FC<StarterTemplatesProps> = ({
4141
return (
4242
<Stack direction="row" spacing={4} alignItems="flex-start">
4343
{starterTemplatesByTag && tags && (
44-
<Stack css={{ width: 208, flexShrink: 0, position: "sticky", top: 48 }}>
44+
<Stack css={{ width: 202, flexShrink: 0, position: "sticky" }}>
4545
<h2 css={styles.sectionTitle}>Choose a starter template</h2>
4646
<span css={styles.filterCaption}>Filter</span>
4747
{tags.map((tag) => (
@@ -106,8 +106,9 @@ const styles = {
106106
}),
107107

108108
sectionTitle: (theme) => ({
109+
color: theme.palette.text.primary,
109110
fontSize: 16,
110-
fontWeight: 500,
111+
fontWeight: 400,
111112
margin: 0,
112113
}),
113114
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)