🚀 新規事業

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 を流し込むだけ。

注意事項

  • 依存パッケージを忘れず追加