@skspwork/config-doc 1.0.0 → 2.0.0

package/packages/web/.next/standalone/components/ConfigFileTabs.tsx

@@ -0,0 +1,188 @@
+'use client';
+
+import { useState } from 'react';
+import { FolderOpenIcon, XIcon } from 'lucide-react';
+import { ConfigDocs } from '@/types';
+
+export interface LoadedConfig {
+  filePath: string;
+  configData: unknown;
+  docs: ConfigDocs;
+}
+
+interface ConfigFileTabsProps {
+  loadedConfigs: LoadedConfig[];
+  activeConfigIndex: number;
+  onTabClick: (index: number) => void;
+  onRemoveConfig: (index: number) => void;
+  onAddFileClick: () => void;
+  onReorder: (newConfigs: LoadedConfig[], newActiveIndex: number) => void;
+}
+
+// 同名ファイルを区別するための表示名を生成
+function getDisplayName(filePath: string, allFilePaths: string[]): string {
+  const fileName = filePath.split(/[/\\]/).pop() || filePath;
+
+  // 同じファイル名を持つファイルパスを検索
+  const sameNamePaths = allFilePaths.filter(p => {
+    const name = p.split(/[/\\]/).pop();
+    return name === fileName;
+  });
+
+  // 同名のファイルが1つしかない場合はファイル名のみ
+  if (sameNamePaths.length === 1) {
+    return fileName;
+  }
+
+  // 同名ファイルが複数ある場合、親フォルダを追加
+  const pathParts = filePath.split(/[/\\]/);
+
+  // 必要な親フォルダのレベル数を決定
+  for (let depth = 1; depth < pathParts.length; depth++) {
+    const displayWithParents = pathParts.slice(-depth - 1).join('/');
+
+    // この表示名が他の同名ファイルと区別できるかチェック
+    const conflicts = sameNamePaths.filter(p => {
+      const otherParts = p.split(/[/\\]/);
+      const otherDisplay = otherParts.slice(-depth - 1).join('/');
+      return displayWithParents === otherDisplay && p !== filePath;
+    });
+
+    if (conflicts.length === 0) {
+      return displayWithParents;
+    }
+  }
+
+  // 全パスが必要な場合
+  return filePath;
+}
+
+export function ConfigFileTabs({
+  loadedConfigs,
+  activeConfigIndex,
+  onTabClick,
+  onRemoveConfig,
+  onAddFileClick,
+  onReorder
+}: ConfigFileTabsProps) {
+  // ドラッグ＆ドロップ用の状態
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+
+  const handleDragStart = (index: number) => {
+    setDragIndex(index);
+  };
+
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault();
+    if (dragIndex !== null && dragIndex !== index) {
+      setDragOverIndex(index);
+    }
+  };
+
+  const handleDragLeave = () => {
+    setDragOverIndex(null);
+  };
+
+  const handleDrop = (index: number) => {
+    if (dragIndex === null || dragIndex === index) {
+      setDragIndex(null);
+      setDragOverIndex(null);
+      return;
+    }
+
+    // 配列の並び替え
+    const newConfigs = [...loadedConfigs];
+    const [draggedItem] = newConfigs.splice(dragIndex, 1);
+    newConfigs.splice(index, 0, draggedItem);
+
+    // アクティブなインデックスを調整
+    let newActiveIndex = activeConfigIndex;
+    if (activeConfigIndex === dragIndex) {
+      newActiveIndex = index;
+    } else if (dragIndex < activeConfigIndex && index >= activeConfigIndex) {
+      newActiveIndex = activeConfigIndex - 1;
+    } else if (dragIndex > activeConfigIndex && index <= activeConfigIndex) {
+      newActiveIndex = activeConfigIndex + 1;
+    }
+
+    onReorder(newConfigs, newActiveIndex);
+
+    setDragIndex(null);
+    setDragOverIndex(null);
+  };
+
+  const handleDragEnd = () => {
+    setDragIndex(null);
+    setDragOverIndex(null);
+  };
+
+  const allFilePaths = loadedConfigs.map(c => c.filePath);
+
+  return (
+    <div className="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl border border-gray-100 p-6 mb-8 hover:shadow-2xl transition-shadow duration-300">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
+            <FolderOpenIcon className="w-5 h-5 text-white" />
+          </div>
+          <h2 className="text-xl font-bold text-gray-800">設定ファイル</h2>
+        </div>
+        <button
+          onClick={onAddFileClick}
+          className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-blue-700 shadow-md hover:shadow-lg transition-all duration-200 transform"
+        >
+          <FolderOpenIcon className="w-5 h-5" />
+          <span className="font-medium">ファイルを追加</span>
+        </button>
+      </div>
+
+      {loadedConfigs.length > 0 ? (
+        <div className="flex flex-wrap gap-3">
+          {loadedConfigs.map((config, index) => (
+            <div
+              key={config.filePath}
+              draggable
+              onDragStart={() => handleDragStart(index)}
+              onDragOver={(e) => handleDragOver(e, index)}
+              onDragLeave={handleDragLeave}
+              onDrop={() => handleDrop(index)}
+              onDragEnd={handleDragEnd}
+              onClick={() => onTabClick(index)}
+              className={`group flex items-center gap-2 px-4 py-2.5 rounded-xl border-2 cursor-grab transition-all duration-200 ${
+                activeConfigIndex === index
+                  ? 'bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-400 shadow-md'
+                  : 'bg-white border-gray-200 hover:border-blue-300 hover:shadow-md'
+              } ${
+                dragIndex === index ? 'opacity-50' : ''
+              } ${
+                dragOverIndex === index ? 'border-blue-500 border-dashed' : ''
+              }`}
+            >
+              <span className={`text-sm font-medium ${
+                activeConfigIndex === index ? 'text-blue-700' : 'text-gray-700'
+              }`}>
+                {getDisplayName(config.filePath, allFilePaths)}
+              </span>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onRemoveConfig(index);
+                }}
+                className="text-gray-400 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100"
+              >
+                <XIcon className="w-4 h-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="text-center py-12 bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl border-2 border-dashed border-gray-300">
+          <FolderOpenIcon className="w-16 h-16 text-gray-400 mx-auto mb-3" />
+          <p className="text-sm text-gray-600 font-medium">設定ファイルを選択してください</p>
+          <p className="text-xs text-gray-500 mt-1">「ファイルを追加」ボタンから開始</p>
+        </div>
+      )}
+    </div>
+  );
+}

package/packages/web/.next/standalone/components/ConfigTree.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import { useState } from 'react';
+import { ConfigTreeNode, ConfigDocs } from '@/types';
+import { ChevronRightIcon, ChevronDownIcon, FileTextIcon } from 'lucide-react';
+import { ConfigParser } from '@/lib/configParser';
+
+interface ConfigTreeProps {
+  config: any;
+  docs: ConfigDocs;
+  onSelectProperty: (path: string) => void;
+  onEditProperty: (path: string) => void;
+  selectedPath?: string;
+}
+
+export function ConfigTree({
+  config,
+  docs,
+  onSelectProperty,
+  onEditProperty,
+  selectedPath
+}: ConfigTreeProps) {
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+
+  const toggleNode = (path: string) => {
+    const newExpanded = new Set(expandedNodes);
+    if (newExpanded.has(path)) {
+      newExpanded.delete(path);
+    } else {
+      newExpanded.add(path);
+    }
+    setExpandedNodes(newExpanded);
+  };
+
+  // すべてのノードパスを収集
+  const getAllNodePaths = (nodes: ConfigTreeNode[]): string[] => {
+    const paths: string[] = [];
+    const collectPaths = (node: ConfigTreeNode) => {
+      if (node.children && node.children.length > 0) {
+        paths.push(node.fullPath);
+        node.children.forEach(collectPaths);
+      }
+    };
+    nodes.forEach(collectPaths);
+    return paths;
+  };
+
+  // すべて展開
+  const expandAll = () => {
+    const tree = ConfigParser.buildTree(config);
+    const allPaths = getAllNodePaths(tree);
+    setExpandedNodes(new Set(allPaths));
+  };
+
+  // すべて閉じる
+  const collapseAll = () => {
+    setExpandedNodes(new Set());
+  };
+
+  // ドキュメントが有効な内容を持っているかチェック
+  const hasValidDocumentation = (path: string): boolean => {
+    const doc = docs.properties[path];
+    if (!doc) return false;
+
+    // タグがあるか
+    if (doc.tags && doc.tags.length > 0) return true;
+
+    // フィールドに値があるか
+    if (doc.fields) {
+      const hasFieldValue = Object.values(doc.fields).some(
+        value => value && value.trim() !== ''
+      );
+      if (hasFieldValue) return true;
+    }
+
+    return false;
+  };
+
+  const renderNode = (node: ConfigTreeNode, depth: number = 0) => {
+    const hasDoc = hasValidDocumentation(node.fullPath);
+    const isExpanded = expandedNodes.has(node.fullPath);
+    const isSelected = selectedPath === node.fullPath;
+
+    return (
+      <div key={node.fullPath}>
+        <div
+          style={{ paddingLeft: `${depth * 20}px` }}
+          className={`group flex items-center gap-2 py-2 px-3 cursor-pointer rounded-lg transition-all duration-150 ${
+            isSelected
+              ? 'bg-gradient-to-r from-blue-100 to-indigo-100 border-l-4 border-blue-500 shadow-sm'
+              : 'hover:bg-gradient-to-r hover:from-gray-50 hover:to-gray-100'
+          }`}
+        >
+          {node.children && node.children.length > 0 ? (
+            <button
+              onClick={() => toggleNode(node.fullPath)}
+              className="p-1 hover:bg-blue-100 rounded-md transition-colors"
+            >
+              {isExpanded ? (
+                <ChevronDownIcon className="w-4 h-4 text-blue-600" />
+              ) : (
+                <ChevronRightIcon className="w-4 h-4 text-gray-600" />
+              )}
+            </button>
+          ) : (
+            <div className="w-6" />
+          )}
+
+          <div
+            onClick={() => onSelectProperty(node.fullPath)}
+            className="flex-1 flex items-center gap-2"
+          >
+            <span className={`${node.children ? 'font-bold text-gray-800' : 'font-medium text-gray-700'}`}>
+              {node.key}
+            </span>
+            {!node.children && (
+              <span className="text-sm text-gray-500 truncate max-w-[200px]">
+                : {JSON.stringify(node.value)}
+              </span>
+            )}
+            {hasDoc && (
+              <div className="flex items-center gap-1 px-2 py-0.5 bg-green-100 border border-green-300 rounded-full">
+                <FileTextIcon className="w-3 h-3 text-green-600" />
+                <span className="text-xs text-green-700 font-medium">Doc</span>
+              </div>
+            )}
+          </div>
+
+          {!node.children && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onEditProperty(node.fullPath);
+              }}
+              className="p-1 hover:bg-gray-200 rounded"
+              title="編集"
+            />
+          )}
+        </div>
+
+        {node.children && isExpanded && (
+          <div>
+            {node.children.map((child) => renderNode(child, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const tree = ConfigParser.buildTree(config);
+
+  return (
+    <div className="h-full flex flex-col border-2 border-gray-100 rounded-xl bg-white shadow-sm">
+      {/* ツールバー */}
+      <div className="flex items-center gap-2 p-3 border-b-2 border-gray-100 bg-gradient-to-r from-gray-50 to-gray-100">
+        <button
+          onClick={expandAll}
+          className="px-4 py-1.5 text-sm font-medium bg-white border-2 border-blue-200 text-blue-600 rounded-lg hover:bg-blue-50 hover:border-blue-300 transition-all duration-200 shadow-sm hover:shadow-md"
+        >
+          すべて展開
+        </button>
+        <button
+          onClick={collapseAll}
+          className="px-4 py-1.5 text-sm font-medium bg-white border-2 border-gray-200 text-gray-600 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-all duration-200 shadow-sm hover:shadow-md"
+        >
+          すべて閉じる
+        </button>
+      </div>
+
+      {/* ツリー表示 */}
+      <div className="flex-1 overflow-y-auto p-3">
+        {tree.map((node) => renderNode(node))}
+      </div>
+    </div>
+  );
+}

package/packages/web/.next/standalone/components/EditableList.tsx

@@ -0,0 +1,337 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { PencilIcon, PlusIcon, XIcon, SaveIcon, GripVerticalIcon } from 'lucide-react';
+
+export interface EditingItem {
+  originalName: string;
+  newName: string;
+  isNew: boolean;
+}
+
+interface EditableListWrapperProps {
+  /** セクションのラベル */
+  label: string;
+  /** 現在のアイテム一覧 */
+  items: string[];
+  /** アイテム一覧が変更されたときのコールバック */
+  onItemsChange: (items: string[]) => void;
+  /** 編集ボタンのtitle属性 */
+  editButtonTitle: string;
+  /** 編集モードの説明テキスト */
+  editModeDescription: string;
+  /** 入力欄のプレースホルダー */
+  inputPlaceholder: string;
+  /** 新規追加入力欄のプレースホルダー */
+  newItemPlaceholder: string;
+  /** 削除ボタンのtitle属性 */
+  deleteButtonTitle: string;
+  /** 追加ボタンのtitle属性 */
+  addButtonTitle: string;
+  /** 重複エラーメッセージ */
+  duplicateErrorMessage: string;
+  /** 名前変更時に呼ばれるコールバック（旧名 -> 新名のマップ） */
+  onRename?: (renamedMap: Record<string, string>) => void;
+  /** 通常モードの表示内容 */
+  children: React.ReactNode;
+}
+
+/**
+ * 編集可能なリストを管理する共通コンポーネント
+ * タグやフィールドの編集UIで使用
+ */
+export function EditableListWrapper({
+  label,
+  items,
+  onItemsChange,
+  editButtonTitle,
+  editModeDescription,
+  inputPlaceholder,
+  newItemPlaceholder,
+  deleteButtonTitle,
+  addButtonTitle,
+  duplicateErrorMessage,
+  onRename,
+  children
+}: EditableListWrapperProps) {
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [editingItems, setEditingItems] = useState<EditingItem[]>([]);
+  const [newItemName, setNewItemName] = useState('');
+
+  // ドラッグ&ドロップ用の状態
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+
+  // ドラッグ中のプレビュー用に並び替えた配列を計算
+  const displayItems = useMemo(() => {
+    if (dragIndex === null || dragOverIndex === null || dragIndex === dragOverIndex) {
+      return editingItems.map((item, index) => ({ item, originalIndex: index }));
+    }
+
+    // ドラッグ中は見た目上の並び替えを表示
+    const result = editingItems.map((item, index) => ({ item, originalIndex: index }));
+    const [draggedItem] = result.splice(dragIndex, 1);
+    result.splice(dragOverIndex, 0, draggedItem);
+    return result;
+  }, [editingItems, dragIndex, dragOverIndex]);
+
+  // 編集モードに入る
+  const enterEditMode = () => {
+    const itemList = items.map(name => ({
+      originalName: name,
+      newName: name,
+      isNew: false
+    }));
+    setEditingItems(itemList);
+    setIsEditMode(true);
+    setNewItemName('');
+  };
+
+  // 編集モードをキャンセル
+  const cancelEditMode = () => {
+    setIsEditMode(false);
+    setEditingItems([]);
+    setNewItemName('');
+    setDragIndex(null);
+    setDragOverIndex(null);
+  };
+
+  // アイテムを追加（編集モード内）
+  const handleAddItem = () => {
+    const trimmedName = newItemName.trim();
+    if (trimmedName && !editingItems.some(item => item.newName === trimmedName)) {
+      setEditingItems([...editingItems, {
+        originalName: '',
+        newName: trimmedName,
+        isNew: true
+      }]);
+      setNewItemName('');
+    }
+  };
+
+  // アイテムを削除（編集モード内）
+  const handleRemoveItem = (originalIndex: number) => {
+    setEditingItems(editingItems.filter((_, i) => i !== originalIndex));
+  };
+
+  // アイテム名を変更（編集モード内）
+  const handleNameChange = (originalIndex: number, newName: string) => {
+    setEditingItems(editingItems.map((item, i) =>
+      i === originalIndex ? { ...item, newName } : item
+    ));
+  };
+
+  // ドラッグ開始
+  const handleDragStart = (originalIndex: number) => {
+    setDragIndex(originalIndex);
+  };
+
+  // ドラッグオーバー（表示上のインデックスで処理）
+  const handleDragOver = (e: React.DragEvent, displayIndex: number) => {
+    e.preventDefault();
+    if (dragIndex === null) return;
+
+    // 表示上のインデックスをそのまま使用
+    if (dragOverIndex !== displayIndex) {
+      setDragOverIndex(displayIndex);
+    }
+  };
+
+  // ドロップ時にデータを確定
+  const handleDrop = () => {
+    if (dragIndex === null || dragOverIndex === null || dragIndex === dragOverIndex) {
+      setDragIndex(null);
+      setDragOverIndex(null);
+      return;
+    }
+
+    // 配列の並び替えを確定
+    const newItems = [...editingItems];
+    const [draggedItem] = newItems.splice(dragIndex, 1);
+    newItems.splice(dragOverIndex, 0, draggedItem);
+    setEditingItems(newItems);
+
+    setDragIndex(null);
+    setDragOverIndex(null);
+  };
+
+  // ドラッグ終了（キャンセル時など）
+  const handleDragEnd = () => {
+    setDragIndex(null);
+    setDragOverIndex(null);
+  };
+
+  // 保存処理
+  const handleSave = () => {
+    const newItems: string[] = [];
+    const renamedMap: Record<string, string> = {};
+
+    for (const item of editingItems) {
+      const trimmedName = item.newName.trim();
+      if (!trimmedName) continue;
+
+      newItems.push(trimmedName);
+
+      // 名前変更の追跡
+      if (!item.isNew && item.originalName !== trimmedName) {
+        renamedMap[item.originalName] = trimmedName;
+      }
+    }
+
+    // 入力中のアイテムがあれば追加
+    const pendingName = newItemName.trim();
+    if (pendingName && !newItems.includes(pendingName)) {
+      newItems.push(pendingName);
+    }
+
+    // 名前変更コールバック
+    if (onRename && Object.keys(renamedMap).length > 0) {
+      onRename(renamedMap);
+    }
+
+    onItemsChange(newItems);
+    setIsEditMode(false);
+    setEditingItems([]);
+    setNewItemName('');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleAddItem();
+    }
+  };
+
+  // バリデーション: 重複チェック
+  const hasDuplicateNames = () => {
+    const names = editingItems.map(item => item.newName.trim()).filter(Boolean);
+    return new Set(names).size !== names.length;
+  };
+
+  // バリデーション: 空の名前チェック
+  const hasEmptyNames = () => {
+    return editingItems.some(item => !item.newName.trim());
+  };
+
+  const canSave = !hasDuplicateNames() && !hasEmptyNames();
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-2">
+        <label className="block text-sm font-semibold text-gray-700">
+          {label}
+        </label>
+        {!isEditMode && (
+          <button
+            onClick={enterEditMode}
+            className="text-gray-500 hover:text-blue-600 transition-colors p-1"
+            title={editButtonTitle}
+          >
+            <PencilIcon className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+
+      {isEditMode ? (
+        <div className="space-y-3 p-4 bg-blue-50 rounded-lg border-2 border-blue-200">
+          <div className="text-xs font-medium text-blue-700 mb-2">
+            {editModeDescription}（ドラッグで並び替え可能）
+          </div>
+
+          {/* 既存アイテムの編集 */}
+          <div className="space-y-2">
+            {displayItems.map(({ item, originalIndex }, displayIndex) => {
+              const isDragging = dragIndex === originalIndex;
+
+              return (
+                <div
+                  key={originalIndex}
+                  draggable
+                  onDragStart={() => handleDragStart(originalIndex)}
+                  onDragOver={(e) => handleDragOver(e, displayIndex)}
+                  onDrop={handleDrop}
+                  onDragEnd={handleDragEnd}
+                  className={`flex items-center gap-2 transition-all ${
+                    isDragging ? 'opacity-50' : ''
+                  }`}
+                >
+                  <div
+                    className="cursor-grab text-gray-400 hover:text-gray-600 p-1"
+                    title="ドラッグして並び替え"
+                  >
+                    <GripVerticalIcon className="w-4 h-4" />
+                  </div>
+                  <input
+                    type="text"
+                    value={item.newName}
+                    onChange={(e) => handleNameChange(originalIndex, e.target.value)}
+                    placeholder={inputPlaceholder}
+                    className={`flex-1 px-3 py-2 border-2 rounded-lg text-sm focus:ring-2 transition-all duration-200 ${
+                      !item.newName.trim()
+                        ? 'border-red-300 focus:border-red-400 focus:ring-red-200'
+                        : 'border-gray-200 focus:border-blue-400 focus:ring-blue-200'
+                    }`}
+                  />
+                  <button
+                    onClick={() => handleRemoveItem(originalIndex)}
+                    className="text-gray-400 hover:text-red-600 transition-colors p-2"
+                    title={deleteButtonTitle}
+                  >
+                    <XIcon className="w-4 h-4" />
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+
+          {/* 新規アイテム追加 */}
+          <div className="flex items-center gap-2 pt-2 border-t border-blue-200">
+            <input
+              type="text"
+              value={newItemName}
+              onChange={(e) => setNewItemName(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={newItemPlaceholder}
+              className="flex-1 px-3 py-2 border-2 border-gray-200 rounded-lg text-sm focus:border-blue-400 focus:ring-2 focus:ring-blue-200 transition-all duration-200"
+            />
+            <button
+              onClick={handleAddItem}
+              disabled={!newItemName.trim() || editingItems.some(item => item.newName.trim() === newItemName.trim())}
+              className="px-3 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed"
+              title={addButtonTitle}
+            >
+              <PlusIcon className="w-4 h-4" />
+            </button>
+          </div>
+
+          {/* エラーメッセージ */}
+          {hasDuplicateNames() && (
+            <div className="text-xs text-red-600 mt-2">
+              {duplicateErrorMessage}
+            </div>
+          )}
+
+          {/* 保存・キャンセルボタン */}
+          <div className="flex items-center gap-2 pt-3 border-t border-blue-200">
+            <button
+              onClick={handleSave}
+              disabled={!canSave}
+              className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed text-sm font-medium"
+            >
+              <SaveIcon className="w-4 h-4" />
+              保存
+            </button>
+            <button
+              onClick={cancelEditMode}
+              className="flex-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors text-sm font-medium"
+            >
+              キャンセル
+            </button>
+          </div>
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  );
+}