チェックひとつで背景色が変わる！HubSpotのBooleanFieldで学ぶ条件レンダリング【Day2】

// HubSpot CMS用のReactコンポーネント群を読み込む
import { TextField, BooleanField, ModuleFields } from '@hubspot/cms-components/fields';

// Reactコンポーネントを定義（HubSpotから渡されるfieldValuesを受け取る）
export const Component = ({ fieldValues }) => {
  // fieldValuesから「message」と「highlight」を取り出す（propsの分割代入）
  const { message, highlight } = fieldValues;

  return (
    // 通知ボックス全体の見た目を制御するdiv
    <div
      style={{
        // highlightがtrueのときは青背景、それ以外は透明にする
        backgroundColor: highlight ? '#DBEAFE' : 'transparent',
        // 外枠を青色に
        border: '1px solid #60A5FA',
        // 内側の余白
        padding: '1rem',
        // 角を丸くする
        borderRadius: '0.5rem',
      }}
    >
      {/* 通知メッセージのテキストを表示 */}
      <p style={{ margin: 0 }}>{message}</p>
    </div>
  );
};

// HubSpotのモジュールエディターに表示されるフィールド定義
export const fields = (
  <ModuleFields>
    {/* 通知メッセージのテキストフィールド */}
    <TextField
      name="message"
      label="通知メッセージ"
      default="これは通知です！"
    />
    {/* チェックボックスでON/OFFを切り替えるBooleanField */}
    <BooleanField
      name="highlight"
      label="目立たせる"
      default={false} // デフォルトは「チェックなし（false）」
    />
  </ModuleFields>
);

// モジュールのメタ情報
export const meta = {
  label: '通知ボックス',
};