プレースホルダーページ
: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: 注意事項
- 依存パッケージを忘れず追加