feat: MotionTabs

apps/web/src/components/Motion/MotionTabs.tsx

@@ -0,0 +1,57 @@
+import { Box, MotionBox, MotionFlexGap, useMatchBreakpoints } from '@pancakeswap/uikit'
+import { Children, cloneElement, ReactElement } from 'react'
+import styled from 'styled-components'
+
+interface MotionTabsProps {
+  children: React.ReactElement[]
+  activeIndex?: number
+  onItemClick?: (index: number) => void
+}
+
+const MotionBoxUnderline = styled(MotionBox)`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: ${({ theme }) => theme.colors.primary};
+  width: 100%;
+`
+
+const StyledTab = styled(Box)`
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.25s;
+`
+
+export const MotionTabs: React.FC<React.PropsWithChildren<MotionTabsProps>> = ({
+  children,
+  onItemClick,
+  activeIndex = 0,
+}) => {
+  const { isMobile } = useMatchBreakpoints()
+  return (
+    <MotionFlexGap gap={isMobile ? '8px' : '12px'} alignItems="baseline">
+      {Children.map(children, (child: ReactElement, index) => {
+        const isActive = activeIndex === index
+        const color = isActive ? 'text' : 'textSubtle'
+
+        return (
+          <>
+            <StyledTab position="relative" width="fit-content">
+              <Box px={['8px', '12px']} py="8px">
+                {cloneElement(child, {
+                  onClick: onItemClick ? () => onItemClick(index) : undefined,
+                  color,
+                  bold: isActive,
+                  isActive,
+                })}
+              </Box>
+              {isActive && <MotionBoxUnderline layoutId="underline" />}
+            </StyledTab>
+          </>
+        )
+      })}
+    </MotionFlexGap>
+  )
+}

apps/web/src/components/SearchModal/CurrencySearchModal.tsx

@@ -171,7 +171,7 @@ export default function CurrencySearchModal({
                 {selectedCurrency.symbol}
               </Text>
               {!selectedCurrency.isNative && (
-                <FlexGap ml="2px" gap="8px" alignItems="center">
+                <FlexGap ml={isMobile ? '8px' : '4px'} gap={isMobile ? '18px' : '12px'} alignItems="center">
                   <CopyButton
                     data-dd-action-name="Copy token address"
                     width="16px"
@@ -190,7 +190,7 @@ export default function CurrencySearchModal({
                     data-dd-action-name="Add to wallet"
                     variant="text"
                     p="0"
-                    ml="2px"
+                    ml="3px"
                     height="auto"
                     width="fit-content"
                     tokenAddress={selectedCurrency.wrapped.address}