feat: add Tables settings to Settings/Integrations/Database/Connectio… (#4851)

…n page

Closes #4560
This commit is contained in:
Thaïs
2024-04-05 18:12:54 +02:00
committed by GitHub
parent f4017119ab
commit bbdb926687
5 changed files with 112 additions and 31 deletions

View File

@ -42,7 +42,7 @@ type SettingsListCardProps<ListItem extends { id: string }> = {
hasFooter?: boolean;
isLoading?: boolean;
onRowClick?: (item: ListItem) => void;
RowIcon: IconComponent;
RowIcon?: IconComponent;
RowRightComponent: ComponentType<{ item: ListItem }>;
footerButtonLabel?: string;
onFooterButtonClick?: () => void;

View File

@ -14,16 +14,17 @@ const StyledRow = styled(CardContent)`
gap: ${({ theme }) => theme.spacing(2)};
padding: ${({ theme }) => theme.spacing(2)};
padding-left: ${({ theme }) => theme.spacing(3)};
min-height: ${({ theme }) => theme.spacing(6)};
`;
const StyledAccountHandle = styled.span`
const StyledLabel = styled.span`
flex: 1 0 auto;
`;
type SettingsListItemCardContentProps = {
label: string;
divider?: boolean;
LeftIcon: IconComponent;
LeftIcon?: IconComponent;
onClick?: () => void;
rightComponent: ReactNode;
};
@ -39,8 +40,8 @@ export const SettingsListItemCardContent = ({
return (
<StyledRow onClick={onClick} divider={divider}>
<LeftIcon size={theme.icon.size.md} />
<StyledAccountHandle>{label}</StyledAccountHandle>
{!!LeftIcon && <LeftIcon size={theme.icon.size.md} />}
<StyledLabel>{label}</StyledLabel>
{rightComponent}
</StyledRow>
);