Skip to content

Commit

Permalink
Add ConfigSoonWrapper
Browse files Browse the repository at this point in the history
  • Loading branch information
micorix committed Mar 25, 2023
1 parent cd952f4 commit c3e493d
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 41 deletions.
14 changes: 14 additions & 0 deletions src/components/app/ComingSoonWrapper.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
const ComingSoonWrapper = ({ children }) => (
<div className="border border rounded">
<div className="border-b p-1 bg-gray-100">{children}</div>
<div className="p-1">
<span className="bg-primaryBg px-2 py-1 rounded-3xl">Dostępne wkrótce!</span>
<small className="block mt-1 italic">
Działanie tego widżetu w wersji beta aplikacji może być chwilowo ograniczone lub może dawać
on błędne rezultaty.
</small>
</div>
</div>
);

export default ComingSoonWrapper;
37 changes: 20 additions & 17 deletions src/components/app/MapSearchPage/filters/PublicTransportFilter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { MdTrain } from '@react-icons/all-files/md/MdTrain';
import { MdTram } from '@react-icons/all-files/md/MdTram';
import { MdSubway } from '@react-icons/all-files/md/MdSubway';
import { toggleElementInArray } from '../../../../utils/misc';
import ComingSoonWrapper from '../../ComingSoonWrapper';

const stationTypes = [
{
Expand Down Expand Up @@ -42,23 +43,25 @@ const PublicTransportFilter: FC<FilterProps<string[]>> = ({ value, setValue }) =

return (
<CollapsibleFilterWrapper title="Komunikacja miejska">
<span className="mb-1 block">{'<'}500m od szkoły znajduje się:</span>
<ul>
{stationTypes.map(({ name, id, icon: Icon }) => (
<li>
<label className="flex items-center">
<input
type="checkbox"
onChange={() => handleChange(id)}
checked={value.includes(id)}
className="bg-primary focus:ring-primary rounded"
/>
<Icon className="mx-1" />
<span className="">{name}</span>
</label>
</li>
))}
</ul>
<ComingSoonWrapper>
<span className="mb-1 block">{'<'}500m od szkoły znajduje się:</span>
<ul>
{stationTypes.map(({ name, id, icon: Icon }) => (
<li>
<label className="flex items-center">
<input
type="checkbox"
onChange={() => handleChange(id)}
checked={value.includes(id)}
className="bg-primary focus:ring-primary rounded"
/>
<Icon className="mx-1" />
<span className="">{name}</span>
</label>
</li>
))}
</ul>
</ComingSoonWrapper>
</CollapsibleFilterWrapper>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
import { ChangeEventHandler, FC, useEffect, useState } from 'react';
import { FilterProps } from './types';
import CollapsibleFilterWrapper from './CollapsibleFilterWrapper';
import Link from 'next/link';
import { AiOutlineWarning } from '@react-icons/all-files/ai/AiOutlineWarning';
import { getTrackBackground, Range } from 'react-range';
import { IRenderThumbParams, IRenderTrackParams } from 'react-range/lib/types';
import ComingSoonWrapper from '../../ComingSoonWrapper';

const RecruitmentPointsAlert = () => (
<span
role="alert"
className="bg-yellow-100 border-l-4 border-yellow-600 p-1 rounded block text-sm"
>
<AiOutlineWarning className="inline-block text-xl text-yellow-600" /> Progi punktowe zmieniają
się co roku i zależą od wielu czynników.{' '}
<Link href="/">
<a className="underline">Dowiedz się więcej</a>
</Link>
<AiOutlineWarning className="inline-block text-xl text-yellow-600" />
Progi punktowe zmieniają się co roku i zależą od wielu czynników.
</span>
);

Expand Down Expand Up @@ -68,23 +65,33 @@ const RecruitmentPointsFilter: FC<FilterProps<[number, number]>> = ({ value, set

return (
<CollapsibleFilterWrapper title="Najniższy próg punktowy">
<RecruitmentPointsAlert />
<div className="mt-2 flex items-center">
<input className={inputClassName} onChange={createInputChangeHandler(0)} value={range[0]} />
<div className="px-2 w-full">
<Range
step={1}
min={MIN}
max={MAX}
values={range}
onChange={setRange}
onFinalChange={handleFinalChange}
renderTrack={createTrackRenderer(range)}
renderThumb={renderThumb}
<ComingSoonWrapper>
<RecruitmentPointsAlert />
<div className="mt-2 flex items-center">
<input
className={inputClassName}
onChange={createInputChangeHandler(0)}
value={range[0]}
/>
<div className="px-2 w-full">
<Range
step={1}
min={MIN}
max={MAX}
values={range}
onChange={setRange}
onFinalChange={handleFinalChange}
renderTrack={createTrackRenderer(range)}
renderThumb={renderThumb}
/>
</div>
<input
className={inputClassName}
onChange={createInputChangeHandler(1)}
value={range[1]}
/>
</div>
<input className={inputClassName} onChange={createInputChangeHandler(1)} value={range[1]} />
</div>
</ComingSoonWrapper>
</CollapsibleFilterWrapper>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,17 @@ import { FilterProps } from './types';
import WarsawDistrictsMap from '../../../../assets/app/svg/WarsawDistrictsMap';
import styles from './styles/WarsawDistrictsFilter.module.css';
import CollapsibleFilterWrapper from './CollapsibleFilterWrapper';
import ComingSoonWrapper from '../../ComingSoonWrapper';

const WarsawDistrictsFilter: FC<FilterProps<string[]>> = () => {
return (
<CollapsibleFilterWrapper title="Dzielnica">
<div>
<div className="h-72">
<WarsawDistrictsMap className={styles.districtsMap} />
</div>
<ComingSoonWrapper>
<div className="h-72">
<WarsawDistrictsMap className={styles.districtsMap} />
</div>
</ComingSoonWrapper>
</div>
</CollapsibleFilterWrapper>
);
Expand Down

0 comments on commit c3e493d

Please sign in to comment.