SCALE — Build Lab
UI部品 · REACT COMPONENT

プレースホルダーページ

CATEGORYUI部品 TYPEReact Component EFFORT15〜30分 DIFFICULTY
PRIMARY CODE
tsx · 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>
  );
}

前提条件
Tailwind CSS v4TypeScript 5
USE CASES
  • 新規ページ作成時の仮置き

プレースホルダーページ

:LiTarget: 用途

実装前のページに表示する「準備中」ページコンポーネント。

:LiSparkle: 特徴

  • アイコン表示
  • メッセージカスタム
  • 戻るリンク

:LiCode: 実コード(SCALE Base より自動抽出)

:LiInfo: 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>
  );
}

:LiFolder: ソースファイルのパス

/Users/oogushiyuuki/Library/CloudStorage/GoogleDrive-y-ogushi@scale-group.co.jp/マイドライブ/AI/scale-base/components/ui/PlaceholderPage.tsx

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

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