@@ -8,6 +8,15 @@ import { CardRadius, MONOSPACE_FONT_FAMILY } from "../../theme/constants"
88import { combineClasses } from "../../util/combineClasses"
99import { getDisplayStatus } from "../../util/workspace"
1010
11+ const Language = {
12+ templateLabel :"Template" ,
13+ statusLabel :"Status" ,
14+ versionLabel :"Version" ,
15+ lastBuiltLabel :"Last Built" ,
16+ outdated :"Outdated" ,
17+ upToDate :"Up to date" ,
18+ }
19+
1120export interface WorkspaceStatsProps {
1221workspace :Workspace
1322}
@@ -20,7 +29,7 @@ export const WorkspaceStats: React.FC<WorkspaceStatsProps> = ({ workspace }) =>
2029return (
2130< div className = { styles . stats } >
2231< div className = { styles . statItem } >
23- < span className = { styles . statsLabel } > Workspace </ span >
32+ < span className = { styles . statsLabel } > { Language . templateLabel } </ span >
2433< Link
2534component = { RouterLink }
2635to = { `/templates/${ workspace . template_name } }
@@ -31,7 +40,7 @@ export const WorkspaceStats: React.FC<WorkspaceStatsProps> = ({ workspace }) =>
3140</ div >
3241< div className = { styles . statsDivider } />
3342< div className = { styles . statItem } >
34- < span className = { styles . statsLabel } > Status </ span >
43+ < span className = { styles . statsLabel } > { Language . statusLabel } </ span >
3544< span className = { styles . statsValue } >
3645< span style = { { color :status . color } } role = "status" >
3746{ status . status }
@@ -40,18 +49,18 @@ export const WorkspaceStats: React.FC<WorkspaceStatsProps> = ({ workspace }) =>
4049</ div >
4150< div className = { styles . statsDivider } />
4251< div className = { styles . statItem } >
43- < span className = { styles . statsLabel } > Version </ span >
52+ < span className = { styles . statsLabel } > { Language . versionLabel } </ span >
4453< span className = { styles . statsValue } >
4554{ workspace . outdated ?(
46- < span style = { { color :theme . palette . error . main } } > Outdated </ span >
55+ < span style = { { color :theme . palette . error . main } } > { Language . outdated } </ span >
4756) :(
48- < span style = { { color :theme . palette . text . secondary } } > Up to date </ span >
57+ < span style = { { color :theme . palette . text . secondary } } > { Language . upToDate } </ span >
4958) }
5059</ span >
5160</ div >
5261< div className = { styles . statsDivider } />
5362< div className = { styles . statItem } >
54- < span className = { styles . statsLabel } > Last built </ span >
63+ < span className = { styles . statsLabel } > { Language . lastBuiltLabel } </ span >
5564< span className = { styles . statsValue } data-chromatic = "ignore" >
5665{ dayjs ( ) . to ( dayjs ( workspace . latest_build . created_at ) ) }
5766</ span >