ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat: separate map into its own tab in Locations component

Browse Source
This commit is contained in:
Usman Baig
2026-01-16 20:15:09 +01:00
parent 834108f8d4
commit 5c30e53617
1 changed files with 29 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/dashboard/Countries.tsx
View File

@@ -10,7 +10,7 @@ interface LocationProps {
cities: Array<{ city: string; country: string; pageviews: number }> cities: Array<{ city: string; country: string; pageviews: number }>
} }
type Tab = 'countries' | 'cities' type Tab = 'map' | 'countries' | 'cities'
export default function Locations({ countries, cities }: LocationProps) { export default function Locations({ countries, cities }: LocationProps) {
const [activeTab, setActiveTab] = useState<Tab>('countries') const [activeTab, setActiveTab] = useState<Tab>('countries')
@@ -34,26 +34,30 @@ export default function Locations({ countries, cities }: LocationProps) {
} }
const renderContent = () => { const renderContent = () => {
if (activeTab === 'map') {
if (!countries || countries.length === 0) {
return <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
}
return <WorldMap data={countries} />
}
if (activeTab === 'countries') { if (activeTab === 'countries') {
if (!countries || countries.length === 0) { if (!countries || countries.length === 0) {
return <p className="text-neutral-600 dark:text-neutral-400">No data available</p> return <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
} }
return ( return (
<div className="space-y-4"> <div className="space-y-3">
<WorldMap data={countries} /> {countries.map((country, index) => (
<div className="space-y-3"> <div key={index} className="flex items-center justify-between">
{countries.map((country, index) => ( <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
<div key={index} className="flex items-center justify-between"> <span className="shrink-0">{getFlagComponent(country.country)}</span>
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3"> <span className="truncate">{getCountryName(country.country)}</span>
<span className="shrink-0">{getFlagComponent(country.country)}</span>
<span className="truncate">{getCountryName(country.country)}</span>
</div>
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
{formatNumber(country.pageviews)}
</div>
</div> </div>
))} <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
</div> {formatNumber(country.pageviews)}
</div>
</div>
))}
</div> </div>
) )
} }
@@ -87,6 +91,16 @@ export default function Locations({ countries, cities }: LocationProps) {
Locations Locations
</h3> </h3>
<div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg"> <div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
<button
onClick={() => setActiveTab('map')}
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
activeTab === 'map'
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
}`}
>
Map
</button>
<button <button
onClick={() => setActiveTab('countries')} onClick={() => setActiveTab('countries')}
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${ className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${