// Skrrs portal — Columns (コラム) and News (お知らせ): list + article views. const { Button: CBtn, Badge: CBadge, Tag: CTag } = window.SkrrsDesignSystem_6013e8; // ── Columns list ──────────────────────────────────────────── const COL_KEYWORDS = ['オフィス移転','賃料相場','原状回復','居抜き','フリーレント','商圏分析','床荷重','用途地域','初期費用','ハイブリッドワーク']; function ColumnsScreen({ onNav, onOpenColumn }) { const D = window.SKRRS_DATA; const { isMobile, isTablet } = window.useViewport(); const [cat, setCat] = React.useState('all'); const cats = [['all','すべて'],['office','オフィス'],['retail','店舗'],['rnd','教室'],['industrial','倉庫'],['datacenter','工場']]; const all = D.columns; const featured = all[0]; const list = all.filter(c => cat==='all' || c.tone===cat).filter(c => c.id !== featured.id || cat!=='all'); const cols = isMobile?1:isTablet?2:2; const ranking = all.slice(0,5); // ── sidebar widgets ── const Sidebar = ( ); return (
{/* ── Featured / pick up ── */} {cat==='all' && ( onOpenColumn(featured)} style={{ cursor:'pointer', display:'grid', gridTemplateColumns: isMobile?'1fr':'1.15fr 1fr', gap:0, marginBottom:'var(--sp-10)', borderRadius:'var(--r-xl)', overflow:'hidden', border:'1px solid var(--border-subtle)', boxShadow:'var(--shadow-md)', background:'var(--surface)' }}>
PICK UP
{featured.cat} {featured.date} {featured.read}

{featured.title}

{featured.excerpt}

続きを読む
)} {/* ── category tabs ── */}
{cats.map(([k,l])=>(setCat(k)}>{l}))}
{/* ── main grid + sidebar ── */}
{list.map(c=>( onOpenColumn(c)} style={{ cursor:'pointer', display:'flex', flexDirection:'column', minWidth:0, background:'var(--surface)', border:'1px solid var(--border-subtle)', borderRadius:'var(--r-md)', overflow:'hidden', boxShadow:'var(--shadow-sm)' }}>
{c.cat} {c.date} {c.read}

{c.title}

{c.excerpt}

続きを読む
))}
{Sidebar}
); } // ── Column article ────────────────────────────────────────── function ColumnArticle({ column, onNav, onOpenColumn }) { const D = window.SKRRS_DATA; const c = column || D.columns[0]; const { isMobile } = window.useViewport(); const more = D.columns.filter(x=>x.id!==c.id).slice(0,3); return (
{c.cat} {c.date} {c.read} {c.author}

{c.excerpt}

{(c.body||[]).map((para,i)=>(

{para}

))}
物件探し・移転のご相談はSkrrsへ

経験豊富な仲介のプロが、あなたの立場で最適なご提案をします。

} onClick={()=>onNav('contact')}>無料で相談する
} onClick={()=>onNav('columns')}>コラム一覧へ戻る

関連記事

{more.map(m=>( onOpenColumn(m)} style={{ cursor:'pointer', display:'flex', flexDirection:'column', background:'var(--surface)', border:'1px solid var(--border-subtle)', borderRadius:'var(--r-md)', overflow:'hidden', boxShadow:'var(--shadow-sm)' }}>
{m.cat} {m.title}
))}
); } // ── News list ─────────────────────────────────────────────── function NewsScreen({ onNav, onOpenNews }) { const D = window.SKRRS_DATA; const { isMobile } = window.useViewport(); return (
{D.news.map((n,i)=>( onOpenNews(n)} style={{ cursor:'pointer', display:'flex', gap:16, alignItems:'flex-start', padding:'var(--sp-5)', borderBottom: i {n.date} {n.tag} {n.text} ))}
); } // ── News article ──────────────────────────────────────────── function NewsArticle({ item, onNav }) { const D = window.SKRRS_DATA; const n = item || D.news[0]; return (
{n.tag} {n.date}

{n.body}

} onClick={()=>onNav('news')}>お知らせ一覧へ戻る
); } Object.assign(window, { ColumnsScreen, ColumnArticle, NewsScreen, NewsArticle });