Settings Option Card component (#8456)

fixes - #8195 --------- Co-authored-by: Charles Bochet <charles@twenty.com>
2024-11-18 14:52:33 +05:30
parent ade1c57ff4
commit 2f5dc26545
56 changed files with 931 additions and 920 deletions
@@ -0,0 +1,68 @@
+import { useExpandedAnimation } from '@/settings/hooks/useExpandedAnimation';
+import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
+import styled from '@emotion/styled';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useRecoilValue } from 'recoil';
+import { IconTool, MAIN_COLORS } from 'twenty-ui';
+
+const StyledAdvancedWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+const StyledIconContainer = styled.div`
+  border-right: 1px solid ${MAIN_COLORS.yellow};
+  display: flex;
+  height: 100%;
+  left: ${({ theme }) => theme.spacing(-6)};
+  position: absolute;
+  top: 0;
+`;
+
+const StyledContent = styled.div`
+  width: 100%;
+`;
+const StyledIconTool = styled(IconTool)`
+  margin-right: ${({ theme }) => theme.spacing(0.5)};
+`;
+
+type AdvancedSettingsWrapperProps = {
+  children: React.ReactNode;
+  dimension?: 'width' | 'height';
+  hideIcon?: boolean;
+};
+
+export const AdvancedSettingsWrapper = ({
+  children,
+  dimension = 'height',
+  hideIcon = false,
+}: AdvancedSettingsWrapperProps) => {
+  const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
+  const { contentRef, motionAnimationVariants } = useExpandedAnimation(
+    isAdvancedModeEnabled,
+    dimension,
+  );
+
+  return (
+    <AnimatePresence>
+      {isAdvancedModeEnabled && (
+        <motion.div
+          ref={contentRef}
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          variants={motionAnimationVariants}
+        >
+          <StyledAdvancedWrapper>
+            {!hideIcon && (
+              <StyledIconContainer>
+                <StyledIconTool size={12} color={MAIN_COLORS.yellow} />
+              </StyledIconContainer>
+            )}
+            <StyledContent>{children}</StyledContent>
+          </StyledAdvancedWrapper>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};