propsって何？HubSpot×Reactでキャッチコピー表示してみた【Day1】

// HubSpotのCMSコンポーネントライブラリから、TextFieldとModuleFieldsをインポート
import { TextField, ModuleFields } from '@hubspot/cms-components/fields';

// ここがReactモジュールの本体！HubSpotから受け取るpropsとして fieldValues を受け取るよ
export const Component = ({ fieldValues }) => {
  // fieldValues から catchphrase という名前の値を取り出す（TextFieldのnameと一致している必要あり）
  const { catchphrase } = fieldValues;

  return (
    // インラインスタイルで装飾したボックスを表示（背景色・左線・文字色・余白・角丸）
    <div
      style={{
        backgroundColor: '#FEF3C7', // Tailwindの bg-orange-100 に相当
        borderLeft: '4px solid #F97316', // Tailwindの border-orange-500 に相当
        color: '#7C2D12', // Tailwindの text-orange-900 に相当
        padding: '1rem',
        borderRadius: '0.5rem',
      }}
    >
      <p
        style={{
          fontSize: '1.125rem', // Tailwindの text-lg
          fontWeight: 600, // Tailwindの font-semibold
          margin: 0, // 段落の余白をリセット
        }}
      >
        {/* ページエディターで入力されたキャッチコピーがここに表示される！ */}
        {catchphrase}
      </p>
    </div>
  );
};

// このモジュールに含めるフィールドを定義するエリア
export const fields = (
  <ModuleFields>
    {/* テキストフィールド。nameは fieldValues のキーとして使われる！ */}
    <TextField
      name="catchphrase" // fieldValues.catchphrase として使われるキー名
      label="キャッチコピー" // CMSエディタに表示されるラベル
      default="人生はReactのようなもの。状態次第で変わるのだ！" // 初期値（例文）
    />
  </ModuleFields>
);

// モジュールのメタ情報（エディター上で表示されるモジュール名など）
export const meta = {
  label: "キャッチコピー表示", // モジュールのラベル名
};

export const fields = (
  <ModuleFields>
    <TextField
      name="catchphrase"
      label="キャッチコピー"
      default="..."
    />
  </ModuleFields>
);