feat: language switcher component for footer

src/components/locale-switcher-footer/index.tsx

@@ -0,0 +1,82 @@
+import { useRouter } from 'next/router'
+import { Box, IconGlobe, Text, IconCaret, Flex } from '@vtex/brand-ui'
+import styles from './styles'
+import { Disclosure, DisclosureContent, useDisclosureState } from 'reakit'
+import { LocaleOption } from '@vtex/brand-ui/dist/components/Header/LocaleSwitcher'
+
+interface OptionProps {
+  screen: 'mobile' | 'large'
+  option: LocaleOption
+  active: boolean
+  onClick?: () => void
+}
+
+export default function LocaleSwitcherFooter() {
+  const router = useRouter()
+  const options: LocaleOption[] = [
+    {
+      label: 'EN',
+      value: 'en',
+    },
+    {
+      label: 'PT',
+      value: 'pt',
+    },
+    {
+      label: 'ES',
+      value: 'es',
+    },
+  ]
+
+  const handleOptionClick = (option: string) => {
+    const locale = option
+    router.push(router.pathname, router.asPath, { locale })
+    disclosure.hide()
+  }
+  const disclosure = useDisclosureState({ visible: false })
+  const Option = ({ screen, option, onClick, active }: OptionProps) => {
+    const variant = `localeSwitcher.${screen}.option`
+
+    return (
+      <Box
+        variant={`${variant}${active ? '.active' : ''}`}
+        role="presentation"
+        onClick={onClick}
+      >
+        {option.label}
+      </Box>
+    )
+  }
+
+  return (
+    <Box sx={styles.localeSwitcher}>
+      <Disclosure {...disclosure}>
+        <Flex sx={{ alignItems: 'center' }}>
+          <IconGlobe sx={{ color: '#CCCED8' }} size={22} />
+          <Text sx={styles.localeLabel}>{router.locale?.toUpperCase()}</Text>
+        </Flex>
+        <IconCaret
+          sx={{ color: '#CCCED8' }}
+          direction={disclosure.visible ? 'up' : 'down'}
+          size={30}
+        />
+
+        <Box sx={styles.optionContainer}>
+          <DisclosureContent {...disclosure}>
+            {options.map((option) => (
+              <Option
+                key={option.label}
+                option={option}
+                screen="large"
+                onClick={() => {
+                  handleOptionClick(option.value)
+                }}
+                active={option.value === router.locale}
+              />
+            ))}
+          </DisclosureContent>
+        </Box>
+      </Disclosure>
+    </Box>
+  )
+}

src/components/locale-switcher-footer/styles.ts

@@ -0,0 +1,52 @@
+import { SxStyleProp } from '@vtex/brand-ui'
+
+const localeLabel: SxStyleProp = {
+  color: 'white',
+  pl: 2,
+  display: 'block',
+}
+
+const optionContainer: SxStyleProp = {
+  color: 'black',
+  position: 'absolute',
+  display: 'flex',
+  flexDirection: 'column',
+  // width: '11rem',
+  marginRight: '10px',
+  top: 'auto',
+  right: '0',
+  bottom: '100%',
+  px: 5,
+  // border: '1px solid #e7e9ed',
+  borderTop: 'none',
+  backgroundColor: '#ffffff',
+  boxShadow: '0px 20px 25px rgba(20, 32, 50, 0.1)',
+}
+
+const baseLocaleSwitcher: SxStyleProp = {
+  alignItems: 'center',
+  cursor: 'pointer',
+  bg: 'transparent',
+  border: 'none',
+  outline: 'none',
+}
+
+const localeSwitcher: SxStyleProp = {
+  position: 'relative',
+  button: {
+    ...baseLocaleSwitcher,
+    display: 'flex',
+    ':hover': {
+      color: '#142032',
+    },
+    height: '100%',
+    justifyContent: 'flex-start',
+  },
+}
+
+export default {
+  localeLabel,
+  optionContainer,
+  localeSwitcher,
+  baseLocaleSwitcher,
+}