// Skrrs portal — Search results. Responsive. const { PropertyCard: SPCard, Button: SButton, Select: SSelect, Tag: STag, Checkbox: SCheck, Badge: SBg } = window.SkrrsDesignSystem_6013e8; const TYPE_TABS = [ { key:'all', label:'すべて' }, { key:'office', label:'オフィス' }, { key:'retail', label:'店舗' }, { key:'rnd', label:'教室' }, { key:'industrial', label:'倉庫' }, { key:'datacenter', label:'工場' }, ]; const FEATURE_FILTERS = ['仲介手数料0円','居抜き・セットアップ','NEW物件','駐車場あり','24時間利用可','電力増設可']; function SearchScreen({ initialType = 'all', saved, onToggleSave, onOpen, onNav }) { const D = window.SKRRS_DATA; const { isMobile, isTablet } = window.useViewport(); const [type, setType] = React.useState(initialType); const [feat, setFeat] = React.useState({}); const [sort, setSort] = React.useState('new'); const [showFilters, setShowFilters] = React.useState(false); React.useEffect(()=>{ setType(initialType); }, [initialType]); const list = D.properties.filter(p => type === 'all' || p.type === type); const cols = isMobile ? 2 : isTablet ? 2 : 3; const FilterPanel = (
絞り込み条件
賃料（坪単価）
〜
こだわり条件 {['駐車場あり','24時間利用可','OAフロア','分割可'].map(c=>( setFeat(f=>({...f,[c]:!f[c]}))} /> ))}
}>この条件で検索
); return (
{/* breadcrumb + title */}
onNav('home')}>ホーム 賃貸物件を探す

賃貸物件 検索結果

{list.length} 件
{/* type tabs */}
{TYPE_TABS.map(t=>{ const on = type===t.key; return ( ); })}
{/* 非公開物件バナー（表示件数の外に希少在庫がある＝問い合わせ動機） */}
Web掲載のほかに、非公開物件が {(window.SKRRS_DATA.privateListings||{}).count||'500'} 件以上。 条件に合う希少物件は、担当エージェントより個別にご案内します。まずはご希望条件をお聞かせください。
} onClick={()=>onNav('contact')}>非公開物件を相談する
{/* ── Filter rail ── */} {isMobile ? (
} onClick={()=>setShowFilters(v=>!v)}> 絞り込み条件{showFilters?'を閉じる':'を開く'} {showFilters &&
{FilterPanel}
}
) : ( )} {/* ── Results ── */}
{FEATURE_FILTERS.map(f=>( setFeat(s=>({...s,[f]:!s[f]}))}>{f} ))}
並び替え
setSort(e.target.value)} options={[{value:'new',label:'新着順'},{value:'low',label:'賃料が安い順'},{value:'high',label:'賃料が高い順'},{value:'size',label:'面積が広い順'}]} />
{list.map(p=>{ const n = parseFloat(p.size); const cap = n ? `${Math.max(2,Math.round(n*0.4))}〜${Math.round(n*0.6)}名` : null; const specRow = (icon,label,val,wrap)=>(
{label && {label}} {val}
); return (
{/* photo + badges */}
onOpen(p)}>
{p.typeLabel} {p.isNew && NEW}
{/* body */}

onOpen(p)} style={{ margin:0, cursor:'pointer', font:`var(--fw-bold) ${isMobile?'var(--t-base)':'var(--t-h4)'}/1.4 var(--font-display)`, color:'var(--blue-900)', display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical', overflow:'hidden' }}>{p.name}

{specRow('pin','', p.area, true)} {specRow('train','', p.access, true)}
{specRow('ruler','面積', p.size)} {cap && specRow('users','人数', cap)}
{p.rent}
{p.zeroCommission &&
仲介手数料0円
}
onOpen(p)}>詳細を見る {!isMobile && } onClick={()=>onNav('contact')}>相談}
); })}
{[1,2,3,4,5].map(n=>({n}))}
); } function PageBtn({ children, active, disabled }) { return ( ); } Object.assign(window, { SearchScreen });