料金プランテーブル

:LiTarget: 用途

3〜4プラン横並びの料金表。「人気」バッジ・差分強調・年払いトグル付き。

:LiSparkle: 特徴

• プランカード
• 差分強調
• 年払いトグル
• 人気バッジ
• CTAボタン

:LiCode: コード（コピペ用）

'use client';
import { useState } from 'react';

const plans = [
  { id: 'lite', name: 'Lite', monthly: 980, yearly: 9800, features: ['1ユーザー', '基本機能のみ'] },
  { id: 'pro', name: 'Pro', monthly: 2980, yearly: 29800, popular: true, features: ['10ユーザー', '全機能', 'API'] },
  { id: 'enterprise', name: 'Enterprise', monthly: 9800, yearly: 98000, features: ['無制限', 'SSO', 'SLA'] },
];

export function PricingTable() {
  const [yearly, setYearly] = useState(false);
  return (
    <>
      <button onClick={() => setYearly(!yearly)}>{yearly ? '月払い' : '年払い（2ヶ月無料）'}</button>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {plans.map(p => (
          <div key={p.id} style={{ border: p.popular ? '2px solid gold' : '1px solid #333', padding: 24 }}>
            {p.popular && <span>★人気</span>}
            <h3>{p.name}</h3>
            <p>¥{(yearly ? p.yearly : p.monthly).toLocaleString()} / {yearly ? '年' : '月'}</p>
            <ul>{p.features.map(f => <li key={f}>{f}</li>)}</ul>
            <button>選ぶ</button>
          </div>
        ))}
      </div>
    </>
  );
}

:LiHandPointer: 使い方

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

:LiAlertCircle: 注意事項

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