Skip to content

Commit

Permalink
Updated language dropdown modals for mobile & desktop
Browse files Browse the repository at this point in the history
  • Loading branch information
@acharyarupak391
acharyarupak391 committed Mar 19, 2024
1 parent 3e90120 commit 68b5c1c
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 24 deletions.
4 changes: 2 additions & 2 deletions src/common/Footer/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const Footer = () => {
<footer className='pt-16 border-t pb-18 border-B0C4DB print:hidden'>
<Container>
<div className='flex flex-col justify-between gap-10 lg:flex-row'>
<div className='flex flex-col items-start justify-between gap-8'>
<div className='flex flex-col items-start justify-between gap-8 text-01052D'>
<img
loading='lazy'
alt={t(i18n)`Neptune Mutual`}
Expand All @@ -32,7 +32,7 @@ export const Footer = () => {
</a>
</div>

<LanguageDropdown footer />
<LanguageDropdown />
</div>

<div className='flex flex-wrap justify-between gap-6 lg:flex-nowrap'>
Expand Down
2 changes: 1 addition & 1 deletion src/common/Header/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,7 +330,7 @@ export const MenuModal = ({
<div className='absolute right-6 top-6'>
<BurgerMenu isOpen onToggle={onClose} />
</div>
<div className='w-full sm:px-16'>
<div className='w-full text-white sm:px-16'>
<LanguageDropdown onOverlay />
</div>
<div className='flex flex-col flex-grow w-full text-left align-middle transition-all transform shadow-xl sm:px-16 sm:align-baseline rounded-2xl'>
Expand Down
119 changes: 101 additions & 18 deletions src/common/Header/LanguageDropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {

import { useRouter } from 'next/router'

import ChevronDownArrowIcon from '@/icons/ChevronDownArrowIcon'
import LeftArrow from '@/icons/LeftArrow'
import SearchLanguageIcon from '@/icons/SearchLanguageIcon'
import SelectedCircleIcon from '@/icons/SelectedCircleIcon'
import GlobeLogo from '@/lib/connect-wallet/components/logos/Globe'
Expand All @@ -17,6 +17,7 @@ import {
} from '@/src/config/locales'
import { useDebounce } from '@/src/hooks/useDebounce'
import { useLocalStorage } from '@/src/hooks/useLocalStorage'
import { useWindowSize } from '@/src/hooks/useWindowSize'
import { classNames } from '@/utils/classnames'
import { getBrowserLocale } from '@/utils/locale'
import {
Expand All @@ -25,14 +26,19 @@ import {
} from '@headlessui/react'
import { t } from '@lingui/macro'
import { useLingui } from '@lingui/react'
import {
Content,
Overlay,
Portal,
Root
} from '@radix-ui/react-dialog'

const LANGUAGES = Object.values(languageKey)
const LANGUAGE_KEYS = Object.keys(languageKey)

/**
* @param {object} props
* @param {boolean?} [props.onOverlay]
* @param {boolean?} [props.footer]
* @returns
*/
export const LanguageDropdown = (props) => {
Expand All @@ -41,6 +47,8 @@ export const LanguageDropdown = (props) => {

const [language, setLanguage] = useLocalStorage('locale', null)

const { width } = useWindowSize()

useEffect(() => {
const browserLocale = getBrowserLocale().replace(/-.*/, '')
if (
Expand Down Expand Up @@ -100,50 +108,48 @@ export const LanguageDropdown = (props) => {
open && 'underline'
)}
>
<div className={classNames('flex items-center gap-1 text-sm',
props.footer ? 'text-black text-md font-medium' : 'text-white'
)}
>
<GlobeLogo className={props.footer ? 'text-black w-6 h-6' : 'text-white'} />
<div className={classNames('flex items-center gap-1 text-current text-md font-medium')}>
<GlobeLogo className='w-6 h-6 text-current' />
<span>
{languageKey[router.locale]?.split('-')[0]}
</span>
<ChevronDownArrowIcon aria-hidden='true' />
</div>
</Listbox.Button>

<Transition
show={open && width > 768}
as={Fragment}
leave='transition ease-in duration-100'
leaveFrom='opacity-100'
leaveTo='opacity-0'
>
<Listbox.Options className={classNames(
'z-50 py-6 px-2 mt-4 absolute h-fit top-4 overflow-auto min-w-[260px] sm:min-w-[274px] text-base bg-[#FEFEFF] border rounded-md shadow-lg border-B0C4DB ring-1 ring-black ring-opacity-5 focus:outline-none',
props.onOverlay && 'left-0 w-fit',
props.footer ? 'left-0' : 'right-0'
'z-50 p-4 bg-[#FEFEFF] absolute rounded-2 border border-B0C4DB shadow-menu min-w-300 flex flex-col gap-4 bottom-full-plus-16',
props.onOverlay && 'left-0 w-fit'
)}
>
<div className='flex items-center pb-4 mb-1 text-sm'>
<SearchLanguageIcon width={16} height={16} className='mx-2.5' />
<div className='flex items-center justify-between gap-1 py-2.5 px-4 border rounded-2 border-B0C4DB'>
<input
autoComplete='off'
className='w-full placeholder-[#B0C4DB] text-black outline-0 h-6 max-w-[250px]'
className='w-full placeholder-[#B0C4DB] text-black outline-none text-sm'
placeholder={t(i18n)`Search Language`}
value={searchValue}
onChange={handleSearchLanguage}
/>

<SearchLanguageIcon width={16} height={16} />
</div>
<div className='overflow-y-auto max-h-64'>
<div className='flex flex-col gap-3 overflow-y-auto max-h-400'>
{languages.map((lang, i) => {
return (
<Listbox.Option key={i} value={lang}>
{({ selected, active }) => {
return (
<span
className={classNames(
'truncate p-2 flex justify-between items-center text-xs font-medium tracking-normal leading-4',
selected && 'bg-[#b0c4db] bg-opacity-20 rounded',
'truncate flex justify-between items-center text-xs tracking-normal leading-4',
active
? 'text-4E7DD9 bg-[#b0c4db] bg-opacity-20 rounded'
? 'text-4E7DD9'
: 'text-black'
)}
>
Expand All @@ -162,6 +168,15 @@ export const LanguageDropdown = (props) => {
</div>
</Listbox.Options>
</Transition>

<MobileLanguageDropdown
open={open && width <= 768}
languages={languages}
searchValue={searchValue}
handleSearchLanguage={handleSearchLanguage}
i18n={i18n}
currentLanguage={languageKey[router.locale]}
/>
</>
)
}
Expand All @@ -170,3 +185,71 @@ export const LanguageDropdown = (props) => {
</div>
)
}

const MobileLanguageDropdown = ({ open, languages, searchValue, handleSearchLanguage, i18n, currentLanguage }) => {
return (
<Root open={open}>
<Portal className='md:hidden'>
<Overlay className='fixed inset-0 z-50 bg-black bg-opacity-80 backdrop-blur-md' />

<Content className='fixed inset-0 w-full max-h-screen z-60'>
<Listbox.Options className='flex flex-col h-full gap-2 cursor-pointer'>
<div className='px-8 py-3'>
<Listbox.Option
value={currentLanguage}
className='py-1 flex gap-2.5 items-center text-white text-md leading-5 uppercase'
>
<LeftArrow />
<span>Back</span>
</Listbox.Option>
</div>

<div className='flex-1 py-2.5 px-8 flex flex-col gap-6'>
<div className='flex items-center py-2.5 px-4 bg-white rounded-2 gap-1'>
<input
autoComplete='off'
className='w-full placeholder-[#B0C4DB] text-black outline-0 text-sm flex-1'
placeholder={t(i18n)`Search Language`}
value={searchValue}
onChange={handleSearchLanguage}
/>
<SearchLanguageIcon width={16} height={16} className='text-black' />
</div>

<div className='flex flex-col flex-1 max-h-full gap-4 overflow-y-auto'>
{languages.map((lang, i) => {
return (
<Listbox.Option
key={i} value={lang} className={
({ selected }) => {
return classNames(
'truncate p-2 flex justify-between items-center text-lg tracking-normal leading-4 gap-2 cursor-pointer',
selected ? 'text-white' : 'text-9B9B9B'
)
}
}
>

{({ selected }) => {
return (
<>
{lang}
{selected && (
<span aria-label='Selected' className='flex-shrink-0'>
<SelectedCircleIcon className='w-4 h-4' />
</span>
)}
</>
)
}}
</Listbox.Option>
)
})}
</div>
</div>
</Listbox.Options>
</Content>
</Portal>
</Root>
)
}
2 changes: 1 addition & 1 deletion src/icons/SearchLanguageIcon.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const SearchLanguageIcon = (props) => {
>
<path
d='M14.0002 14L11.0095 11.004L14.0002 14ZM12.6668 7.00004C12.6668 8.50293 12.0698 9.94427 11.0071 11.007C9.9444 12.0697 8.50306 12.6667 7.00016 12.6667C5.49727 12.6667 4.05593 12.0697 2.99322 11.007C1.93052 9.94427 1.3335 8.50293 1.3335 7.00004C1.3335 5.49715 1.93052 4.05581 2.99322 2.9931C4.05593 1.9304 5.49727 1.33337 7.00016 1.33337C8.50306 1.33337 9.9444 1.9304 11.0071 2.9931C12.0698 4.05581 12.6668 5.49715 12.6668 7.00004V7.00004Z'
stroke='#B0C4DB'
stroke='currentColor'
strokeLinecap='round'
/>
</svg>
Expand Down
6 changes: 4 additions & 2 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ module.exports = {
homeCard: '0px 12px 16px rgba(0, 0, 0, 0.04)',
'hc-tooltip': '0px 5px 13px rgba(0, 0, 0, 0.1)',
'tx-overview': '0px 4px 11px rgba(1, 5, 45, 0.3)',
'tx-list': '0px 4px 12px rgba(0, 0, 0, 0.4)'
'tx-list': '0px 4px 12px rgba(0, 0, 0, 0.4)',
menu: '0px 4px 10px 0px rgba(0, 0, 0, 0.2)'
},
colors: {
transparent: 'transparent',
Expand Down Expand Up @@ -117,7 +118,8 @@ module.exports = {
420: '420px',
392: '392px',
450: '450px',
'full-plus-20': 'calc(100% + 20px)'
'full-plus-20': 'calc(100% + 20px)',
'full-plus-16': 'calc(100% + 16px)'
},
lineHeight: {
4.5: '18px',
Expand Down

0 comments on commit 68b5c1c

Please sign in to comment.