version 1.13.5 : add theme schema

components/markdown/FileTreeMdx.tsx

@@ -1,12 +1,7 @@
 'use client';
 
 import React, { useState, ReactNode, Children, isValidElement, cloneElement } from 'react';
-import { ChevronRight, ChevronDown, File as FileIcon, Folder as FolderIcon, FolderOpen } from 'lucide-react';
-
-interface FileTreeProps {
-  children: ReactNode;
-  defaultOpen?: boolean;
-}
+import { ChevronRight, File as FileIcon, Folder as FolderIcon, FolderOpen } from 'lucide-react';
 
 interface FileProps {
   name: string;
@@ -15,24 +10,27 @@ interface FileProps {
 
 const FileComponent = ({ name }: FileProps) => {
   const [isHovered, setIsHovered] = useState(false);
+  const fileExtension = name.split('.').pop()?.toUpperCase();
 
   return (
     <div
       className={`
-        flex items-center gap-2 py-1.5 pl-7 pr-3 text-sm
-        transition-all duration-200 ease-in-out rounded-md
-        ${isHovered
-          ? 'bg-blue-50 dark:bg-blue-900/30'
-          : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}
+        flex items-center gap-2 py-1.5 pl-7 pr-3 text-sm rounded-md
+        transition-colors duration-150 cursor-default select-none
+        ${isHovered ? 'bg-accent/10' : 'hover:bg-muted/50'}
       `}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
+      tabIndex={-1}
     >
-      <FileIcon className={`h-3.5 w-3.5 transition-colors ${isHovered ? 'text-blue-500' : 'text-gray-400 dark:text-gray-500'}`} />
-      <span className="font-mono text-sm text-gray-700 dark:text-gray-300">{name}</span>
-      {isHovered && (
-        <span className="ml-auto text-xs text-gray-400 dark:text-gray-500">
-          {name.split('.').pop()?.toUpperCase()}
+      <FileIcon className={`
+        h-3.5 w-3.5 flex-shrink-0 transition-colors
+        ${isHovered ? 'text-accent' : 'text-muted-foreground'}
+      `} />
+      <span className="font-mono text-sm text-foreground truncate">{name}</span>
+      {isHovered && fileExtension && (
+        <span className="ml-auto text-xs text-muted-foreground/80">
+          {fileExtension}
         </span>
       )}
     </div>
@@ -48,31 +46,49 @@ const FolderComponent = ({ name, children }: FileProps) => {
     <div className="relative">
       <div
         className={`
-          flex items-center gap-2 py-1.5 pl-4 pr-3 rounded-md cursor-pointer
-          transition-all duration-200 ease-in-out
-          ${isHovered ? 'bg-gray-50 dark:bg-gray-800/50' : ''}
-          ${isOpen ? 'text-blue-600 dark:text-blue-400' : 'text-gray-800 dark:text-gray-200'}
+          flex items-center gap-2 py-1.5 pl-4 pr-3 rounded-md
+          transition-colors duration-150 select-none
+          ${isHovered ? 'bg-muted/60' : ''}
+          ${isOpen ? 'text-foreground' : 'text-foreground/80'}
+          ${hasChildren ? 'cursor-pointer' : 'cursor-default'}
         `}
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={() => hasChildren && setIsOpen(!isOpen)}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
+        tabIndex={-1}
+        onKeyDown={(e) => e.preventDefault()}
       >
         {hasChildren ? (
           <ChevronRight
-            className={`h-3.5 w-3.5 transition-transform duration-200 ${isOpen ? 'transform rotate-90' : ''}`}
+            className={`
+              h-3.5 w-3.5 flex-shrink-0 transition-transform duration-200
+              ${isOpen ? 'rotate-90' : ''}
+              ${isHovered ? 'text-foreground/70' : 'text-muted-foreground'}
+            `}
           />
         ) : (
           <div className="w-3.5" />
         )}
         {isOpen ? (
-          <FolderOpen className="h-4 w-4 text-blue-500 dark:text-blue-400" />
+          <FolderOpen className={`
+            h-4 w-4 flex-shrink-0 transition-colors
+            ${isHovered ? 'text-accent' : 'text-muted-foreground'}
+          `} />
         ) : (
-          <FolderIcon className="h-4 w-4 text-blue-400 dark:text-blue-500" />
+          <FolderIcon className={`
+            h-4 w-4 flex-shrink-0 transition-colors
+            ${isHovered ? 'text-accent/80' : 'text-muted-foreground/80'}
+          `} />
         )}
-        <span className="font-medium">{name}</span>
+        <span className={`
+          font-medium transition-colors duration-150
+          ${isHovered ? 'text-accent' : ''}
+        `}>
+          {name}
+        </span>
       </div>
       {isOpen && hasChildren && (
-        <div className="ml-5 border-l-2 border-gray-100 dark:border-gray-700/50 pl-2">
+        <div className="ml-5 border-l-2 border-muted/50 pl-2">
           {children}
         </div>
       )}
@@ -82,13 +98,16 @@ const FolderComponent = ({ name, children }: FileProps) => {
 
 export const Files = ({ children }: { children: ReactNode }) => {
   return (
-    <div className="
-      rounded-xl border border-gray-100 dark:border-gray-700/50
-      bg-white/50 dark:bg-gray-800/30 backdrop-blur-sm
-      shadow-sm overflow-hidden
-      transition-all duration-200
-      hover:shadow-md hover:border-gray-200 dark:hover:border-gray-600/50
-    ">
+    <div
+      className="
+        rounded-xl border border-muted/50
+        bg-card/50 backdrop-blur-sm
+        shadow-sm overflow-hidden
+        transition-all duration-200
+        hover:shadow-md hover:border-muted/60
+      "
+      onKeyDown={(e) => e.preventDefault()}
+    >
       <div className="p-2">
         {Children.map(children, (child, index) => {
           if (isValidElement(child)) {