レイアウトと色を切り替えられるHubSpot×Reactモジュールを作ろう！【Day4】

import { Island } from '@hubspot/cms-components'; // Island（動的コンポーネント）呼び出し用
import CustomLayoutCardIsland from '../../islands/CustomLayoutCard?island'; // Islandのモジュールを読み込み
import { ModuleFields, ChoiceField } from '@hubspot/cms-components/fields'; // フィールド定義用の部品たち

// ページ上で表示するReactコンポーネント（islandを呼び出す）
export function Component({ fieldValues }) {
  // HubSpotエディターで設定された値を取り出す
  const { layout, colorTheme } = fieldValues;

  // Islandを描画し、propsとしてフィールドの値を渡す
  return (
    <Island
      module={CustomLayoutCardIsland}
      layout={layout}
      colorTheme={colorTheme}
    />
  );
}

// エディターで表示されるフィールドの定義
export const fields = (
  <ModuleFields>
    <ChoiceField
      name="layout" // フィールドの内部名
      label="コンテンツ配置" // エディターでの表示名
      required={false}
      locked={false}
      multiple={false}
      display="select"
      choices={[
        ['vertical', '縦並び'],
        ['horizontal', '横並び']
      ]}
      default="horizontal" // 初期値
    />
    <ChoiceField
      name="colorTheme"
      label="カラーテーマ"
      required={false}
      locked={false}
      multiple={false}
      display="select"
      choices={[
        ['light', 'ライト'],
        ['dark', 'ダーク']
      ]}
      default="light"
    />
  </ModuleFields>
);

// HubSpot上でのモジュール名ラベル
export const meta = {
  label: '04_レイアウト切り替えカード',
};

import React from 'react'; // Reactを読み込む

// Island（クライアント側で動く）としてのコンポーネント
export default function CustomLayoutCardIsland({ layout, colorTheme }) {
  // layoutがhorizontalなら横並び、それ以外は縦並びとして判定
  const isHorizontal = layout === 'horizontal';

  // カード全体のスタイル（色・並びなど）
  const containerStyle = {
    padding: '24px',
    borderRadius: '12px',
    display: 'flex',
    gap: '16px',
    alignItems: 'center',
    transition: 'background-color 0.3s ease',
    backgroundColor: colorTheme === 'dark' ? '#1f2937' : '#ffffff', // ダークかライトかで背景色
    color: colorTheme === 'dark' ? '#ffffff' : '#000000', // 同じく文字色
    flexDirection: isHorizontal ? 'row' : 'column', // 横並びか縦並びか
  };

  // サムネイルのスタイル（四角のダミー画像っぽい）
  const thumbnailStyle = {
    width: '100px',
    height: '100px',
    backgroundColor: '#ccc',
    borderRadius: '8px',
  };

  // タイトルのスタイル
  const titleStyle = {
    fontSize: '20px',
    fontWeight: 'bold',
    marginBottom: '8px',
  };

  // 説明文のスタイル
  const descriptionStyle = {
    fontSize: '16px',
  };

  // 実際の描画部分（サムネイル＋テキストを並べる）
  return (
    <div style={containerStyle}>
      <div style={thumbnailStyle}></div>
      <div>
        <h2 style={titleStyle}>カスタムカード</h2>
        <p style={descriptionStyle}>フィールドから見た目を切り替えられるよ！🎨</p>
      </div>
    </div>
  );
}

export const fields = (
  <ModuleFields>
    <ChoiceField
      name="layout"
      label="コンテンツ配置"
      default="horizontal"
      choices={[
        ['vertical', '縦並び'],
        ['horizontal', '横並び']
      ]}
    />
    <ChoiceField
      name="colorTheme"
      label="カラーテーマ"
      default="light"
      choices={[
        ['light', 'ライト'],
        ['dark', 'ダーク']
      ]}
    />
  </ModuleFields>
);

export function Component({ fieldValues }) {
  const { layout, colorTheme } = fieldValues;

  return (
    <Island
      module={CustomLayoutCardIsland}
      layout={layout}
      colorTheme={colorTheme}
    />
  );
}

export default function CustomLayoutCardIsland({ layout, colorTheme }) {
  const isHorizontal = layout === 'horizontal';

  const containerStyle = {
    padding: '24px',
    borderRadius: '12px',
    display: 'flex',
    gap: '16px',
    alignItems: 'center',
    transition: 'background-color 0.3s ease',
    backgroundColor: colorTheme === 'dark' ? '#1f2937' : '#ffffff',
    color: colorTheme === 'dark' ? '#ffffff' : '#000000',
    flexDirection: isHorizontal ? 'row' : 'column', // ← ここがレイアウト切り替え！
  };

  return (
    <div style={containerStyle}>
      <div style={{ width: '100px', height: '100px', backgroundColor: '#ccc', borderRadius: '8px' }} />
      <div>
        <h2 style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '8px' }}>カスタムカード</h2>
        <p style={{ fontSize: '16px' }}>フィールドから見た目を切り替えられるよ！🎨</p>
      </div>
    </div>
  );
}