Task 107 overview sources card #346
Conversation
| @@ -0,0 +1,5 @@ | |||
| export const KIND_COLORS = { | |||
| deployment: "#203548", | |||
| daemonSet: "#033869", | |||
There was a problem hiding this comment.
| daemonSet: "#033869", | |
| daemonset: "#033869", |
| @@ -0,0 +1,7 @@ | |||
| export const SOURCES_LOGOS = { | |||
There was a problem hiding this comment.
This is the logo of programming languages, not sources
| import SourceManagedCard from "./sources.manage.card"; | ||
|
|
||
| export function SourcesManagedList({ data = [1, 1, 1, 1] }) { | ||
| function renderDestinations() { |
|
|
||
| export function SourcesManagedList({ data = [1, 1, 1, 1] }) { | ||
| function renderDestinations() { | ||
| return data.map((source: any) => <SourceManagedCard />); |
There was a problem hiding this comment.
don't we need a react key prop for this list?
| } | ||
|
|
||
| return ( | ||
| <> |
| return ( | ||
| <> | ||
| <ManagedListWrapper> | ||
| {data?.length === 0 ? ( |
There was a problem hiding this comment.
id data is undefined this condition will be falsy and we will fallback to render the list which will throw
| import Empty from "@/assets/images/empty-list.svg"; | ||
| import SourceManagedCard from "./sources.manage.card"; | ||
|
|
||
| export function SourcesManagedList({ data = [1, 1, 1, 1] }) { |
There was a problem hiding this comment.
What is [1, 1, 1, 1]? Should we type it as ManagedSource[]?
| return ( | ||
| <CardWrapper> | ||
| <KeyvalImage | ||
| src={SOURCES_LOGOS[item?.languages[0].language || ""]} |
There was a problem hiding this comment.
Do we want to always show the first one? what if there are many?
| </KeyvalText> | ||
| <KeyvalTag | ||
| title={item?.kind || ""} | ||
| color={KIND_COLORS[item?.kind.toLowerCase() || DEPLOYMENT]} |
There was a problem hiding this comment.
if kind is undefined, this will throw.
You can also optional chining the kind:
item?.kind?.toLowerCase()
| const TEXT_STYLE: React.CSSProperties = { | ||
| textOverflow: "ellipsis", | ||
| whiteSpace: "nowrap", | ||
| overflow: "hidden", | ||
| width: 224, | ||
| textAlign: "center", | ||
| }; | ||
| const LOGO_STYLE: React.CSSProperties = { | ||
| padding: 4, | ||
| backgroundColor: theme.colors.white, | ||
| }; |
There was a problem hiding this comment.
Can we use styled components instead?
| <KeyvalTag title={item.kind} color={KIND_COLORS[item.kind]} /> | ||
| <KeyvalTag | ||
| title={item.kind} | ||
| color={KIND_COLORS[item.kind].toLowerCase()} |
There was a problem hiding this comment.
Current implementation will lower case the color ("#203548".toLowerCase()) and not the kind.
| color={KIND_COLORS[item.kind].toLowerCase()} | |
| color={KIND_COLORS[item.kind.toLowerCase()]} |
No description provided.