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

Commit016b6b0

Browse files
committed
rewrite styles as Tailwind CSS
1 parent8ce0aec commit016b6b0

File tree

1 file changed

+26
-113
lines changed

1 file changed

+26
-113
lines changed

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

Lines changed: 26 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
importtype{Interpolation,Theme}from"@emotion/react";
21
importSkeletonfrom"@mui/material/Skeleton";
32
importtype{
43
Template,
@@ -142,26 +141,38 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
142141
}
143142
},[devcontainer]);
144143

144+
constappsClasses="flex flex-wrap gap-4 empty:hidden md:justify-start";
145+
145146
return(
146147
<Stack
147148
key={devcontainer.id}
148149
direction="column"
149150
spacing={0}
150-
css={styles.devcontainerRow}
151-
className="border border-border border-dashed rounded relative"
151+
className="relative py-4 border border-dashed border-border rounded"
152152
>
153153
<div
154-
css={styles.devContainerLabel}
155-
className="flex items-center gap-2 text-content-secondary"
154+
className="absolute -top-3 left-5
155+
flex items-center gap-2
156+
bg-surface-primary px-2 py-1
157+
text-xs text-content-secondary"
156158
>
157-
<Containercss={styles.devContainerIcon}size={12}/>
159+
<Containersize={12}className="mr-1.5"/>
158160
<span>dev container</span>
159161
</div>
160-
<headercss={styles.header}>
161-
<divcss={styles.agentInfo}>
162-
<divcss={styles.agentNameAndStatus}>
162+
<header
163+
className="flex items-center justify-between flex-wrap
164+
gap-6 px-4 pl-8 leading-6
165+
md:gap-4"
166+
>
167+
<divclassName="flex items-center gap-6 text-xs text-content-secondary">
168+
<divclassName="flex items-center gap-4 md:w-full">
163169
<SubAgentStatusagent={subAgent}/>
164-
<spancss={styles.agentName}>
170+
<span
171+
className="max-w-xs shrink-0
172+
overflow-hidden text-ellipsis whitespace-nowrap
173+
text-sm font-semibold text-content-primary
174+
md:overflow-visible"
175+
>
165176
{subAgent?.name??devcontainer.name}
166177
{!isRebuilding&&devcontainer.container&&(
167178
<spanclassName="text-content-tertiary">
@@ -221,7 +232,7 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
221232
</header>
222233

223234
{(showSubAgentApps||showSubAgentAppsPlaceholders)&&(
224-
<divcss={styles.content}>
235+
<divclassName="flex flex-col gap-8 px-8 pt-4">
225236
{subAgent&&
226237
workspace.latest_app_status?.agent_id===subAgent.id&&(
227238
<section>
@@ -231,7 +242,7 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
231242
)}
232243

233244
{showSubAgentApps&&(
234-
<sectioncss={styles.apps}>
245+
<sectionclassName={appsClasses}>
235246
<>
236247
{showVSCode&&(
237248
<VSCodeDevContainerButton
@@ -299,18 +310,18 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
299310
)}
300311

301312
{showSubAgentAppsPlaceholders&&(
302-
<sectioncss={styles.apps}>
313+
<sectionclassName={appsClasses}>
303314
<Skeleton
304315
width={80}
305316
height={32}
306317
variant="rectangular"
307-
css={styles.buttonSkeleton}
318+
className="rounded"
308319
/>
309320
<Skeleton
310321
width={110}
311322
height={32}
312323
variant="rectangular"
313-
css={styles.buttonSkeleton}
324+
className="rounded"
314325
/>
315326
</section>
316327
)}
@@ -319,101 +330,3 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
319330
</Stack>
320331
);
321332
};
322-
323-
conststyles={
324-
devContainerLabel:(theme)=>({
325-
backgroundColor:theme.palette.background.default,
326-
fontSize:12,
327-
lineHeight:1,
328-
padding:"4px 8px",
329-
position:"absolute",
330-
top:-11,
331-
left:20,
332-
}),
333-
devContainerIcon:{
334-
marginRight:5,
335-
},
336-
337-
devcontainerRow:{
338-
padding:"16px 0px",
339-
},
340-
341-
// Many of these styles are borrowed or mimic those from AgentRow.tsx.
342-
header:(theme)=>({
343-
padding:"0px 16px 0px 32px",
344-
display:"flex",
345-
gap:24,
346-
alignItems:"center",
347-
justifyContent:"space-between",
348-
flexWrap:"wrap",
349-
lineHeight:"1.5",
350-
351-
"&:has(+ [role='alert'])":{
352-
paddingBottom:16,
353-
},
354-
355-
[theme.breakpoints.down("md")]:{
356-
gap:16,
357-
},
358-
}),
359-
360-
agentInfo:(theme)=>({
361-
display:"flex",
362-
alignItems:"center",
363-
gap:24,
364-
color:theme.palette.text.secondary,
365-
fontSize:12,
366-
}),
367-
368-
content:{
369-
padding:"16px 32px 0px 32px",
370-
display:"flex",
371-
flexDirection:"column",
372-
gap:32,
373-
},
374-
375-
apps:(theme)=>({
376-
display:"flex",
377-
gap:16,
378-
flexWrap:"wrap",
379-
380-
"&:empty":{
381-
display:"none",
382-
},
383-
384-
[theme.breakpoints.down("md")]:{
385-
marginLeft:0,
386-
justifyContent:"flex-start",
387-
},
388-
}),
389-
390-
agentNameAndStatus:(theme)=>({
391-
display:"flex",
392-
alignItems:"center",
393-
gap:16,
394-
395-
[theme.breakpoints.down("md")]:{
396-
width:"100%",
397-
},
398-
}),
399-
400-
agentName:(theme)=>({
401-
whiteSpace:"nowrap",
402-
overflow:"hidden",
403-
textOverflow:"ellipsis",
404-
maxWidth:260,
405-
fontWeight:600,
406-
flexShrink:0,
407-
width:"fit-content",
408-
fontSize:14,
409-
color:theme.palette.text.primary,
410-
411-
[theme.breakpoints.down("md")]:{
412-
overflow:"unset",
413-
},
414-
}),
415-
416-
buttonSkeleton:{
417-
borderRadius:4,
418-
},
419-
}satisfiesRecord<string,Interpolation<Theme>>;

0 commit comments

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