Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitaaeddf6

Browse files
committed
feat: add TemplateCard component
1 parent33a3bbb commitaaeddf6

File tree

3 files changed

+149
-15
lines changed

3 files changed

+149
-15
lines changed
Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
importtype{Interpolation,Theme}from"@emotion/react";
2+
importArrowForwardOutlinedfrom"@mui/icons-material/ArrowForwardOutlined";
3+
importButtonfrom"@mui/material/Button";
4+
importtype{FC,HTMLAttributes}from"react";
5+
import{LinkasRouterLink}from"react-router-dom";
6+
importtype{Template}from"api/typesGenerated";
7+
import{ExternalAvatar}from"components/Avatar/Avatar";
8+
import{AvatarData}from"components/AvatarData/AvatarData";
9+
import{DeprecatedBadge}from"components/Badges/Badges";
10+
11+
typeTemplateCardProps=HTMLAttributes<HTMLDivElement>&{
12+
template:Template;
13+
};
14+
15+
exportconstTemplateCard:FC<TemplateCardProps>=({
16+
template,
17+
...divProps
18+
})=>{
19+
consthasIcon=template.icon&&template.icon!=="";
20+
21+
return(
22+
<divcss={styles.card}{...divProps}>
23+
<divcss={styles.header}>
24+
<div>
25+
<AvatarData
26+
title={
27+
template.display_name.length>0
28+
?template.display_name
29+
:template.name
30+
}
31+
subtitle={template.organization_name}
32+
avatar={
33+
hasIcon&&(
34+
<ExternalAvatarvariant="square"fitImagesrc={template.icon}/>
35+
)
36+
}
37+
/>
38+
</div>
39+
<div>
40+
{template.active_user_count}{template.active_user_count===1 ?"user" :"users"}
41+
</div>
42+
</div>
43+
44+
<div>
45+
<spancss={styles.description}>
46+
<p>{template.description}</p>
47+
</span>
48+
</div>
49+
50+
<divcss={styles.useButtonContainer}>
51+
{template.deprecated ?(
52+
<DeprecatedBadge/>
53+
) :(
54+
<Button
55+
component={RouterLink}
56+
css={styles.actionButton}
57+
className="actionButton"
58+
fullWidth
59+
startIcon={<ArrowForwardOutlined/>}
60+
title={`Create a workspace using the${template.display_name} template`}
61+
to={`/templates/${template.name}/workspace`}
62+
>
63+
Create Workspace
64+
</Button>
65+
)}
66+
</div>
67+
</div>
68+
);
69+
};
70+
71+
conststyles={
72+
card:(theme)=>({
73+
width:"320px",
74+
padding:24,
75+
borderRadius:6,
76+
border:`1px solid${theme.palette.divider}`,
77+
textAlign:"left",
78+
color:"inherit",
79+
display:"flex",
80+
flexDirection:"column",
81+
}),
82+
83+
header:{
84+
display:"flex",
85+
alignItems:"center",
86+
justifyContent:"space-between",
87+
marginBottom:24,
88+
},
89+
90+
icon:{
91+
flexShrink:0,
92+
paddingTop:4,
93+
width:32,
94+
height:32,
95+
},
96+
97+
tags:{
98+
display:"flex",
99+
flexWrap:"wrap",
100+
gap:8,
101+
justifyContent:"end",
102+
},
103+
104+
tag:(theme)=>({
105+
borderColor:theme.palette.divider,
106+
textDecoration:"none",
107+
cursor:"pointer",
108+
"&: hover":{
109+
borderColor:theme.palette.primary.main,
110+
},
111+
}),
112+
113+
activeTag:(theme)=>({
114+
borderColor:theme.roles.active.outline,
115+
backgroundColor:theme.roles.active.background,
116+
}),
117+
118+
description:(theme)=>({
119+
fontSize:13,
120+
color:theme.palette.text.secondary,
121+
lineHeight:"1.6",
122+
display:"block",
123+
}),
124+
125+
useButtonContainer:{
126+
display:"flex",
127+
gap:12,
128+
flexDirection:"column",
129+
paddingTop:24,
130+
marginTop:"auto",
131+
alignItems:"center",
132+
},
133+
134+
actionButton:(theme)=>({
135+
transition:"none",
136+
color:theme.palette.text.secondary,
137+
"&:hover":{
138+
borderColor:theme.palette.text.primary,
139+
},
140+
}),
141+
}satisfiesRecord<string,Interpolation<Theme>>;

‎site/src/pages/TemplatesPage/TemplatesPage.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ export const TemplatesPage: FC = () => {
2222
consterror=templatesQuery.error||examplesQuery.error||organizationsQuery.error;
2323
constmultiOrgExperimentEnabled=experiments.includes("multi-organization");
2424

25-
console.log({ multiOrgExperimentEnabled})
2625
return(
2726
<>
2827
<Helmet>

‎site/src/pages/TemplatesPage/TemplatesPageViewV2.tsx

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,12 @@ import {
2121
}from"components/PageHeader/PageHeader";
2222
import{Stack}from"components/Stack/Stack";
2323
// import { createDayString } from "utils/createDayString";
24+
import{TemplateCard}from"modules/templates/TemplateCard/TemplateCard";
2425
import{docs}from"utils/docs";
25-
import{
26-
formatTemplateBuildTime,
27-
formatTemplateActiveDevelopers,
28-
}from"utils/templates";
2926
import{CreateTemplateButton}from"./CreateTemplateButton";
3027
import{EmptyTemplates}from"./EmptyTemplates";
3128

3229
exportconstLanguage={
33-
developerCount:(activeCount:number):string=>{
34-
return`${formatTemplateActiveDevelopers(activeCount)} developer${
35-
activeCount!==1 ?"s" :""
36-
}`;
37-
},
38-
nameLabel:"Name",
39-
buildTimeLabel:"Build time",
40-
usedByLabel:"Used by",
41-
lastUpdatedLabel:"Last updated",
4230
templateTooltipTitle:"What is template?",
4331
templateTooltipText:
4432
"With templates you can create a common configuration for your workspaces using Terraform.",
@@ -143,7 +131,13 @@ export const TemplatesPageViewV2: FC<TemplatesPageViewProps> = ({
143131
/>
144132
) :(templates&&
145133
templates.map((template)=>(
146-
<pkey={template.id}>{template.name}</p>
134+
<TemplateCard
135+
css={(theme)=>({
136+
backgroundColor:theme.palette.background.paper,
137+
})}
138+
template={template}
139+
key={template.id}
140+
/>
147141
)))}
148142
</div>
149143
</Stack>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp