feat: add Database Connection Summary Card to Settings/Integrations/D… (#4791)

…atabase/Connection page

Closes #4558

<img width="542" alt="image"
src="https://github.com/twentyhq/twenty/assets/3098428/16d7d8ce-57db-4e48-ba72-a2318a2d34a4">

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+import { Card } from '@/ui/layout/card/components/Card';
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+
+type SettingsSummaryCardProps = {
+  title: ReactNode;
+  rightComponent: ReactNode;
+};
+
+const StyledCardContent = styled(CardContent)`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(2)};
+  min-height: ${({ theme }) => theme.spacing(6)};
+`;
+
+const StyledTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  gap: ${({ theme }) => theme.spacing(2)};
+  margin-right: auto;
+`;
+
+export const SettingsSummaryCard = ({
+  title,
+  rightComponent,
+}: SettingsSummaryCardProps) => (
+  <Card>
+    <StyledCardContent>
+      <StyledTitle>{title}</StyledTitle>
+      {rightComponent}
+    </StyledCardContent>
+  </Card>
+);