🚀 新規事業
placeholder-page
最終更新 2026年05月09日 / 40_新規事業/SCALE_Build/カタログ/機能集/placeholder-page.md
プレースホルダーページ
用途
実装前のページに表示する「準備中」ページコンポーネント。
特徴
- アイコン表示
- メッセージカスタム
- 戻るリンク
実コード(SCALE Base より自動抽出)
components/ui/PlaceholderPage.tsxの中身そのもの。コピペ即可。
'use client';
import { Construction } from 'lucide-react';
export default function PlaceholderPage({ title, system }: { title: string; system: string }) {
return (
<div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
<div className="w-16 h-16 rounded-2xl bg-bg3 flex items-center justify-center mb-4">
<Construction className="w-8 h-8 text-text3" />
</div>
<h1 className="text-xl font-bold text-text mb-2">{title}</h1>
<p className="text-sm text-text2">{system} - このページは移植準備中です</p>
</div>
);
}
ソースファイルのパス
/Users/oogushiyuuki/Library/CloudStorage/GoogleDrive-y-ogushi@scale-group.co.jp/マイドライブ/AI/scale-base/components/ui/PlaceholderPage.tsx
使い方
対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。
注意事項
- 依存パッケージを忘れず追加