53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import { useMemo } from 'react';
|
|
import type { FeatureFilters } from '../../types';
|
|
import {
|
|
buildPropertySearchUrls,
|
|
H3_RADIUS_MILES,
|
|
type HexagonLocation,
|
|
} from '../../lib/external-search';
|
|
|
|
export default function ExternalSearchLinks({
|
|
location,
|
|
filters,
|
|
}: {
|
|
location: HexagonLocation;
|
|
filters: FeatureFilters;
|
|
}) {
|
|
const urls = useMemo(() => buildPropertySearchUrls(location, filters), [location, filters]);
|
|
const radiusMiles = H3_RADIUS_MILES[location.resolution] ?? 1;
|
|
const label = `${radiusMiles}mi radius`;
|
|
|
|
return (
|
|
<div className="p-3 border-b border-warm-200 dark:border-navy-700">
|
|
<h3 className="text-xs font-semibold text-warm-500 dark:text-warm-400 uppercase tracking-wider mb-2">
|
|
Search {label} on
|
|
</h3>
|
|
<div className="flex gap-2">
|
|
<a
|
|
href={urls.rightmove}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex-1 text-center text-xs py-1.5 px-2 rounded border border-warm-200 dark:border-warm-700 bg-white dark:bg-warm-800 text-teal-600 dark:text-teal-400 hover:bg-warm-50 dark:hover:bg-warm-700 font-medium"
|
|
>
|
|
Rightmove
|
|
</a>
|
|
<a
|
|
href={urls.onthemarket}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex-1 text-center text-xs py-1.5 px-2 rounded border border-warm-200 dark:border-warm-700 bg-white dark:bg-warm-800 text-teal-600 dark:text-teal-400 hover:bg-warm-50 dark:hover:bg-warm-700 font-medium"
|
|
>
|
|
OnTheMarket
|
|
</a>
|
|
<a
|
|
href={urls.zoopla}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex-1 text-center text-xs py-1.5 px-2 rounded border border-warm-200 dark:border-warm-700 bg-white dark:bg-warm-800 text-teal-600 dark:text-teal-400 hover:bg-warm-50 dark:hover:bg-warm-700 font-medium"
|
|
>
|
|
Zoopla
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|