@skspwork/config-doc 2.0.4 → 2.0.5

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

@@ -1,188 +0,0 @@
-'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

@@ -1,176 +0,0 @@
-'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

@@ -1,337 +0,0 @@
-'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>
-  );
-}