andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Fix navigation

Browse source
This commit is contained in:
Andras Schmelczer 2026-03-08 21:12:08 +00:00
parent 72653a4ddf
commit 5f30928c64
3 changed files with 65 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

39
frontend/src/components/learn/LearnPage.tsx
View file

@ -1,8 +1,15 @@
import { useEffect, useState, useRef } from 'react';
import { ChevronIcon } from '../ui/icons/ChevronIcon';
import { SubNav } from '../ui/SubNav';
type LearnTab = 'data-sources' | 'faq' | 'support';
const LEARN_TABS = [
{ key: 'faq', label: 'FAQ' },
{ key: 'data-sources', label: 'Data Sources' },
{ key: 'support', label: 'Support' },
];
const DATA_SOURCES = [
{
id: 'price-paid',
@ -288,36 +295,20 @@ export default function LearnPage() {
scrollContainerRef.current?.scrollTo(0, 0);
}, [tab]);
const tabClass = (t: LearnTab) =>
`px-4 py-2 text-sm font-medium rounded-t border-b-2 ${tab === t
? 'border-teal-500 text-teal-700 dark:text-teal-400'
: 'border-transparent text-warm-500 dark:text-warm-400 hover:text-warm-700 dark:hover:text-warm-300'
}`;
const switchTab = (key: string) => {
setTab(key as LearnTab);
setHighlightedId(null);
};
return (
<div className="flex-1 overflow-hidden bg-warm-50 dark:bg-navy-950 flex flex-col">
<div className="max-w-5xl mx-auto w-full px-6 pt-6">
<div className="flex gap-2 border-b border-warm-200 dark:border-warm-700">
<button className={tabClass('faq')} onClick={() => setTab('faq')}>
FAQ
</button>
<button className={tabClass('data-sources')} onClick={() => setTab('data-sources')}>
Data Sources
</button>
<button className={tabClass('support')} onClick={() => setTab('support')}>
Support
</button>
</div>
</div>
<SubNav tabs={LEARN_TABS} activeTab={tab} onTabChange={switchTab} />
<div className="flex-1 overflow-y-auto flex flex-col" ref={scrollContainerRef}>
{tab === 'data-sources' ? (
<>
<div className="flex-1">
<div className="max-w-5xl mx-auto px-6 py-6">
<h1 className="text-2xl font-bold text-warm-900 dark:text-warm-100 mb-2">
Data Sources
</h1>
<p className="text-warm-600 dark:text-warm-400 mb-6">
This application combines {DATA_SOURCES.length} open datasets covering property
prices, energy performance, transport, demographics, crime, environment, and more.
@ -423,9 +414,6 @@ export default function LearnPage() {
</>
) : tab === 'faq' ? (
<div className="max-w-3xl mx-auto px-6 py-6 w-full">
<h1 className="text-2xl font-bold text-warm-900 dark:text-warm-100 mb-2">
Frequently Asked Questions
</h1>
<p className="text-warm-600 dark:text-warm-400 mb-6">
Common questions about how Perfect Postcode works, where the data comes from, and how
to use the map.
@ -438,9 +426,6 @@ export default function LearnPage() {
</div>
) : (
<div className="max-w-2xl mx-auto px-6 py-6 w-full">
<h1 className="text-2xl font-bold text-warm-900 dark:text-warm-100 mb-2">
Support
</h1>
<p className="text-warm-600 dark:text-warm-400 mb-6">
Have a question? Check our FAQ or reach out to us directly.
</p>