@hhgtech/hhg-components 1.19.0-beta-5 → 1.19.0-beta-7

package/src/care/components/organisms/bookingSearchBar/locationResults/liSkeleton.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import { theme } from 'misc/theme'
+import { useId } from 'react-id-generator'
+import Skeleton from 'react-loading-skeleton'
+import styled from 'styled-components'
+
+type Props = {
+  count: number
+  className?: string
+}
+
+const StyledLiSkeleton = styled.li`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+
+  > :first-child {
+    flex: 1;
+  }
+
+  > :nth-child(2) {
+    flex: 6;
+  }
+
+  & + li::before {
+    content: '';
+    position: absolute;
+    left: 18px;
+    right: 18px;
+    top: 0;
+    height: 1px;
+    background-color: ${theme.colors.neutral100};
+  }
+`
+
+const LiSkeleton = ({ count, className }: Props) => {
+  const idList = useId(count)
+  return (
+    <>
+      {[...Array(count)].map((__v, i) => (
+        <StyledLiSkeleton className={className} key={idList[i]}>
+          <Skeleton count={1} height={32} />
+          <Skeleton count={1} height={24} />
+        </StyledLiSkeleton>
+      ))}
+    </>
+  )
+}
+
+export default LiSkeleton

package/src/care/components/organisms/bookingSearchBar/mobileFakeInput/index.tsx

@@ -0,0 +1,68 @@
+import React, { useMemo, useRef } from 'react'
+
+import { MagnifierIcon } from 'care/components/atoms/icons'
+import { useTranslations } from 'hooks/useTranslations'
+import { theme } from 'misc/theme'
+import styled from 'styled-components'
+
+import { StyledInput } from '../index.styled'
+import { FocusedType, GATrackingCode } from '../types'
+import { useAnimatedPlaceholder } from '../useAnimatedPlaceholder'
+
+export const StyledFakeInputSearchMobile = styled.div`
+  user-select: none;
+  input {
+    pointer-events: none;
+    background-color: white;
+  }
+`
+
+type Props = {
+  focused: FocusedType
+  onClick?: () => void
+  value?: string
+  trackingAttributes?: GATrackingCode
+  inputSearchPlaceholder?: string
+}
+
+export function MobileFakeInput({
+  focused,
+  value = '',
+  onClick,
+  trackingAttributes,
+  inputSearchPlaceholder,
+}: Props) {
+  const { t } = useTranslations()
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  useAnimatedPlaceholder({ wrapperRef, disabled: !!inputSearchPlaceholder })
+
+  const gaAttributes = useMemo(() => {
+    if (trackingAttributes) {
+      return {
+        'data-event-category': trackingAttributes.dataEventCategory,
+        'data-event-action': trackingAttributes.dataEventAction,
+        'data-event-label': trackingAttributes.dataEventLabel,
+      }
+    } else {
+      return {}
+    }
+  }, [trackingAttributes])
+
+  return (
+    <StyledFakeInputSearchMobile
+      onClick={() => onClick && onClick()}
+      ref={wrapperRef}
+      {...gaAttributes}
+    >
+      <StyledInput
+        inputClassName={focused === 'location' ? 'focused' : undefined}
+        name="booking-search-placeholder"
+        displayIcon={<MagnifierIcon color={theme.colors.gray400} />}
+        placeholder={t('booking.searchBar.searchInput.placeholder')}
+        value={value}
+        size="md"
+      />
+    </StyledFakeInputSearchMobile>
+  )
+}

package/src/care/components/organisms/bookingSearchBar/mobileTopbar/index.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { Props, MobileTopBar } from '.'
+
+export default {
+  component: MobileTopBar,
+  title: 'Projects/Care/Organisms/BookingSearchBar/MobileTopBar',
+}
+
+const Template: Story<Props> = (args) => <MobileTopBar {...args} />
+
+export const Normal = Template.bind({})
+
+Normal.args = {
+  headingText: 'Search',
+  textRight: 'Close',
+  // iconLeft?:
+  onRightClick: () => console.log('onRightClick'),
+  onClick: () => console.log('onClick'),
+}

package/src/care/components/organisms/bookingSearchBar/mobileTopbar/index.styled.ts

@@ -0,0 +1,41 @@
+import { Text } from 'components/atoms/text'
+import { theme } from 'misc/theme'
+import styled from 'styled-components'
+
+export const StyledTopBar = styled.header`
+  display: flex;
+  height: 64px;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 auto;
+  position: sticky;
+  z-index: 99;
+  background-color: white;
+  top: 0;
+  left: 0;
+`
+
+export const StyledTopBarHeaderRight = styled.div`
+  display: inline-flex;
+  flex: 1;
+  justify-content: flex-end;
+  cursor: pointer;
+  text-decoration: underline;
+`
+
+export const StyledTopBarIcon = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: 16px;
+  cursor: pointer;
+`
+
+export const StyledTopbarHeading = styled.div`
+  width: 100%;
+  margin-left: 24px;
+`
+
+export const StyledTopbarHeadingText = styled(Text)`
+  color: ${theme.colors.secondaryDark};
+  text-align: start;
+`

package/src/care/components/organisms/bookingSearchBar/mobileTopbar/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import { CloseIcon } from 'care/components/atoms/icons'
+import { theme } from 'misc/theme'
+
+import {
+  StyledTopBar,
+  StyledTopBarHeaderRight,
+  StyledTopbarHeading,
+  StyledTopbarHeadingText,
+  StyledTopBarIcon,
+} from './index.styled'
+
+export type Props = {
+  className?: string
+  headingText: string
+  textRight?: string
+  iconLeft?: JSX.Element
+  onRightClick?: () => void
+  onLeftClick?: () => void
+}
+
+const MobileTopBar = ({
+  className,
+  onLeftClick,
+  headingText,
+  onRightClick,
+  iconLeft,
+  textRight,
+}: Props) => {
+  return (
+    <StyledTopBar className={className}>
+      <StyledTopBarIcon onClick={onLeftClick}>
+        {iconLeft || <CloseIcon color={theme.colors.gray800} />}
+      </StyledTopBarIcon>
+      <StyledTopbarHeading>
+        <StyledTopbarHeadingText size="md" type="bold">
+          {headingText}
+        </StyledTopbarHeadingText>
+      </StyledTopbarHeading>
+      <StyledTopBarHeaderRight onClick={onRightClick}>
+        {textRight && <p>{textRight}</p>}
+      </StyledTopBarHeaderRight>
+    </StyledTopBar>
+  )
+}
+
+export { MobileTopBar }

package/src/care/components/organisms/bookingSearchBar/reducer.ts

@@ -0,0 +1,293 @@
+import { ID_OPTION_CURRENT_LOCATION } from 'care/interfaces/constants'
+import {
+  CareLocaleType,
+  City,
+  SearchBarSectionApi,
+  SearchCityByGeoIpApi,
+} from 'care/interfaces/types'
+import { GeoLocationPermission, GPSType } from 'interfaces/types'
+
+import { SEARCH_KEYWORD_MIN_LENGTH } from './constants'
+import { FocusedType } from './types'
+
+export type ReducerState = {
+  isMobile: boolean
+  isDebug: boolean
+  navigateTo: null | string
+  geoLocationPermission: GeoLocationPermission
+  geoLocationCoordinates: null | GPSType
+  searchLocationKeywords: string
+  searchKeywords: string
+  focused: FocusedType
+  selectedLocation: City | null
+  defaultCity: City | null
+  initialCities: City[]
+  cities: City[]
+  searchResults: SearchBarSectionApi[]
+  initialSearchResults: SearchBarSectionApi[]
+  isLoadingCities: boolean
+  isLoadingSearchResults: boolean
+  isMobileModalOpened: boolean
+  initialSelectedCity: City | null
+  autoCompleteDisabled: boolean
+  inputSearchPlaceholder: string
+  locale: CareLocaleType
+}
+
+export const initialState: ReducerState = {
+  isMobile: false,
+  isDebug: false,
+  navigateTo: null,
+  geoLocationPermission: 'unset',
+  geoLocationCoordinates: null,
+  focused: 'none',
+  searchLocationKeywords: '',
+  searchKeywords: '',
+  selectedLocation: null,
+  defaultCity: null,
+  initialCities: [],
+  cities: [],
+  searchResults: [],
+  initialSearchResults: [],
+  isLoadingCities: false,
+  isLoadingSearchResults: false,
+  isMobileModalOpened: false,
+  initialSelectedCity: null,
+  autoCompleteDisabled: false,
+  inputSearchPlaceholder: '',
+  locale: 'vi-VN',
+}
+
+export enum ActionTypes {
+  NavigateTo = 'navigate to url',
+  ClickOutsideInputLocation = 'click outside input location',
+  ClickOutsideInputSearch = 'click outside input search',
+  SelectCurrentLocation = 'select current location',
+  FocusInputLocation = 'focus input location',
+  FocusInputSearch = 'focus input search',
+  ChangeInputLocation = 'change input location',
+  ChangeInputSearch = 'change input search',
+  ClearInputLocation = 'clear input location',
+  ClearInputSearch = 'clear input search',
+  SelectLocation = 'select location',
+  FetchCitiesStart = 'fetch cities start',
+  FetchCitiesFinish = 'fetch cities finish',
+  FetchSearchResultsStart = 'fetch search results start',
+  FetchSearchResultsComplete = 'fetch search results complete',
+  FetchSearchResultsFinish = 'fetch search results finish',
+  FetchCitiesByGeoIpComplete = 'fetch cities by geo IP finish',
+  FetchCitiesByKeywordComplete = 'fetch cities by keyword finish',
+  DisplayInitialCities = 'display initial cities',
+  DisplayInitialSearchResults = 'display initial search results',
+  GrantGeoLocationPermission = 'grant geolocation permission',
+  DenyGeoLocationPermission = 'deny geolocation permission',
+  OpenMobileModal = 'open mobile modal',
+  CloseMobileModal = 'close mobile modal',
+  UpdateInitialSearchValue = 'update initial search value',
+  SelectSearchResult = 'select search result',
+  SetInputSearchPlaceholder = 'set input search placeholder',
+}
+
+export type Action =
+  | { type: ActionTypes.NavigateTo; payload: string }
+  | { type: ActionTypes.ClickOutsideInputLocation }
+  | { type: ActionTypes.ClickOutsideInputSearch }
+  | { type: ActionTypes.FocusInputLocation }
+  | { type: ActionTypes.FocusInputSearch }
+  | { type: ActionTypes.ChangeInputLocation; payload: string }
+  | { type: ActionTypes.ChangeInputSearch; payload: string }
+  | { type: ActionTypes.ClearInputLocation }
+  | { type: ActionTypes.ClearInputSearch }
+  | { type: ActionTypes.SelectCurrentLocation; payload: City }
+  | { type: ActionTypes.SelectLocation; payload: City }
+  | { type: ActionTypes.FetchCitiesStart }
+  | { type: ActionTypes.FetchCitiesFinish }
+  | { type: ActionTypes.FetchSearchResultsStart }
+  | {
+      type: ActionTypes.FetchSearchResultsComplete
+      payload: SearchBarSectionApi[]
+    }
+  | { type: ActionTypes.FetchSearchResultsFinish }
+  | {
+      type: ActionTypes.FetchCitiesByGeoIpComplete
+      payload: SearchCityByGeoIpApi
+    }
+  | { type: ActionTypes.FetchCitiesByKeywordComplete; payload: City[] }
+  | { type: ActionTypes.DisplayInitialCities }
+  | { type: ActionTypes.DisplayInitialSearchResults }
+  | { type: ActionTypes.GrantGeoLocationPermission; payload: GPSType }
+  | { type: ActionTypes.DenyGeoLocationPermission }
+  | { type: ActionTypes.OpenMobileModal }
+  | { type: ActionTypes.CloseMobileModal }
+  | { type: ActionTypes.UpdateInitialSearchValue; payload: string }
+  | {
+      type: ActionTypes.SelectSearchResult
+      payload: { name: string; url: string }
+    }
+  | { type: ActionTypes.SetInputSearchPlaceholder; payload: string }
+
+function resetSearchLocationKeywords(state: ReducerState): ReducerState {
+  const { selectedLocation, searchLocationKeywords } = state
+  if (selectedLocation && searchLocationKeywords !== selectedLocation.name) {
+    return { ...state, searchLocationKeywords: selectedLocation.name }
+  }
+  return state
+}
+
+export function reducer(state: ReducerState, action: Action): ReducerState {
+  if (state.isDebug) {
+    console.log('bookingSearchBar', { action, state })
+  }
+  switch (action.type) {
+    case ActionTypes.NavigateTo:
+      return {
+        ...state,
+        navigateTo: action.payload,
+        focused: 'none',
+        isMobileModalOpened: false,
+      }
+    case ActionTypes.ClickOutsideInputLocation: {
+      if (state.isMobile || state.focused !== 'location') {
+        return state
+      }
+      return resetSearchLocationKeywords({ ...state, focused: 'none' })
+    }
+    case ActionTypes.ClickOutsideInputSearch: {
+      if (state.isMobile || state.focused !== 'search') {
+        return state
+      }
+      return { ...state, focused: 'none' }
+    }
+    case ActionTypes.FocusInputLocation: {
+      const nextState: ReducerState = { ...state, focused: 'location' }
+      if (state.selectedLocation?.id === ID_OPTION_CURRENT_LOCATION) {
+        nextState.searchLocationKeywords = ''
+      }
+      return nextState
+    }
+    case ActionTypes.FocusInputSearch:
+      const nextState: ReducerState = { ...state, focused: 'search' }
+      if (state.isMobile) {
+        return resetSearchLocationKeywords(nextState)
+      }
+      return nextState
+    case ActionTypes.ChangeInputLocation:
+      return { ...state, searchLocationKeywords: action.payload }
+    case ActionTypes.ChangeInputSearch: {
+      const keyword = action.payload
+      return {
+        ...state,
+        searchKeywords: keyword,
+        isLoadingSearchResults:
+          keyword.trim().length > SEARCH_KEYWORD_MIN_LENGTH[state.locale],
+      }
+    }
+    case ActionTypes.SelectCurrentLocation:
+      return {
+        ...state,
+        focused: 'none',
+        selectedLocation: action.payload,
+        searchLocationKeywords: action.payload.name,
+      }
+    case ActionTypes.ClearInputLocation:
+      return {
+        ...state,
+        focused: 'location',
+        cities: state.initialCities,
+        searchLocationKeywords: '',
+      }
+    case ActionTypes.ClearInputSearch:
+      return { ...state, focused: 'search', searchKeywords: '' }
+    case ActionTypes.SelectLocation:
+      return {
+        ...state,
+        focused: 'none',
+        selectedLocation: action.payload,
+        searchLocationKeywords: action.payload.name,
+      }
+    case ActionTypes.SelectSearchResult:
+      return {
+        ...state,
+        searchKeywords: action.payload.name,
+        isMobileModalOpened: false,
+        focused: 'none',
+        navigateTo: action.payload.url,
+      }
+    case ActionTypes.FetchCitiesStart:
+      return { ...state, isLoadingCities: true }
+    case ActionTypes.FetchCitiesFinish:
+      return { ...state, isLoadingCities: false }
+    case ActionTypes.FetchSearchResultsStart:
+      return { ...state, isLoadingSearchResults: true }
+    case ActionTypes.FetchSearchResultsFinish:
+      return { ...state, isLoadingSearchResults: false }
+    case ActionTypes.FetchSearchResultsComplete: {
+      const nextState: ReducerState = {
+        ...state,
+        searchResults: action.payload,
+      }
+      if (state.initialSearchResults.length === 0) {
+        nextState.initialSearchResults = action.payload
+      }
+      return nextState
+    }
+    case ActionTypes.FetchCitiesByGeoIpComplete: {
+      let { cities } = action.payload
+      const { default: defaultCity } = action.payload
+      cities = cities.filter((c) => c.id !== defaultCity.id)
+      cities.unshift(defaultCity)
+      if (
+        state.initialSelectedCity &&
+        !cities.find((c) => c.id === state.initialSelectedCity.id)
+      ) {
+        cities.unshift(state.initialSelectedCity)
+      }
+      const nextState: ReducerState = {
+        ...state,
+        defaultCity,
+        initialCities: cities,
+        cities,
+      }
+      if (
+        state.geoLocationPermission === 'denied' &&
+        !state.initialSelectedCity
+      ) {
+        nextState.selectedLocation = defaultCity
+        nextState.searchLocationKeywords = defaultCity.name
+      }
+      return nextState
+    }
+    case ActionTypes.FetchCitiesByKeywordComplete:
+      return { ...state, cities: action.payload }
+    case ActionTypes.DisplayInitialCities:
+      return { ...state, cities: state.initialCities }
+    case ActionTypes.DisplayInitialSearchResults:
+      return {
+        ...state,
+        searchResults: state.initialSearchResults,
+        isLoadingSearchResults: false,
+      }
+    case ActionTypes.GrantGeoLocationPermission:
+      return {
+        ...state,
+        geoLocationPermission: 'granted',
+        geoLocationCoordinates: action.payload,
+      }
+    case ActionTypes.DenyGeoLocationPermission:
+      return {
+        ...state,
+        geoLocationPermission: 'denied',
+        geoLocationCoordinates: null,
+      }
+    case ActionTypes.OpenMobileModal:
+      return { ...state, isMobileModalOpened: true }
+    case ActionTypes.CloseMobileModal:
+      return { ...state, isMobileModalOpened: false }
+    case ActionTypes.UpdateInitialSearchValue:
+      return { ...state, searchKeywords: action.payload }
+    case ActionTypes.SetInputSearchPlaceholder:
+      return { ...state, inputSearchPlaceholder: action.payload }
+    default:
+      return state
+  }
+}

package/src/care/components/organisms/bookingSearchBar/resultSection/icons.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+export const DoctorIcon = () => (
+  <svg width="14" height="18" viewBox="0 0 14 18">
+    <path
+      d="M7.00004 0.666992C5.29757 0.666992 3.64067 0.813476 2.52087 1.03158C1.73311 1.18457 1.16671 1.86816 1.16671 2.6722V4.83366C1.16671 5.29264 1.54106 5.66699 2.00004 5.66699H12C12.459 5.66699 12.8334 5.29264 12.8334 4.83366V2.69824C12.8334 1.89421 12.267 1.21061 11.4792 1.05762C10.3562 0.839518 8.69275 0.666992 7.00004 0.666992ZM6.16671 1.50033H7.83337V2.33366H8.66671V4.00033H7.83337V4.83366H6.16671V4.00033H5.33337V2.33366H6.16671V1.50033ZM1.42712 6.50033C1.3197 6.89421 1.24158 7.32389 1.19275 7.77637C1.14718 8.18001 1.05603 9.25423 1.06254 9.36491C0.603556 9.72624 0.333374 10.2861 0.333374 10.9014C0.333374 11.8356 0.977906 12.6364 1.84379 12.8285C2.74548 15.0192 4.55212 17.3337 7.00004 17.3337C9.44796 17.3337 11.2546 14.9964 12.1563 12.8024C13.0222 12.6136 13.6667 11.8356 13.6667 10.9014C13.6667 10.2861 13.3965 9.72624 12.9375 9.36491C12.9441 9.25423 12.8562 8.16048 12.8073 7.75033C12.7552 7.30436 12.6804 6.89095 12.573 6.50033H5.35942C6.52804 8.20606 9.27543 7.18717 11.0365 7.62012C11.5736 8.79199 11.1667 10.4326 11.1667 10.4326L11.8177 10.641C11.9121 10.6702 12 10.7549 12 10.9014C12 11.0576 11.8861 11.1943 11.6875 11.1878L11.0105 11.0837L10.7761 11.7347C9.96554 14.0492 8.4128 15.667 7.00004 15.667C5.58728 15.667 4.03455 14.0492 3.224 11.7347L2.96358 11.0837L2.26046 11.1878C2.11723 11.1878 2.00004 11.0576 2.00004 10.9014C2.00004 10.7549 2.08793 10.6702 2.18233 10.641L2.83337 10.4326C2.73246 10.5531 2.4102 8.7041 2.83337 8.03678C3.59184 7.5127 4.2266 7.87728 5.12504 6.50033H1.42712ZM5.17712 9.05241C4.57166 9.05241 4.08337 9.55371 4.08337 10.1722C4.08337 10.7907 4.57166 11.292 5.17712 11.292C5.78259 11.292 6.27087 10.7907 6.27087 10.1722C6.27087 9.55371 5.78259 9.05241 5.17712 9.05241ZM8.82296 9.05241C8.21749 9.05241 7.72921 9.55371 7.72921 10.1722C7.72921 10.7907 8.21749 11.292 8.82296 11.292C9.42843 11.292 9.91671 10.7907 9.91671 10.1722C9.91671 9.55371 9.42843 9.05241 8.82296 9.05241Z"
+      fill="#9AA2AC"
+    />
+  </svg>
+)
+
+export const ServiceIcon = () => (
+  <svg width="18" height="18" viewBox="0 0 18 18">
+    <path
+      d="M8.99996 0.666992C6.27535 0.666992 3.85348 1.97884 2.33329 4.00033H4.59892C5.80009 2.94564 7.36259 2.33366 8.99996 2.33366C10.6373 2.33366 12.1998 2.94564 13.401 4.00033H15.6666C14.1464 1.97884 11.7246 0.666992 8.99996 0.666992ZM1.78642 4.83366C1.07678 7.04069 0.666626 9.59928 0.666626 12.3337C0.666626 14.085 0.826131 15.7679 1.13538 17.3337H16.8645C17.1738 15.7679 17.3333 14.085 17.3333 12.3337C17.3333 9.59928 16.9231 7.04069 16.2135 4.83366H1.78642ZM8.99996 7.33366C11.3014 7.33366 13.1666 9.19889 13.1666 11.5003C13.1666 13.8018 11.3014 15.667 8.99996 15.667C6.69853 15.667 4.83329 13.8018 4.83329 11.5003C4.83329 9.19889 6.69853 7.33366 8.99996 7.33366ZM8.16663 9.00033V10.667H6.49996V12.3337H8.16663V14.0003H9.83329V12.3337H11.5V10.667H9.83329V9.00033H8.16663Z"
+      fill="#9AA2AC"
+    />
+  </svg>
+)
+
+export const HospitalIcon = () => (
+  <svg width="16" height="17" viewBox="0 0 16 17">
+    <path
+      d="M8 0.666992L0.5 5.63533V14.8337C0.5 15.7545 1.24583 16.5003 2.16667 16.5003H13.8333C14.7542 16.5003 15.5 15.7545 15.5 14.8337V5.63533L8 0.666992ZM11.3333 10.667H8.83333V13.167H7.16667V10.667H4.66667V9.00033H7.16667V6.50033H8.83333V9.00033H11.3333V10.667Z"
+      fill="#9AA2AC"
+    />
+  </svg>
+)
+
+export const SpecialtyIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16">
+    <path
+      d="M3.83333 0.5C2.94928 0.5 2.10143 0.851189 1.47631 1.47631C0.851189 2.10143 0.5 2.94928 0.5 3.83333C0.5 4.71739 0.851189 5.56523 1.47631 6.19036C2.10143 6.81548 2.94928 7.16667 3.83333 7.16667C4.71739 7.16667 5.56523 6.81548 6.19036 6.19036C6.81548 5.56523 7.16667 4.71739 7.16667 3.83333C7.16667 2.94928 6.81548 2.10143 6.19036 1.47631C5.56523 0.851189 4.71739 0.5 3.83333 0.5V0.5ZM10.5 0.5C9.57917 0.5 8.83333 1.24583 8.83333 2.16667V5.5C8.83333 6.42083 9.57917 7.16667 10.5 7.16667H13.8333C14.7542 7.16667 15.5 6.42083 15.5 5.5V2.16667C15.5 1.24583 14.7542 0.5 13.8333 0.5H10.5ZM3.83333 8.83333C2.94928 8.83333 2.10143 9.18452 1.47631 9.80964C0.851189 10.4348 0.5 11.2826 0.5 12.1667C0.5 13.0507 0.851189 13.8986 1.47631 14.5237C2.10143 15.1488 2.94928 15.5 3.83333 15.5C4.71739 15.5 5.56523 15.1488 6.19036 14.5237C6.81548 13.8986 7.16667 13.0507 7.16667 12.1667C7.16667 11.2826 6.81548 10.4348 6.19036 9.80964C5.56523 9.18452 4.71739 8.83333 3.83333 8.83333V8.83333ZM12.1667 8.83333C11.2826 8.83333 10.4348 9.18452 9.80964 9.80964C9.18452 10.4348 8.83333 11.2826 8.83333 12.1667C8.83333 13.0507 9.18452 13.8986 9.80964 14.5237C10.4348 15.1488 11.2826 15.5 12.1667 15.5C13.0507 15.5 13.8986 15.1488 14.5237 14.5237C15.1488 13.8986 15.5 13.0507 15.5 12.1667C15.5 11.2826 15.1488 10.4348 14.5237 9.80964C13.8986 9.18452 13.0507 8.83333 12.1667 8.83333V8.83333Z"
+      fill="#9AA2AC"
+    />
+  </svg>
+)