chore: refactor template insight page conditionals #21331
Conversation
6398427 to
665de65
Compare
665de65 to
3934031
Compare
aslilac
left a comment
There was a problem hiding this comment.
so I think I'm noticing a pattern on this page. there are a ton of components that all have the same "chrome" around them, and it seems to be duplicated across components.
we also want to be able to put various content within that chrome depending on states like loading, errors, etc.
it feels to me like we should just make that chrome a component that takes children and then rather than all of this duplication and manual ifs to try to reuse the jsx, we could just actually have it be reusable
| css={{ | ||
| display: "flex", | ||
| justifyContent: "space-between", | ||
| alignItems: "center", | ||
| fontSize: 14, | ||
| paddingTop: 8, | ||
| paddingBottom: 8, | ||
| }} |
There was a problem hiding this comment.
I know these aren't exactly new but I'm gonna bully you into converting these to tailwind (pls and thank you)
| css={{ | |
| display: "flex", | |
| justifyContent: "space-between", | |
| alignItems: "center", | |
| fontSize: 14, | |
| paddingTop: 8, | |
| paddingBottom: 8, | |
| }} | |
| className="flex justify-between items-center text-sm py-2" |
|
|
||
| let content: JSX.Element | JSX.Element[]; | ||
| if (!error && !users) { | ||
| content = <Loader css={{ height: "100%" }} />; |
There was a problem hiding this comment.
| content = <Loader css={{ height: "100%" }} />; | |
| content = <Loader className="h-full" />; |
same here
| paddingBottom: 8, | ||
| }} | ||
| > | ||
| <div css={{ display: "flex", alignItems: "center", gap: 12 }}> |
There was a problem hiding this comment.
| <div css={{ display: "flex", alignItems: "center", gap: 12 }}> | |
| <div className="flex items-center gap-3"> |
| > | ||
| <div css={{ display: "flex", alignItems: "center", gap: 12 }}> | ||
| <Avatar fallback={row.username} src={row.avatar_url} /> | ||
| <div css={{ fontWeight: 500 }}>{row.username}</div> |
There was a problem hiding this comment.
same here (I don't remember this one off the top of my head)
| content = <NoDataAvailable error={error} />; | ||
| } | ||
| return ( | ||
| <Panel {...panelProps} css={{ overflowY: "auto" }}> |
| css={{ | ||
| display: "flex", | ||
| justifyContent: "space-between", | ||
| alignItems: "center", | ||
| fontSize: 14, | ||
| paddingTop: 8, | ||
| paddingBottom: 8, | ||
| }} |
There was a problem hiding this comment.
| css={{ | |
| display: "flex", | |
| justifyContent: "space-between", | |
| alignItems: "center", | |
| fontSize: 14, | |
| paddingTop: 8, | |
| paddingBottom: 8, | |
| }} | |
| className="flex justify-between items-center text-sm py-2" |
| paddingBottom: 8, | ||
| }} | ||
| > | ||
| <div css={{ display: "flex", alignItems: "center", gap: 12 }}> |
There was a problem hiding this comment.
| <div css={{ display: "flex", alignItems: "center", gap: 12 }}> | |
| <div className="flex items-center gap-3"> |
| > | ||
| <div css={{ display: "flex", alignItems: "center", gap: 12 }}> | ||
| <Avatar fallback={row.username} src={row.avatar_url} /> | ||
| <div css={{ fontWeight: 500 }}>{row.username}</div> |
| css={{ | ||
| color: theme.palette.text.secondary, | ||
| fontSize: 13, | ||
| textAlign: "right", | ||
| }} |
No description provided.