56 lines
2.3 KiB
TypeScript
Executable File
56 lines
2.3 KiB
TypeScript
Executable File
|
||
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>
|
||
);
|
||
};
|