Skip to content

Commit db61095

Browse files
brettkolodnybrettkolodny
committed
chore: convert AgentMetadata to tailwind
1 parent 252793c commit db61095

File tree

1 file changed

+16
-79
lines changed

1 file changed

+16
-79
lines changed

‎site/src/modules/resources/AgentMetadata.tsx

Lines changed: 16 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import type { Interpolation, Theme } from "@emotion/react";
21
import Skeleton from "@mui/material/Skeleton";
32
import Tooltip from "@mui/material/Tooltip";
43
import { watchAgentMetadata } from "api/api";
@@ -18,8 +17,8 @@ import {
1817
useRef,
1918
useState,
2019
} from "react";
21-
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
2220
import type { OneWayWebSocket } from "utils/OneWayWebSocket";
21+
import { cn } from "utils/cn";
2322

2423
type ItemStatus = "stale" | "valid" | "loading";
2524

@@ -32,7 +31,7 @@ export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
3231
return null;
3332
}
3433
return (
35-
<section css={styles.root}>
34+
<section className="flex items-baseline flex-wrap gap-8 gap-y-4">
3635
{metadata.map((m) => (
3736
<MetadataItem key={m.description.key} item={m} />
3837
))}
@@ -122,7 +121,7 @@ export const AgentMetadata: FC<AgentMetadataProps> = ({
122121

123122
if (activeMetadata === undefined) {
124123
return (
125-
<section css={styles.root}>
124+
<section className="flex items-baseline flex-wrap gap-8 gap-y-4">
126125
<AgentMetadataSkeleton />
127126
</section>
128127
);
@@ -134,17 +133,17 @@ export const AgentMetadata: FC<AgentMetadataProps> = ({
134133
const AgentMetadataSkeleton: FC = () => {
135134
return (
136135
<Stack alignItems="baseline" direction="row" spacing={6}>
137-
<div css={styles.metadata}>
136+
<div className="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
138137
<Skeleton width={40} height={12} variant="text" />
139138
<Skeleton width={65} height={14} variant="text" />
140139
</div>
141140

142-
<div css={styles.metadata}>
141+
<div className="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
143142
<Skeleton width={40} height={12} variant="text" />
144143
<Skeleton width={65} height={14} variant="text" />
145144
</div>
146145

147-
<div css={styles.metadata}>
146+
<div className="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
148147
<Skeleton width={40} height={12} variant="text" />
149148
<Skeleton width={65} height={14} variant="text" />
150149
</div>
@@ -182,29 +181,29 @@ const MetadataItem: FC<MetadataItemProps> = ({ item }) => {
182181
// could be buggy. But, how common is that anyways?
183182
const value =
184183
status === "loading" ? (
185-
<Skeleton width={65} height={12} variant="text" css={styles.skeleton} />
184+
<Skeleton width={65} height={12} variant="text" className="mt-[6px]" />
186185
) : status === "stale" ? (
187186
<Tooltip title="This data is stale and no longer up to date">
188-
<StaticWidth css={[styles.metadataValue, styles.metadataStale]}>
187+
<StaticWidth className="text-ellipsis overflow-hidden whitespace-nowrap max-w-64 text-sm text-content-disabled cursor-pointer">
189188
{item.result.value}
190189
</StaticWidth>
191190
</Tooltip>
192191
) : (
193192
<StaticWidth
194-
css={[
195-
styles.metadataValue,
196-
item.result.error.length === 0
197-
? styles.metadataValueSuccess
198-
: styles.metadataValueError,
199-
]}
193+
className={cn(
194+
"text-ellipsis overflow-hidden whitespace-nowrap max-w-64 text-sm text-content-success",
195+
item.result.error.length > 0 && "text-content-destructive",
196+
)}
200197
>
201198
{item.result.value}
202199
</StaticWidth>
203200
);
204201

205202
return (
206-
<div css={styles.metadata}>
207-
<div css={styles.metadataLabel}>{item.description.display_name}</div>
203+
<div className="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
204+
<div className="text-content-secondary text-ellipsis overflow-hidden whitespace-nowrap text-[13px]">
205+
{item.description.display_name}
206+
</div>
208207
<div>{value}</div>
209208
</div>
210209
);
@@ -236,65 +235,3 @@ const StaticWidth: FC<HTMLAttributes<HTMLDivElement>> = ({
236235
</div>
237236
);
238237
};
239-
240-
// These are more or less copied from
241-
// site/src/modules/resources/ResourceCard.tsx
242-
const styles = {
243-
root: {
244-
display: "flex",
245-
alignItems: "baseline",
246-
flexWrap: "wrap",
247-
gap: 32,
248-
rowGap: 16,
249-
},
250-
251-
metadata: {
252-
lineHeight: "1.6",
253-
display: "flex",
254-
flexDirection: "column",
255-
overflow: "visible",
256-
flexShrink: 0,
257-
},
258-
259-
metadataLabel: (theme) => ({
260-
color: theme.palette.text.secondary,
261-
textOverflow: "ellipsis",
262-
overflow: "hidden",
263-
whiteSpace: "nowrap",
264-
fontSize: 13,
265-
}),
266-
267-
metadataValue: {
268-
textOverflow: "ellipsis",
269-
overflow: "hidden",
270-
whiteSpace: "nowrap",
271-
maxWidth: "16em",
272-
fontSize: 14,
273-
},
274-
275-
metadataValueSuccess: (theme) => ({
276-
color: theme.roles.success.fill.outline,
277-
}),
278-
279-
metadataValueError: (theme) => ({
280-
color: theme.palette.error.main,
281-
}),
282-
283-
metadataStale: (theme) => ({
284-
color: theme.palette.text.disabled,
285-
cursor: "pointer",
286-
}),
287-
288-
skeleton: {
289-
marginTop: 4,
290-
},
291-
292-
inlineCommand: (theme) => ({
293-
fontFamily: MONOSPACE_FONT_FAMILY,
294-
display: "inline-block",
295-
fontWeight: 600,
296-
margin: 0,
297-
borderRadius: 4,
298-
color: theme.palette.text.primary,
299-
}),
300-
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)