Meritsブロック

Meritsコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルなメリット/ベネフィット表示ブロックです。企業のメリット、ベネフィット、または機能を紹介するための完全なインターフェースを、モダンなデザインパターン、柔軟なカスタマイズオプション、レスポンシブレイアウトとともに提供します。

---

🚀 インストール

npm install @nodeblocks/frontend-merits-block

---

📖 使用法

import {Merits} from '@nodeblocks/frontend-merits-block';

基本的な使用法

ライブエディター

function BasicMerits() {
  const meritsData = [
    {
      imageUrl: '/img/undraw_docusaurus_mountain.svg',
      text: '迅速な配送',
      subtext: '注文を迅速かつ効率的にお届けします'
    },
    {
      imageUrl: '/img/undraw_docusaurus_react.svg',
      text: '品質保証',
      subtext: 'すべての製品で最高品質を保証します'
    },
    {
      imageUrl: '/img/undraw_docusaurus_tree.svg',
      text: '24時間サポート',
      subtext: 'あらゆるニーズに対応する24時間体制のカスタマーサポート'
    }
  ];

  return (
    <Merits
      subtitle="なぜ私たちを選ぶのか"
      meritsTitle="私たちの主要なベネフィット"
      buttonText="詳細を見る"
      buttonHref="#about"
      items={meritsData}
      style={{backgroundColor: 'white', padding: '16px'}}>
      <Merits.Header />
      <Merits.Content />
      <Merits.ActionBar />
    </Merits>
  );
}

結果

Loading...

高度な使用法

ライブエディター

function AdvancedMerits() {
  const meritsData = [
    {
      imageUrl: '/img/undraw_docusaurus_mountain.svg',
      text: '迅速な配送',
      subtext: '注文を迅速かつ効率的にお届けします'
    },
    {
      imageUrl: '/img/undraw_docusaurus_react.svg',
      text: '品質保証',
      subtext: 'すべての製品で最高品質を保証します'
    },
    {
      imageUrl: '/img/undraw_docusaurus_tree.svg',
      text: '24時間サポート',
      subtext: 'あらゆるニーズに対応する24時間体制のカスタマーサポート'
    }
  ];

  return (
    <Merits
      subtitle="なぜ私たちを選ぶのか"
      meritsTitle="私たちの主要なベネフィット"
      buttonText="詳細を見る"
      buttonHref="#about"
      items={meritsData}
      style={{backgroundColor: 'white', padding: '16px'}}>
      {({ defaultBlocks, defaultBlockOrder }) => ({
        blocks: {
          ...defaultBlocks,
          
          // 📋 プロパティオーバーライド付きカスタムヘッダー
          header: {
            ...defaultBlocks.header,
            props: {
              ...defaultBlocks.header.props,
              className: "custom-merits-header",
              style: {
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                padding: '60px 40px',
                borderRadius: '20px',
                color: 'white',
                textAlign: 'center',
                marginBottom: '50px'
              },
              children: (
                <div>
                  <h3 style={{ 
                    fontSize: '1.2rem',
                    fontWeight: '500',
                    marginBottom: '15px',
                    color: 'black'
                  }}>
                    ✨ 卓越性を発見
                  </h3>
                  <h1 style={{ 
                    fontSize: '3rem',
                    fontWeight: 'bold',
                    margin: '0',
                    color: 'black'
                  }}>
                    🚀 比類なきベネフィット
                  </h1>
                </div>
              )
            },
          },
          
          // 🌟 完全なコンポーネントオーバーライド付きリッチコンテンツ
          content: (
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
              gap: '30px',
              padding: '40px 20px'
            }}>
              {[
                { 
                  icon: '⚡', 
                  title: '電光石火',
                  description: '最適化されたインフラストラクチャによる圧倒的なパフォーマンスを体験',
                  color: '#ff6b6b',
                  bgColor: '#fff5f5'
                },
                { 
                  icon: '🔒', 
                  title: '銀行レベルのセキュリティ',
                  description: 'エンタープライズレベルのセキュリティ対策であなたのデータを保護',
                  color: '#4ecdc4',
                  bgColor: '#f0fdfc'
                },
                { 
                  icon: '🎯', 
                  title: '精密分析',
                  description: '高度な分析プラットフォームでデータに基づいた意思決定を実現',
                  color: '#45b7d1',
                  bgColor: '#f0f9ff'
                }
              ].map((merit, index) => (
                <div key={index} style={{
                  backgroundColor: merit.bgColor,
                  padding: '40px',
                  borderRadius: '20px',
                  textAlign: 'center',
                  border: `2px solid ${merit.color}20`,
                  transition: 'all 0.3s ease',
                  cursor: 'pointer'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform = 'translateY(-10px)';
                  e.currentTarget.style.boxShadow = `0 20px 40px ${merit.color}20`;
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = 'none';
                }}>
                  <div style={{
                    fontSize: '4rem',
                    marginBottom: '20px',
                    filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.1))'
                  }}>
                    {merit.icon}
                  </div>
                  <h3 style={{
                    color: merit.color,
                    fontSize: '1.5rem',
                    fontWeight: 'bold',
                    marginBottom: '15px'
                  }}>
                    {merit.title}
                  </h3>
                  <p style={{
                    color: '#666',
                    fontSize: '1rem',
                    lineHeight: '1.6',
                    margin: '0'
                  }}>
                    {merit.description}
                  </p>
                </div>
              ))}
            </div>
          ),
          
          // 🎉 プロパティオーバーライド付きカスタムアクションバー
          actionBar: {
            ...defaultBlocks.actionBar,
            props: {
              ...defaultBlocks.actionBar.props,
              className: "custom-action-bar",
              style: {
                background: 'linear-gradient(45deg, #ff6b6b, #feca57)',
                padding: '40px',
                borderRadius: '20px',
                textAlign: 'center',
                marginTop: '50px'
              },
              children: (
                <div>
                  <h3 style={{
                    color: 'black',
                    fontSize: '1.5rem',
                    fontWeight: 'bold',
                    marginBottom: '20px',
                  }}>
                    🎯 卓越性を体験する準備はできましたか？
                  </h3>
                  <button style={{
                    background: 'white',
                    color: '#ff6b6b',
                    border: 'none',
                    padding: '15px 40px',
                    fontSize: '1.1rem',
                    fontWeight: 'bold',
                    borderRadius: '50px',
                    cursor: 'pointer',
                    boxShadow: '0 8px 20px rgba(0,0,0,0.2)',
                    transition: 'all 0.3s ease'
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.transform = 'translateY(-2px)';
                    e.currentTarget.style.boxShadow = '0 12px 30px rgba(0,0,0,0.3)';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.transform = 'translateY(0)';
                    e.currentTarget.style.boxShadow = '0 8px 20px rgba(0,0,0,0.2)';
                  }}>
                    🚀 今日からあなたの旅を始めよう
                  </button>
                </div>
              )
            },
          },
        },
        blockOrder: defaultBlockOrder,
      })}
    </Merits>
  );
}

結果

Loading...

---

🔧 プロパティリファレンス

メインコンポーネントプロパティ

プロパティ	型	デフォルト	説明
subtitle	ReactNode	必須	メインタイトルの上に表示されるサブタイトルテキスト
meritsTitle	ReactNode	必須	メリットセクションのメインタイトル
buttonText	string	必須	アクションボタンのテキストコンテンツ
buttonHref	string	必須	アクションボタンリンクのURLまたはパス
items	MeritProps[]	必須	表示するメリット項目の配列
className	string	undefined	コンテナのスタイリング用の追加CSSクラス名
children	BlocksOverride	undefined	デフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

注意: メインコンポーネントはすべてのHTML div要素プロパティを継承します。

サブコンポーネント

Meritsコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

Merits.Header

プロパティ	型	デフォルト	説明
children	ReactNode	デフォルトヘッダーコンテンツ	デフォルトヘッダーレンダリングをオーバーライドするカスタムコンテンツ
subtitle	ReactNode	コンテキストから	表示するサブタイトルテキスト（コンテキストのsubtitleをオーバーライド）
meritsTitle	ReactNode	コンテキストから	表示するメインタイトルテキスト（コンテキストのmeritsTitleをオーバーライド）

注意: このコンポーネントはすべてのHTML div要素プロパティを継承します。

Merits.Content

プロパティ	型	デフォルト	説明
children	ReactNode	デフォルトメリット項目	デフォルトメリット項目レンダリングをオーバーライドするカスタムコンテンツ
items	MeritProps[]	コンテキストから	表示するメリット項目の配列（コンテキストのitemsをオーバーライド）

注意: このコンポーネントはすべてのHTML div要素プロパティを継承します。

Merits.Content.MeritImage

プロパティ	型	デフォルト	説明
src	string	undefined	画像のURL
alt	string	undefined	画像の代替テキスト
className	string	undefined	スタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML img要素プロパティを継承します。

Merits.Content.MeritText

プロパティ	型	デフォルト	説明
children	ReactNode	コンテキストから	タイトルコンテンツ - コンテキストのerrorTitleをオーバーライド
size	enum	"2XL"	タイトルのタイポグラフィサイズ
type	enum	"heading"	タイポグラフィタイプ
color	enum	"low-emphasis"	タイトルのカラーテーマ
weight	enum	"bold"	タイトルの太さ
className	string	undefined	スタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML span要素プロパティを継承します。

Merits.Content.MeritSubtext

プロパティ	型	デフォルト	説明
children	ReactNode	コンテキストから	タイトルコンテンツ - コンテキストのerrorTitleをオーバーライド
size	enum	"S"	タイトルのタイポグラフィサイズ
type	enum	"heading"	タイポグラフィタイプ
color	enum	"low-emphasis"	タイトルのカラーテーマ
weight	enum	"regular"	タイトルの太さ
className	string	undefined	スタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML span要素プロパティを継承します。

Merits.ActionBar

プロパティ	型	デフォルト	説明
children	ReactNode	デフォルトボタン	デフォルトアクションバーレンダリングをオーバーライドするカスタムコンテンツ

注意: このコンポーネントはすべてのHTML div要素プロパティを継承します。Merits.ActionBar.Buttonコンポーネントをレンダリングします。

Merits.ActionBar.Button

プロパティ	型	デフォルト	説明
children	ReactNode	必須	ボタン内に配置するテキスト
className	string	undefined	スタイリング用の追加CSSクラス名
fill	enum	"fill"	ボタンの塗りつぶしスタイル
icon	enum	undefined	ボタンの左側のオプションアイコン
iconColor	enum	undefined	左側アイコンの色。提供されない場合、塗りつぶしタイプのデフォルト色が使用されます
isDisabled	boolean	false	ボタンが無効で使用できないかどうか
onClick	function	undefined	ボタンクリックを処理する関数
size	enum	"M"	ボタンの垂直サイズ
textAlign	enum	"center"	ボタン内のアイコンとテキストの位置
textColor	enum	"default"	ボタンテキストの色
textEmphasis	boolean	false	ボタンテキストの太さ
textSize	enum	"M"	ボタンテキストのサイズ
type	enum	"button"	ボタンの目的（htmlタイプに影響）

---

🔧 TypeScriptサポート

包括的な型定義による完全なTypeScriptサポート：

import {Merits} from '@nodeblocks/frontend-merits-block';
import {ComponentProps, ReactNode} from 'react';

// メリット項目インターフェース
interface MeritProps {
  imageUrl: string;
  text: ReactNode;
  subtext: ReactNode;
}

// メインコンポーネントインターフェース
interface MeritsProps extends Omit<ComponentProps<'div'>, 'children'> {
  subtitle: ReactNode;
  meritsTitle: ReactNode;
  buttonText: string;
  buttonHref: string;
  items: MeritProps[];
}

// 包括的なメリット設定の例
function CustomMeritsSection() {
  const meritsData: MeritProps[] = [
    {
      imageUrl: '/icons/speed.svg',
      text: '電光石火',
      subtext: '最高のユーザー体験のための最適化されたパフォーマンス',
    },
    {
      imageUrl: '/icons/security.svg',
      text: '安全で信頼性が高い',
      subtext: '99.9%の稼働率保証付きエンタープライズグレードのセキュリティ',
    },
    {
      imageUrl: '/icons/support.svg',
      text: '24時間エキスパートサポート',
      subtext: 'いつでもどこでも専門家チームからサポートを受けられます',
    },
  ];

  return (
    <Merits
      subtitle="私たちのプラットフォームを選ぶ理由"
      meritsTitle="モダンビジネス向けに構築"
      buttonText="無料トライアル開始"
      buttonHref="/signup"
      items={meritsData}
      className="custom-merits-section"
      style={{backgroundColor: '#f8f9fa', padding: '4rem 2rem'}}
      id="benefits-section">
      <Merits.Header className="custom-header" style={{marginBottom: '3rem'}} />
      <Merits.Content
        className="custom-content"
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: '2rem',
        }}
      />
      <Merits.ActionBar className="custom-action-bar" style={{marginTop: '3rem'}}>
        <Merits.ActionBar.Button href="/get-started" className="premium-cta">
          🚀 今すぐ始める
        </Merits.ActionBar.Button>
      </Merits.ActionBar>
    </Merits>
  );
}

---

React、TypeScript、モダンWebスタンダードを使用して❤️で構築されました。