-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
57fb107
commit 2e49e1a
Showing
5 changed files
with
274 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import React from 'react'; | ||
|
|
||
| const world_Icon = ({ width, height, fill }) => { | ||
| return ( | ||
| <svg | ||
| xmlns='http://www.w3.org/2000/svg' | ||
| width={width || 24} | ||
| height={height || 24} | ||
| viewBox='0 0 24 24' | ||
| fill='none'> | ||
| <path | ||
| d='M15 2.458A9.996 9.996 0 0012 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10c0-1.715-.432-3.33-1.193-4.74M17 5.75h.005M10.5 21.888v-2.203a.5.5 0 01.12-.325l2.486-2.9a.5.5 0 00-.131-.76l-2.857-1.632a.499.499 0 01-.186-.187L8.07 10.62a.5.5 0 00-.478-.25l-5.528.492M21 6c0 2.21-2 4-4 6-2-2-4-3.79-4-6a4 4 0 018 0zm-3.75-.25a.25.25 0 11-.5 0 .25.25 0 01.5 0z' | ||
| stroke={fill || '#145FFF'} | ||
| strokeWidth={1.5} | ||
| strokeLinecap='round' | ||
| strokeLinejoin='round' | ||
| /> | ||
| </svg> | ||
| ); | ||
| }; | ||
|
|
||
| export default world_Icon; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,213 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import Layout from '@/components/Layout'; | ||
| import CloseIcon from '@/icons/close_icon'; | ||
| import LocationIcon from '@/icons/LocationIcon'; | ||
| import SearchIcon from '@/icons/Common/search_md.svg'; | ||
|
|
||
| const TabSelector = ({ selectedTab, setSelectedTab }) => { | ||
| return ( | ||
| <div className='mt-6'> | ||
| <div className='flex flex-row justify-center items-center bg-secondary-neutral-light-25 rounded-md border border-secondary-neutral-light-50 p-1'> | ||
| <div | ||
| onClick={() => setSelectedTab('locations')} | ||
| className={`px-3 py-2 flex justify-center items-center w-full hover:cursor-pointer text-sm font-medium text-secondary-neutral-light-600${ | ||
| selectedTab === 'locations' ? 'border rounded-md bg-white shadow-sm' : '' | ||
| }`}> | ||
| Locations | ||
| </div> | ||
| <div | ||
| onClick={() => setSelectedTab('sites')} | ||
| className={`px-3 py-2 flex justify-center items-center w-full hover:cursor-pointer text-sm font-medium text-secondary-neutral-light-600${ | ||
| selectedTab === 'sites' ? 'border rounded-md bg-white shadow-sm' : '' | ||
| }`}> | ||
| Sites | ||
| </div> | ||
| <div | ||
| onClick={() => setSelectedTab('airqlouds')} | ||
| className={`px-3 py-2 flex justify-center items-center w-full hover:cursor-pointer text-sm font-medium text-secondary-neutral-light-600${ | ||
| selectedTab === 'airqlouds' ? 'border rounded-md bg-white shadow-sm' : '' | ||
| }`}> | ||
| AirQlouds | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const SearchField = () => { | ||
| return ( | ||
| <div className='w-full flex flex-row items-center justify-start'> | ||
| <div className='flex items-center justify-center pl-3 bg-white border h-12 rounded-lg rounded-r-none border-r-0 border-input-light-outline focus:border-input-light-outline'> | ||
| <SearchIcon /> | ||
| </div> | ||
| <input | ||
| placeholder='Search Villages, Cities or Country' | ||
| className='input text-sm text-secondary-neutral-light-800 w-full h-12 ml-0 rounded-lg bg-white border-l-0 rounded-l-none border-input-light-outline focus:border-input-light-outline' | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const index = () => { | ||
| const [location, setLocation] = useState(); | ||
| const [showSideBar, setShowSideBar] = useState(true); | ||
| const [selectedTab, setSelectedTab] = useState('locations'); | ||
|
|
||
| useEffect(() => { | ||
| const handleResize = () => { | ||
| if (window.innerWidth < 768) { | ||
| setShowSideBar(false); | ||
| } else { | ||
| setShowSideBar(true); | ||
| } | ||
| }; | ||
| window.addEventListener('resize', handleResize); | ||
| handleResize(); | ||
| return () => window.removeEventListener('resize', handleResize); | ||
| }, []); | ||
|
|
||
| const handleSelectedTab = (tab) => { | ||
| setSelectedTab(tab); | ||
| }; | ||
|
|
||
| const handleLocationSelect = () => { | ||
| setLocation(); | ||
| }; | ||
|
|
||
| const locations = [ | ||
| { | ||
| id: 1, | ||
| name: 'Kampala', | ||
| country: 'Central, Uganda', | ||
| }, | ||
| { | ||
| id: 2, | ||
| name: 'Nairobi', | ||
| country: 'Central, Kenya', | ||
| }, | ||
| { | ||
| id: 3, | ||
| name: 'kiambu', | ||
| country: 'Eastern, Kenya', | ||
| }, | ||
| { | ||
| id: 4, | ||
| name: 'Kitgum', | ||
| country: 'Northern, Uganda', | ||
| }, | ||
| { | ||
| id: 5, | ||
| name: 'Kigaali', | ||
| country: 'Central, Rwanda', | ||
| }, | ||
| ]; | ||
|
|
||
| const countries = [ | ||
| { | ||
| id: 1, | ||
| name: 'Uganda', | ||
| flag: null, | ||
| }, | ||
| { | ||
| id: 2, | ||
| name: 'Kenya', | ||
| flag: null, | ||
| }, | ||
| { | ||
| id: 3, | ||
| name: 'Nigeria', | ||
| flag: null, | ||
| }, | ||
| { | ||
| id: 4, | ||
| name: 'Rwanda', | ||
| flag: null, | ||
| }, | ||
| { | ||
| id: 5, | ||
| name: 'Tanzania', | ||
| flag: null, | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <Layout pageTitle='AirQo Map' noTopNav={false}> | ||
| <div className='relative flex w-full h-full'> | ||
| {showSideBar && ( | ||
| <div className='w-[280px] md:w-[400px] bg-white shadow-lg shadow-right space-y-4'> | ||
| <div className='px-4 pt-4'> | ||
| <div className='w-full flex justify-between items-center'> | ||
| <div> | ||
| <label className='font-medium text-xl'>Map</label> | ||
| </div> | ||
| <button | ||
| className='p-2 border rounded-xl hover:bg-gray-100' | ||
| onClick={() => setShowSideBar(!showSideBar)}> | ||
| <CloseIcon width={15} height={15} fill={'#6F87A1'} /> | ||
| </button> | ||
| </div> | ||
| <p className='text-gray-500 text-sm font-normal w-auto md:w-[316.681px;] mt-6'> | ||
| Navigate, Explore, and Understand Air Quality Data with Precision, Right Down to | ||
| Your Neighborhood | ||
| </p> | ||
| <TabSelector selectedTab={selectedTab} setSelectedTab={handleSelectedTab} /> | ||
| </div> | ||
| <hr /> | ||
| <div className='px-4 space-y-4'> | ||
| <SearchField /> | ||
|
|
||
| <div className='flex justify-between items-center'> | ||
| <button className='px-4 py-2 rounded-full bg-blue-500 text-white'>All</button> | ||
| <div className='flex space-x-4 overflow-x-auto custom-scrollbar ml-4'> | ||
| {countries.map((country) => ( | ||
| <div className='flex items-center rounded-full bg-gray-100 p-2 space-x-2'> | ||
| {/* flags */} | ||
| <span>{country.name}</span> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| <div className='space-y-2'> | ||
| <label className='font-medium text-gray-600 text-sm'>Suggestions</label> | ||
| <hr /> | ||
| <div className='overflow-y-auto'> | ||
| {locations.map((location) => ( | ||
| <div | ||
| className='flex flex-row justify-start items-center mb-0.5 text-sm w-full hover:cursor-pointer hover:bg-blue-100 p-2 rounded-lg' | ||
| onClick={() => { | ||
| handleLocationSelect(); | ||
| }}> | ||
| <div className='p-2 rounded-full bg-gray-100'> | ||
| <LocationIcon /> | ||
| </div> | ||
| <div className='ml-3 flex flex-col item-start border-b w-full'> | ||
| <span className=' font-normal text-black capitalize text-lg'> | ||
| {location.name} | ||
| </span> | ||
| <span className='font-normal text-gray-500 capitalize text-sm'> | ||
| {location.country} | ||
| </span> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| <hr /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| )} | ||
| <div className='relative p-4 h-[100vh] flex-grow'> | ||
| {!showSideBar && ( | ||
| <button | ||
| className='absolute top-4 left-4 text-red-400' | ||
| onClick={() => setShowSideBar(!showSideBar)}> | ||
| open | ||
| </button> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </Layout> | ||
| ); | ||
| }; | ||
|
|
||
| export default index; |