@skspwork/config-doc 1.0.0 → 2.0.0

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

@@ -0,0 +1,234 @@
+import { useState, useEffect, useMemo } from 'react';
+import { ExportSettings, ExportFormat } from '@/types';
+import { XIcon, DownloadIcon, FolderIcon } from 'lucide-react';
+import { FileBrowser } from './FileBrowser';
+
+interface ExportDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onExport: (settings: ExportSettings) => void;
+  currentSettings?: ExportSettings;
+  rootPath?: string;
+}
+
+const DEFAULT_SETTINGS: ExportSettings = {
+  format: 'html',
+  autoExport: true,
+  fileName: 'config-doc',
+  outputDir: '.config_doc/output'
+};
+
+export function ExportDialog({ isOpen, onClose, onExport, currentSettings, rootPath = '.' }: ExportDialogProps) {
+  const [settings, setSettings] = useState<ExportSettings>(currentSettings || DEFAULT_SETTINGS);
+  const [isExporting, setIsExporting] = useState(false);
+  const [isFolderBrowserOpen, setIsFolderBrowserOpen] = useState(false);
+
+  useEffect(() => {
+    if (currentSettings) {
+      setSettings(currentSettings);
+    }
+  }, [currentSettings]);
+
+  // フォーマットに応じて出力先パスを決定
+  const absoluteOutputPath = useMemo(() => {
+    const normalized = rootPath.replace(/\//g, '\\');
+    const outputDir = settings.outputDir?.trim() || '';
+    const fileName = settings.fileName || 'config-doc';
+    const extension = (settings.format === 'markdown' || settings.format === 'markdown-table') ? 'md' : 'html';
+    if (outputDir) {
+      const normalizedOutputDir = outputDir.replace(/\//g, '\\');
+      return `${normalized}\\${normalizedOutputDir}\\${fileName}.${extension}`;
+    }
+    return `${normalized}\\${fileName}.${extension}`;
+  }, [settings.format, settings.fileName, settings.outputDir, rootPath]);
+
+  if (!isOpen) return null;
+
+  const handleExport = async () => {
+    setIsExporting(true);
+    try {
+      await onExport(settings);
+      onClose();
+    } catch (error) {
+      console.error('Export failed:', error);
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
+        {/* ヘッダー */}
+        <div className="flex items-center justify-between p-6 border-b">
+          <h2 className="text-xl font-semibold text-gray-800">エクスポート設定</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            <XIcon className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* コンテンツ */}
+        <div className="p-6 space-y-6">
+
+          {/* 出力先フォルダ */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              出力先フォルダ
+            </label>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={settings.outputDir || ''}
+                onChange={(e) => setSettings({ ...settings, outputDir: e.target.value })}
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="（空欄でプロジェクトルート）"
+              />
+              <button
+                type="button"
+                onClick={() => setIsFolderBrowserOpen(true)}
+                className="px-3 py-2 border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                title="フォルダを選択"
+              >
+                <FolderIcon className="w-5 h-5 text-gray-500" />
+              </button>
+            </div>
+            <p className="mt-1 text-xs text-gray-500">
+              相対パスを入力またはフォルダを選択（空欄でプロジェクトルート、チーム共有設定）
+            </p>
+          </div>
+
+          {/* ファイル名 */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              ファイル名
+            </label>
+            <input
+              type="text"
+              value={settings.fileName ?? ''}
+              onChange={(e) => setSettings({ ...settings, fileName: e.target.value })}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="config-doc"
+            />
+            <p className="mt-1 text-xs text-gray-500">
+              拡張子なしのファイル名を指定します（空欄でconfig-doc、チーム共有設定）
+            </p>
+          </div>
+
+          {/* 出力形式 */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              出力形式
+            </label>
+            <select
+              value={settings.format}
+              onChange={(e) => setSettings({ ...settings, format: e.target.value as ExportFormat })}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="html">HTML</option>
+              <option value="markdown">Markdown</option>
+              <option value="markdown-table">Markdown (テーブル形式)</option>
+            </select>
+            <p className="mt-1 text-xs text-gray-500">
+              {settings.format === 'html'
+                ? 'スタイル付きのHTMLファイルとして出力します'
+                : settings.format === 'markdown-table'
+                ? 'Markdownテーブル形式で出力します（プロパティ名、説明、値、備考）'
+                : 'テキストベースのMarkdownファイルとして出力します'}
+            </p>
+          </div>
+
+          {/* 出力先パス */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              出力先パス
+            </label>
+            <div className="px-3 py-2 bg-gray-50 border border-gray-300 rounded-md text-sm text-gray-700 font-mono break-all">
+              {absoluteOutputPath}
+            </div>
+          </div>
+
+          {/* 自動エクスポート */}
+          <div className="flex items-start">
+            <div className="flex items-center h-5">
+              <input
+                id="auto-export"
+                type="checkbox"
+                checked={settings.autoExport}
+                onChange={(e) => setSettings({ ...settings, autoExport: e.target.checked })}
+                className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+              />
+            </div>
+            <div className="ml-3">
+              <label htmlFor="auto-export" className="text-sm font-medium text-gray-700 cursor-pointer">
+                保存時に自動エクスポート
+              </label>
+              <p className="text-xs text-gray-500 mt-1">
+                ドキュメントを保存したときに自動的にHTMLファイルを更新します
+              </p>
+            </div>
+          </div>
+
+          {/* 最終エクスポート日時 */}
+          {settings.lastExportedAt && (
+            <div className="pt-4 border-t">
+              <p className="text-xs text-gray-500">
+                最終エクスポート: {new Date(settings.lastExportedAt).toLocaleString('ja-JP')}
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* フッター */}
+        <div className="flex items-center justify-end gap-3 p-6 border-t bg-gray-50 rounded-b-lg">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          >
+            キャンセル
+          </button>
+          <button
+            onClick={handleExport}
+            disabled={isExporting}
+            className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <DownloadIcon className="w-4 h-4" />
+            {isExporting ? 'エクスポート中...' : 'エクスポート'}
+          </button>
+        </div>
+      </div>
+
+      {/* フォルダ選択ダイアログ */}
+      <FileBrowser
+        isOpen={isFolderBrowserOpen}
+        currentPath={rootPath}
+        onSelect={(paths) => {
+          if (paths.length > 0) {
+            // 絶対パスから相対パスに変換
+            const selectedPath = paths[0];
+            const normalizedRoot = rootPath.replace(/\\/g, '/');
+            const normalizedSelected = selectedPath.replace(/\\/g, '/');
+            let relativePath = normalizedSelected;
+            if (normalizedSelected.startsWith(normalizedRoot)) {
+              relativePath = normalizedSelected.slice(normalizedRoot.length);
+              if (relativePath.startsWith('/')) {
+                relativePath = relativePath.slice(1);
+              }
+            }
+            // 空の場合は現在のディレクトリ
+            if (!relativePath) {
+              relativePath = '.';
+            }
+            setSettings({ ...settings, outputDir: relativePath });
+          }
+          setIsFolderBrowserOpen(false);
+        }}
+        onClose={() => setIsFolderBrowserOpen(false)}
+        folderSelectMode={true}
+        title="出力先フォルダを選択"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,92 @@
+'use client';
+
+import { EditableListWrapper } from './EditableList';
+
+interface FieldsEditorProps {
+  fields: Record<string, string>;
+  projectFields: Record<string, string>;
+  onFieldsChange: (fields: Record<string, string>) => void;
+  onUpdateProjectFields?: (fields: Record<string, string>) => void;
+}
+
+export function FieldsEditor({
+  fields,
+  projectFields,
+  onFieldsChange,
+  onUpdateProjectFields
+}: FieldsEditorProps) {
+  // フィールド名の一覧
+  const fieldNames = Object.keys(projectFields);
+
+  // 名前変更時にフィールドの値も更新
+  const handleRename = (renamedMap: Record<string, string>) => {
+    const newFields: Record<string, string> = {};
+    for (const [oldName, value] of Object.entries(fields)) {
+      const newName = renamedMap[oldName] || oldName;
+      newFields[newName] = value;
+    }
+    onFieldsChange(newFields);
+  };
+
+  // フィールド一覧が変更されたとき
+  const handleFieldNamesChange = (newNames: string[]) => {
+    // 新しいフィールド構造を構築
+    const newFields: Record<string, string> = {};
+    for (const name of newNames) {
+      newFields[name] = fields[name] || '';
+    }
+
+    // フィールドを更新（ローカル状態）
+    onFieldsChange(newFields);
+
+    // プロジェクト全体に適用
+    if (onUpdateProjectFields) {
+      const newProjectFields: Record<string, string> = {};
+      for (const name of newNames) {
+        newProjectFields[name] = '';
+      }
+      onUpdateProjectFields(newProjectFields);
+    }
+  };
+
+  // フィールド値の変更（通常モード）
+  const handleFieldValueChange = (label: string, value: string) => {
+    onFieldsChange({
+      ...fields,
+      [label]: value
+    });
+  };
+
+  return (
+    <EditableListWrapper
+      label="フィールド"
+      items={fieldNames}
+      onItemsChange={handleFieldNamesChange}
+      editButtonTitle="フィールドを編集"
+      editModeDescription="フィールドの追加・削除・名前変更"
+      inputPlaceholder="フィールド名"
+      newItemPlaceholder="新しいフィールド名を入力"
+      deleteButtonTitle="フィールドを削除"
+      addButtonTitle="フィールドを追加"
+      duplicateErrorMessage="同じ名前のフィールドがあります"
+      onRename={handleRename}
+    >
+      {/* 通常モード（フィールド値の入力） */}
+      <div className="space-y-3">
+        {Object.entries(fields).map(([label, value]) => (
+          <div key={label}>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              {label}
+            </label>
+            <textarea
+              value={value}
+              onChange={(e) => handleFieldValueChange(label, e.target.value)}
+              className="w-full border-2 border-gray-200 rounded-lg p-3 min-h-[80px] text-sm focus:border-blue-400 focus:ring-2 focus:ring-blue-200 transition-all duration-200 shadow-sm hover:shadow-md"
+              placeholder={`${label}を入力してください`}
+            />
+          </div>
+        ))}
+      </div>
+    </EditableListWrapper>
+  );
+}

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

@@ -0,0 +1,299 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { FileSystemItem } from '@/types';
+import { FolderIcon, FileIcon, ArrowUpIcon } from 'lucide-react';
+
+interface FileBrowserProps {
+  isOpen: boolean;
+  currentPath: string;
+  onSelect: (filePaths: string[]) => void;
+  onClose: () => void;
+  multiSelect?: boolean;
+  filterJsonOnly?: boolean;
+  /** フォルダ選択モード（trueの場合、ファイルは表示せずフォルダのみ選択可能） */
+  folderSelectMode?: boolean;
+  /** ダイアログのタイトル */
+  title?: string;
+}
+
+export function FileBrowser({
+  isOpen,
+  currentPath,
+  onSelect,
+  onClose,
+  multiSelect = false,
+  filterJsonOnly = false,
+  folderSelectMode = false,
+  title
+}: FileBrowserProps) {
+  const [path, setPath] = useState(currentPath);
+  const [items, setItems] = useState<FileSystemItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (isOpen) {
+      // ダイアログが開かれた時、currentPathでパスをリセット
+      setPath(currentPath);
+      setSelectedFiles([]);
+    }
+  }, [isOpen, currentPath]);
+
+  useEffect(() => {
+    if (isOpen) {
+      // パスが変更された時にディレクトリをロード
+      loadDirectory(path);
+    }
+  }, [isOpen, path]);
+
+  const loadDirectory = async (dirPath: string) => {
+    setLoading(true);
+    try {
+      const response = await fetch('/api/files/browse', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ directory: dirPath })
+      });
+      const data = await response.json();
+      if (data.success) {
+        // フィルタリング
+        let filtered = data.data.items;
+        if (folderSelectMode) {
+          // フォルダ選択モード：フォルダのみ表示
+          filtered = data.data.items.filter((item: FileSystemItem) =>
+            item.type === 'directory'
+          );
+        } else if (filterJsonOnly) {
+          filtered = data.data.items.filter((item: FileSystemItem) =>
+            item.type === 'directory' || item.extension === '.json'
+          );
+        }
+        setItems(filtered);
+      } else {
+        console.error('API returned error:', data.error);
+      }
+    } catch (error) {
+      console.error('Failed to load directory:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleItemClick = (item: FileSystemItem) => {
+    if (item.type === 'directory') {
+      if (folderSelectMode) {
+        // フォルダ選択モード：ダブルクリックで移動、シングルクリックで選択
+        // ここではシングルクリックで選択のみ（移動はダブルクリックで）
+        setSelectedFiles([item.path]);
+      } else {
+        // 通常モード：ディレクトリはクリックで移動
+        setPath(item.path);
+      }
+    } else {
+      if (multiSelect) {
+        // 複数選択モード
+        setSelectedFiles(prev =>
+          prev.includes(item.path)
+            ? prev.filter(p => p !== item.path)
+            : [...prev, item.path]
+        );
+      } else {
+        // 単一選択モード
+        setSelectedFiles([item.path]);
+      }
+    }
+  };
+
+  const handleItemDoubleClick = (item: FileSystemItem) => {
+    if (item.type === 'directory') {
+      // ダブルクリックでディレクトリに移動
+      setPath(item.path);
+      setSelectedFiles([]);
+    }
+  };
+
+  // パス区切り文字を正規化する（クロスプラットフォーム対応）
+  const normalizePath = (p: string): string => {
+    // バックスラッシュをスラッシュに統一
+    return p.replace(/\\/g, '/');
+  };
+
+  // 現在のパスがルートパス（currentPath）より上かどうかをチェック
+  const isAtOrAboveRoot = (targetPath: string): boolean => {
+    const normalizedTarget = normalizePath(targetPath).toLowerCase();
+    const normalizedRoot = normalizePath(currentPath).toLowerCase();
+    // ターゲットがルートと同じか、ルートの親ディレクトリの場合はtrue
+    return !normalizedRoot.startsWith(normalizedTarget) || normalizedTarget === normalizedRoot;
+  };
+
+  // 親ディレクトリへの移動が可能かどうか
+  const canGoUp = (): boolean => {
+    const normalizedPath = normalizePath(path).toLowerCase();
+    const normalizedRoot = normalizePath(currentPath).toLowerCase();
+    // 現在のパスがルートパスと同じなら上に移動できない
+    return normalizedPath !== normalizedRoot;
+  };
+
+  const handleGoUp = () => {
+    // ルートパスより上には移動できない
+    if (!canGoUp()) {
+      return;
+    }
+
+    // パスを正規化（スラッシュに統一）
+    const normalizedPath = normalizePath(path);
+    const pathParts = normalizedPath.split('/').filter(p => p);
+
+    if (pathParts.length > 1) {
+      // 親ディレクトリへ移動
+      const parentParts = pathParts.slice(0, -1);
+
+      // パスを再構築
+      let parentPath: string;
+      if (parentParts.length === 1 && parentParts[0].includes(':')) {
+        // Windowsドライブルートの場合（例: C:/ ）
+        parentPath = parentParts[0] + '/';
+      } else if (parentParts[0].includes(':')) {
+        // Windowsドライブレターを含むパスの場合（例: C:/sksp）
+        parentPath = parentParts[0] + '/' + parentParts.slice(1).join('/');
+      } else if (normalizedPath.startsWith('/')) {
+        // Unix絶対パスの場合（例: /tmp/foo）
+        parentPath = '/' + parentParts.join('/');
+      } else {
+        // 相対パスの場合
+        parentPath = parentParts.join('/');
+      }
+
+      // 親パスがルートパスより上なら移動しない
+      const normalizedParent = normalizePath(parentPath).toLowerCase();
+      const normalizedRoot = normalizePath(currentPath).toLowerCase();
+      if (!normalizedParent.startsWith(normalizedRoot.split('/').slice(0, -1).join('/')) ||
+          normalizedRoot.startsWith(normalizedParent + '/') ||
+          normalizedRoot === normalizedParent) {
+        setPath(parentPath);
+      }
+    } else if (pathParts.length === 1 && !pathParts[0].includes(':')) {
+      // ルート以外の単一ディレクトリの場合
+      const normalizedRoot = normalizePath(currentPath).toLowerCase();
+      if (normalizedRoot === '.') {
+        return; // ルートが'.'なら上に移動しない
+      }
+      setPath('.');
+    }
+    // ドライブルート（例: C:/）やUnixルート（/）の場合は何もしない
+    // ディレクトリ移動時は選択を保持
+  };
+
+  const handleConfirm = () => {
+    if (folderSelectMode) {
+      // フォルダ選択モード：選択されたフォルダがあればそれを、なければ現在のパスを返す
+      const selectedPath = selectedFiles.length > 0 ? selectedFiles : [path];
+      onSelect(selectedPath);
+      setSelectedFiles([]);
+      onClose();
+    } else if (selectedFiles.length > 0) {
+      onSelect(selectedFiles);
+      setSelectedFiles([]);
+      onClose();
+    }
+  };
+
+  const handleClose = () => {
+    setSelectedFiles([]);
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
+        {/* ヘッダー */}
+        <div className="flex items-center justify-between p-4 border-b">
+          <h2 className="text-lg font-semibold">{title || (folderSelectMode ? 'フォルダを選択' : 'ファイルを選択')}</h2>
+          <button
+            onClick={handleClose}
+            className="text-gray-500 hover:text-gray-700"
+          >
+            ✕
+          </button>
+        </div>
+
+        {/* パスとナビゲーション */}
+        <div className="flex items-center gap-2 p-4 border-b bg-gray-50">
+          <button
+            onClick={handleGoUp}
+            disabled={!canGoUp()}
+            className={`p-2 rounded flex-shrink-0 ${canGoUp() ? 'hover:bg-gray-200' : 'opacity-50 cursor-not-allowed'}`}
+            title={canGoUp() ? '上のディレクトリへ' : 'ルートディレクトリです'}
+          >
+            <ArrowUpIcon className="w-5 h-5" />
+          </button>
+          <span className="text-sm text-gray-600 flex-1 truncate">パス: {path}</span>
+        </div>
+
+        {/* ファイル一覧 */}
+        <div className="flex-1 overflow-y-auto p-4">
+          {loading ? (
+            <div className="text-center text-gray-500">読み込み中...</div>
+          ) : (
+            <div className="space-y-1">
+              {items.map((item) => {
+                const isSelected = selectedFiles.includes(item.path);
+                return (
+                  <div
+                    key={item.path}
+                    onClick={() => handleItemClick(item)}
+                    onDoubleClick={() => handleItemDoubleClick(item)}
+                    className={`flex items-center gap-2 p-2 rounded cursor-pointer hover:bg-gray-100 ${
+                      isSelected ? 'bg-blue-100' : ''
+                    }`}
+                  >
+                    {item.type === 'directory' ? (
+                      <FolderIcon className="w-5 h-5 text-blue-500" />
+                    ) : (
+                      <FileIcon className="w-5 h-5 text-green-500" />
+                    )}
+                    <span className="text-sm">{item.name}</span>
+                    {isSelected && (multiSelect || folderSelectMode) && (
+                      <span className="ml-auto text-blue-500">✓</span>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* フッター */}
+        <div className="flex items-center justify-between p-4 border-t">
+          {folderSelectMode ? (
+            <div className="text-sm text-gray-600">
+              {selectedFiles.length > 0 ? `選択中: ${selectedFiles[0].split(/[/\\]/).pop()}` : `現在のフォルダ: ${path.split(/[/\\]/).pop() || path}`}
+            </div>
+          ) : multiSelect && selectedFiles.length > 0 ? (
+            <div className="text-sm text-gray-600">
+              {selectedFiles.length}件選択中
+            </div>
+          ) : null}
+          <div className="flex items-center gap-2 ml-auto">
+            <button
+              onClick={handleClose}
+              className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded"
+            >
+              キャンセル
+            </button>
+            <button
+              onClick={handleConfirm}
+              disabled={!folderSelectMode && selectedFiles.length === 0}
+              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed"
+            >
+              選択
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+'use client';
+
+import { DownloadIcon } from 'lucide-react';
+
+interface HeaderProps {
+  onExportClick: () => void;
+}
+
+export function Header({ onExportClick }: HeaderProps) {
+  return (
+    <header className="bg-white/80 backdrop-blur-md border-b border-gray-200 shadow-sm sticky top-0 z-50">
+      <div className="container mx-auto px-6 py-4 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <img
+            src="/logo.svg"
+            alt="ConfigDoc"
+            className="w-12 h-12 rounded-lg"
+          />
+          <div>
+            <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+              ConfigDoc
+            </h1>
+            <p className="text-xs text-gray-500">Configuration Documentation Tool</p>
+          </div>
+        </div>
+        <button
+          onClick={onExportClick}
+          className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-lg hover:from-green-600 hover:to-emerald-700 shadow-md hover:shadow-lg transition-all duration-200 transform"
+          title="エクスポート"
+        >
+          <DownloadIcon className="w-5 h-5" />
+          <span className="font-medium">エクスポート</span>
+        </button>
+      </div>
+    </header>
+  );
+}