feat: add remote object integration preview

Closes #4548

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationPreview.tsx

@@ -0,0 +1,77 @@
+import styled from '@emotion/styled';
+
+import { Card } from '@/ui/layout/card/components/Card';
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+
+import PreviewBackgroundImage from '../assets/preview-background.svg';
+import SyncImage from '../assets/sync.svg?react';
+
+type SettingsIntegrationPreviewProps = {
+  integrationLogoUrl: string;
+};
+
+const StyledCard = styled(Card)`
+  border: 0;
+`;
+
+const StyledCardContent = styled(CardContent)`
+  background-image: url(${PreviewBackgroundImage});
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: ${({ theme }) => theme.spacing(28)};
+`;
+
+const StyledLogosContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledIntegrationLogoContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: ${({ theme }) => theme.spacing(16)};
+  justify-content: center;
+  width: ${({ theme }) => theme.spacing(16)};
+`;
+
+const StyledIntegrationLogo = styled.img`
+  height: 100%;
+`;
+
+const StyledTwentyLogo = styled.img`
+  height: ${({ theme }) => theme.spacing(12)};
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledSyncImage = styled(SyncImage)`
+  width: ${({ theme }) => theme.spacing(31)};
+`;
+
+const StyledLabel = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  line-height: ${({ theme }) => theme.spacing(6)};
+`;
+
+export const SettingsIntegrationPreview = ({
+  integrationLogoUrl,
+}: SettingsIntegrationPreviewProps) => (
+  <StyledCard>
+    <StyledCardContent>
+      <StyledLogosContainer>
+        <StyledIntegrationLogoContainer>
+          <StyledIntegrationLogo alt="" src={integrationLogoUrl} />
+        </StyledIntegrationLogoContainer>
+        <StyledSyncImage />
+        <StyledTwentyLogo alt="" src="/images/integrations/twenty-logo.svg" />
+      </StyledLogosContainer>
+      <StyledLabel>Import your tables as remote objects</StyledLabel>
+    </StyledCardContent>
+  </StyledCard>
+);

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { SettingsIntegrationPreview } from '@/settings/integrations/components/SettingsIntegrationPreview';
 import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
 import { AppPath } from '@/types/AppPath';
 import { IconSettings } from '@/ui/display/icon';
@@ -46,6 +47,9 @@ export const SettingsIntegrationDetail = () => {
             { children: integration.text },
           ]}
         />
+        <SettingsIntegrationPreview
+          integrationLogoUrl={integration.from.image}
+        />
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );