56 lines
2.3 KiB
TypeScript
56 lines
2.3 KiB
TypeScript
|
|
|||
|
|
import React, { useState } from 'react';
|
|||
|
|
import { Building, DomaApplication } from '../../types';
|
|||
|
|
import { PerformanceCard } from './PerformanceCard';
|
|||
|
|
import { Search, Filter } from 'lucide-react';
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
buildings: Building[];
|
|||
|
|
applications: DomaApplication[];
|
|||
|
|
onSelectBuilding: (b: Building) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const BuildingsRegistry: React.FC<Props> = ({ buildings, applications, onSelectBuilding }) => {
|
|||
|
|
const [search, setSearch] = useState('');
|
|||
|
|
|
|||
|
|
const filtered = buildings.filter(b =>
|
|||
|
|
b.passport.address.toLowerCase().includes(search.toLowerCase())
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const getAppsForBuilding = (building: Building) => {
|
|||
|
|
return applications.filter(app => app.address === building.passport.address);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-4 animate-fade-in">
|
|||
|
|
<div className="flex gap-4">
|
|||
|
|
<div className="relative flex-1">
|
|||
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
placeholder="Поиск по адресу дома..."
|
|||
|
|
value={search}
|
|||
|
|
onChange={e => setSearch(e.target.value)}
|
|||
|
|
className="w-full pl-9 pr-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 shadow-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<button className="p-2.5 bg-white border border-slate-200 rounded-xl text-slate-500"><Filter className="w-5 h-5"/></button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 gap-3">
|
|||
|
|
{filtered.map(b => (
|
|||
|
|
<PerformanceCard
|
|||
|
|
key={b.id}
|
|||
|
|
title={b.passport.address}
|
|||
|
|
subtitle={`${b.passport.general.floors} эт. • ${b.passport.general.totalArea} м²`}
|
|||
|
|
applications={getAppsForBuilding(b)}
|
|||
|
|
onClick={() => onSelectBuilding(b)}
|
|||
|
|
type="building"
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
{filtered.length === 0 && <p className="py-10 text-center text-slate-400 text-sm">Дома не найдены</p>}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|