FM / components

/opt/canhelp/apps/web/src/components

Name	Size	Mode	Actions
AdminRolePreview.tsx	4928	0644	edit dl rm
BecomeSpecialistButton.tsx	702	0644	edit dl rm
CategoryIcon.tsx	1576	0644	edit dl rm
FaqAccordion.tsx	1500	0644	edit dl rm
FavoriteSpecialistButton.tsx	1464	0644	edit dl rm
Footer.tsx	3019	0644	edit dl rm
Header.tsx	30479	0644	edit dl rm
HeroFloatingIcons.tsx	4378	0644	edit dl rm
HeroSearch.tsx	1611	0644	edit dl rm
HomeCategoryGrid.tsx	4625	0644	edit dl rm
HomeCityCloud.tsx	1790	0644	edit dl rm
HomeCityPicker.tsx	5490	0644	edit dl rm
HomeSectionArt.tsx	5912	0644	edit dl rm
LanguageSwitcher.tsx	2438	0644	edit dl rm
PlanBadge.tsx	3100	0644	edit dl rm
PromoCountdown.tsx	3483	0644	edit dl rm
ScrollToTopButton.tsx	818	0644	edit dl rm
Section.tsx	252	0644	edit dl rm
ShareButton.tsx	1041	0644	edit dl rm
SocialIcons.tsx	6871	0644	edit dl rm
SpecialistsFiltersClient.tsx	6461	0644	edit dl rm
SpecialistTaskCard.tsx	2837	0644	edit dl rm
SupportModal.tsx	6195	0644	edit dl rm
TaskCategoryPicker.tsx	11117	0644	edit dl rm
TaskLocationPicker.tsx	11038	0644	edit dl rm
Turnstile.tsx	651	0644	edit dl rm
UpgradePrompt.tsx	3427	0644	edit dl rm
UsageMeter.tsx	1602	0644	edit dl rm

Edit: /opt/canhelp/apps/web/src/components/HomeCityPicker.tsx (5490B)

'use client'

import { useState } from 'react'
import { useLocation } from '@/context/location'
import { useLocale } from '@/context/locale'

export function HomeCityPicker() {
  const { locationSlug, locationTree, setLocation, getLabel } = useLocation()
  const { t, locale } = useLocale()
  const [open, setOpen] = useState(false)

const label = getLabel(locale)

return (
    <div className="relative inline-block">
      <button
        onClick={() => setOpen(!open)}
        className="flex items-center gap-2 px-4 py-2.5 bg-white/15 backdrop-blur-sm border border-white/30 rounded-xl text-white hover:bg-white/25 transition-colors text-sm font-medium"
      >
        <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
          <path strokeLinecap="round" strokeLinejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg>
        <span>{label || t('create.field.location.any')}</span>
        <svg className="w-3.5 h-3.5 opacity-70" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
        </svg>
      </button>

{open && (
        <>
          {/* Backdrop */}
          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
          <div className="absolute left-0 top-full mt-2 w-72 bg-white border border-gray-200 rounded-xl shadow-xl py-1.5 z-50 max-h-80 overflow-y-auto">
            {/* Anywhere */}
            <button
              className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm hover:bg-gray-50 text-left ${!locationSlug ? 'text-green-600 font-semibold' : 'text-gray-700'}`}
              onClick={() => { setLocation(''); setOpen(false) }}
            >
              <svg className="w-4 h-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              {t('create.field.location.any')}
              {!locationSlug && (
                <svg className="ml-auto w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                </svg>
              )}
            </button>

{locationTree.map((city) => {
              const cityName = city.names[locale] ?? city.names.el
              const districts = city.children ?? []
              const isCitySelected = locationSlug === city.slug
              return (
                <div key={city.id}>
                  <div className="px-2 pt-2 pb-0.5">
                    <span className="text-xs font-semibold text-gray-400 uppercase tracking-wide px-2">{cityName}</span>
                  </div>
                  <button
                    className={`w-full flex items-center gap-2 px-4 py-1.5 text-sm hover:bg-gray-50 text-left ${isCitySelected ? 'text-green-600 font-medium' : 'text-gray-700'}`}
                    onClick={() => { setLocation(city.slug); setOpen(false) }}
                  >
                    <svg className="w-3.5 h-3.5 text-gray-300 shrink-0" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
                    </svg>
                    {cityName} — {t('create.field.location.all')}
                    {isCitySelected && (
                      <svg className="ml-auto w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                      </svg>
                    )}
                  </button>
                  {districts.map((d) => {
                    const dName = d.names[locale] ?? d.names.el
                    const isSelected = locationSlug === d.slug
                    return (
                      <button
                        key={d.id}
                        className={`w-full flex items-center gap-2 pl-8 pr-4 py-1.5 text-sm hover:bg-gray-50 text-left ${isSelected ? 'text-green-600 font-medium' : 'text-gray-600'}`}
                        onClick={() => { setLocation(d.slug); setOpen(false) }}
                      >
                        <span className="w-1 h-1 rounded-full bg-gray-300 shrink-0" />
                        {dName}
                        {isSelected && (
                          <svg className="ml-auto w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                            <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                          </svg>
                        )}
                      </button>
                    )
                  })}
                </div>
              )
            })}
          </div>
        </>
      )}
    </div>
  )
}

'use client' import { useState } from 'react' import { useLocation } from '@/context/location' import { useLocale } from '@/context/locale' export function HomeCityPicker() { const { locationSlug, locationTree, setLocation, getLabel } = useLocation() const { t, locale } = useLocale() const [open, setOpen] = useState(false) const label = getLabel(locale) return (

{open && ( <> {/* Backdrop */}

setOpen(false)} />

{/* Anywhere */} {locationTree.map((city) => { const cityName = city.names[locale] ?? city.names.el const districts = city.children ?? [] const isCitySelected = locationSlug === city.slug return (

{cityName}

{districts.map((d) => { const dName = d.names[locale] ?? d.names.el const isSelected = locationSlug === d.slug return ( ) })}

) })}

)}

) }