import section component was added

packages/client/src/pages/PortalSettings/categories/data-import/sub-components/importSection.js

@@ -0,0 +1,118 @@
+import React from "react";
+import Text from "@docspace/components/text";
+import ToggleButton from "@docspace/components/toggle-button";
+import styled from "styled-components";
+import ArrowSvg from "PUBLIC_DIR/images/arrow2.react.svg?url";
+
+const SectionWrapper = styled.div`
+  width: 700px;
+  padding: 12px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-start;
+
+  border-radius: 6px;
+  background: #f8f9f9;
+
+  .toggleButton {
+    position: relative;
+    margin-top: 0.5px;
+  }
+
+  .description {
+    margin-top: 4px;
+    margin-bottom: 12px;
+    color: #333;
+  }
+`;
+
+const FlexContainer = styled.div`
+  display: flex;
+`;
+
+const ImportItemWrapper = styled.div`
+  padding-top: 8px;
+
+  .importSection {
+    width: 160px;
+    height: 36px;
+    padding: 8px 12px;
+    box-sizing: border-box;
+    margin-top: 12px;
+
+    border-radius: 3px;
+    background: #eceef1;
+
+    color: #555f65;
+    font-weight: 600;
+    line-height: 20px;
+
+    display: flex;
+    align-items: center;
+
+    gap: 8px;
+  }
+`;
+
+const ArrowWrapper = styled.div`
+  margin: 32px 12px 0;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+`;
+
+const ImportItem = ({ sectionName, sectionIcon, workspace }) => {
+  return (
+    <ImportItemWrapper>
+      <Text color="#A3A9AE" fontSize="11px" fontWeight={600} lineHeight="12px">
+        {workspace}
+      </Text>
+      <div className="importSection">
+        {sectionIcon && (
+          <img src={sectionIcon} alt={sectionName + " icon"} className="sectionIcon" />
+        )}
+        {sectionName}
+      </div>
+    </ImportItemWrapper>
+  );
+};
+
+const ImportSection = ({
+  isDisabled,
+  isChecked,
+  onChange,
+  sectionName,
+  description,
+  exportSection,
+  importSection,
+}) => {
+  return (
+    <SectionWrapper>
+      <ToggleButton
+        isChecked={isChecked}
+        onChange={onChange}
+        className="toggleButton"
+        isDisabled={isDisabled}
+      />
+      <div>
+        <Text lineHeight="20px" fontWeight={600}>
+          {sectionName}
+        </Text>
+        <Text fontSize="12px" className="description">
+          {description}
+        </Text>
+        <FlexContainer>
+          <ImportItem {...exportSection} />
+          <ArrowWrapper>
+            <img src={ArrowSvg} alt="arrow" />
+          </ArrowWrapper>
+          <ImportItem {...importSection} />
+        </FlexContainer>
+      </div>
+    </SectionWrapper>
+  );
+};
+
+export default ImportSection;

public/images/arrow2.react.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7071 5.29004C13.0976 5.68056 13.0976 6.31373 12.7071 6.70425L7.70711 11.7043L6.29289 10.29L9.58579 6.99715L-2.93177e-07 6.99715L-2.05754e-07 4.99715L9.58579 4.99715L6.29289 1.70425L7.70711 0.290039L12.7071 5.29004Z" fill="#A3A9AE"/>
+</svg>