wehub-resource-sync
46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { IcClose } from '../res/icons';
|
|
import { useMapGestures } from '../hooks/useMapGestures';
|
|
import { useMapStrings } from '../hooks/useMapStrings';
|
|
|
|
export const GettingAroundPage: React.FC = () => {
|
|
const { bindBack } = useMapGestures();
|
|
const s = useMapStrings();
|
|
const items = [
|
|
{ title: s.getting_around_commute, subtitle: s.getting_around_commute_desc },
|
|
{ title: s.getting_around_walking, subtitle: s.getting_around_walking_desc },
|
|
{ title: s.getting_around_transit, subtitle: s.getting_around_transit_desc },
|
|
{ title: s.getting_around_rideshare, subtitle: s.getting_around_rideshare_desc },
|
|
{ title: s.getting_around_cycling, subtitle: s.getting_around_cycling_desc },
|
|
];
|
|
|
|
return (
|
|
<div className="font-sans flex flex-col h-full bg-app-surface">
|
|
<div className="flex justify-between items-center px-4 pt-12 pb-4 bg-app-surface border-b border-gray-100 shadow-sm z-10">
|
|
<div className="text-[28px] font-bold text-gray-900">{s.getting_around_title}</div>
|
|
<button
|
|
type="button"
|
|
{...bindBack()}
|
|
className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center"
|
|
>
|
|
<IcClose size={20} className="text-gray-600" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto no-scrollbar px-6 pb-8">
|
|
{items.map((item) => (
|
|
<div
|
|
key={item.title}
|
|
className="py-4 border-b border-gray-100 active:bg-gray-50 -mx-4 px-4"
|
|
>
|
|
<div className="text-[17px] font-bold text-gray-900 mb-1">{item.title}</div>
|
|
<div className="text-[15px] text-app-text-muted">{item.subtitle}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GettingAroundPage;
|