Skip to content

Commit d995bcd

Browse files
aslilacaslilac
committed
emotion: ResourceCard 
1 parent 01bdcd6 commit d995bcd

File tree

1 file changed

+81
-83
lines changed

1 file changed

+81
-83
lines changed

‎site/src/components/Resources/ResourceCard.tsx

Lines changed: 81 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,66 @@
1-
import { makeStyles } from "@mui/styles";
2-
import { FC, useState } from "react";
1+
import { type FC, useState } from "react";
2+
import IconButton from "@mui/material/IconButton";
3+
import Tooltip from "@mui/material/Tooltip";
4+
import { type CSSObject, type Interpolation, type Theme } from "@emotion/react";
35
import { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
6+
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
7+
import { CopyableValue } from "components/CopyableValue/CopyableValue";
48
import { Stack } from "../Stack/Stack";
59
import { ResourceAvatar } from "./ResourceAvatar";
610
import { SensitiveValue } from "./SensitiveValue";
7-
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
8-
import IconButton from "@mui/material/IconButton";
9-
import Tooltip from "@mui/material/Tooltip";
10-
import { CopyableValue } from "components/CopyableValue/CopyableValue";
11-
import { type Theme } from "@mui/material/styles";
11+
12+
const styles = {
13+
resourceCard: (theme) => ({
14+
background: theme.palette.background.paper,
15+
borderRadius: theme.shape.borderRadius,
16+
border: `1px solid ${theme.palette.divider}`,
17+
18+
"&:not(:first-of-type)": {
19+
borderTop: 0,
20+
borderTopLeftRadius: 0,
21+
borderTopRightRadius: 0,
22+
},
23+
24+
"&:not(:last-child)": {
25+
borderBottomLeftRadius: 0,
26+
borderBottomRightRadius: 0,
27+
},
28+
}),
29+
30+
resourceCardProfile: {
31+
flexShrink: 0,
32+
width: "fit-content",
33+
},
34+
35+
resourceCardHeader: (theme) => ({
36+
padding: theme.spacing(3, 4),
37+
borderBottom: `1px solid ${theme.palette.divider}`,
38+
39+
"&:last-child": {
40+
borderBottom: 0,
41+
},
42+
}),
43+
44+
metadata: (theme) => ({
45+
...(theme.typography.body2 as CSSObject),
46+
lineHeight: "120%",
47+
}),
48+
49+
metadataLabel: (theme) => ({
50+
fontSize: 12,
51+
color: theme.palette.text.secondary,
52+
textOverflow: "ellipsis",
53+
overflow: "hidden",
54+
whiteSpace: "nowrap",
55+
}),
56+
57+
metadataValue: (theme) => ({
58+
textOverflow: "ellipsis",
59+
overflow: "hidden",
60+
whiteSpace: "nowrap",
61+
...(theme.typography.body1 as CSSObject),
62+
}),
63+
} satisfies Record<string, Interpolation<Theme>>;
1264

1365
export interface ResourceCardProps {
1466
resource: WorkspaceResource;
@@ -30,44 +82,53 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
3082
metadataLength += 1;
3183
visibleMetadata.pop();
3284
}
33-
const styles = useStyles({ metadataLength });
3485

3586
return (
3687
<div key={resource.id} className={`${styles.resourceCard} resource-card`}>
3788
<Stack
3889
direction="row"
3990
alignItems="flex-start"
40-
className={styles.resourceCardHeader}
91+
css={styles.resourceCardHeader}
4192
spacing={10}
4293
>
4394
<Stack
4495
direction="row"
4596
alignItems="center"
46-
className={styles.resourceCardProfile}
97+
css={styles.resourceCardProfile}
4798
>
4899
<div>
49100
<ResourceAvatar resource={resource} />
50101
</div>
51-
<div className={styles.metadata}>
52-
<div className={styles.metadataLabel}>{resource.type}</div>
53-
<div className={styles.metadataValue}>{resource.name}</div>
102+
<div css={styles.metadata}>
103+
<div css={styles.metadataLabel}>{resource.type}</div>
104+
<div css={styles.metadataValue}>{resource.name}</div>
54105
</div>
55106
</Stack>
56107

57-
<div className={styles.metadataHeader}>
108+
<div
109+
css={(theme) => ({
110+
flexGrow: 2,
111+
display: "grid",
112+
gridTemplateColumns: `repeat(${
113+
metadataLength === 1 ? 1 : 4
114+
}, minmax(0, 1fr))`,
115+
gap: theme.spacing(5),
116+
rowGap: theme.spacing(3),
117+
})}
118+
>
58119
{resource.daily_cost > 0 && (
59-
<div className={styles.metadata}>
60-
<div className={styles.metadataLabel}>
120+
<div css={styles.metadata}>
121+
<div css={styles.metadataLabel}>
61122
<b>cost</b>
62123
</div>
63-
<div className={styles.metadataValue}>{resource.daily_cost}</div>
124+
<div css={styles.metadataValue}>{resource.daily_cost}</div>
64125
</div>
65126
)}
66127
{visibleMetadata.map((meta) => {
67128
return (
68-
<div className={styles.metadata} key={meta.key}>
69-
<div className={styles.metadataLabel}>{meta.key}</div>
70-
<div className={styles.metadataValue}>
129+
<div css={styles.metadata} key={meta.key}>
130+
<div css={styles.metadataLabel}>{meta.key}</div>
131+
<div css={styles.metadataValue}>
71132
{meta.sensitive ? (
72133
<SensitiveValue value={meta.value} />
73134
) : (
@@ -104,66 +165,3 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
104165
</div>
105166
);
106167
};
107-
108-
const useStyles = makeStyles<Theme, { metadataLength: number }>((theme) => ({
109-
resourceCard: {
110-
background: theme.palette.background.paper,
111-
borderRadius: theme.shape.borderRadius,
112-
border: `1px solid ${theme.palette.divider}`,
113-
114-
"&:not(:first-of-type)": {
115-
borderTop: 0,
116-
borderTopLeftRadius: 0,
117-
borderTopRightRadius: 0,
118-
},
119-
120-
"&:not(:last-child)": {
121-
borderBottomLeftRadius: 0,
122-
borderBottomRightRadius: 0,
123-
},
124-
},
125-
126-
resourceCardProfile: {
127-
flexShrink: 0,
128-
width: "fit-content",
129-
},
130-
131-
resourceCardHeader: {
132-
padding: theme.spacing(3, 4),
133-
borderBottom: `1px solid ${theme.palette.divider}`,
134-
135-
"&:last-child": {
136-
borderBottom: 0,
137-
},
138-
},
139-
140-
metadataHeader: (props) => ({
141-
flexGrow: 2,
142-
display: "grid",
143-
gridTemplateColumns: `repeat(${
144-
props.metadataLength === 1 ? 1 : 4
145-
}, minmax(0, 1fr))`,
146-
gap: theme.spacing(5),
147-
rowGap: theme.spacing(3),
148-
}),
149-
150-
metadata: {
151-
...theme.typography.body2,
152-
lineHeight: "120%",
153-
},
154-
155-
metadataLabel: {
156-
fontSize: 12,
157-
color: theme.palette.text.secondary,
158-
textOverflow: "ellipsis",
159-
overflow: "hidden",
160-
whiteSpace: "nowrap",
161-
},
162-
163-
metadataValue: {
164-
textOverflow: "ellipsis",
165-
overflow: "hidden",
166-
whiteSpace: "nowrap",
167-
...theme.typography.body1,
168-
},
169-
}));

0 commit comments

Comments
 (0)