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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy