style: filename use kebab-case

Author: json-q

src/App.tsx

@@ -2,18 +2,18 @@ import { lazy, Suspense } from "react";
 import { Allotment } from "allotment";
 import "allotment/dist/style.css";
 
-import Header from "@/layout/Header";
+import RootHeader from "@/layout/root-header";
 import { PlaygroundProvider } from "@/core/context/PlaygroundProvider";
 import LazyLoading from "@/components/LazyLoading";
 import { Toaster } from "./components/ui/sonner";
 
-const RootEditor = lazy(() => import("@/layout/RootEditor"));
-const RootPreview = lazy(() => import("@/layout/RootPreview"));
+const RootEditor = lazy(() => import("@/layout/root-editor"));
+const RootPreview = lazy(() => import("@/layout/root-preview"));
 
 function App() {
   return (
     <div className='flex h-screen flex-col'>
-      <Header />
+      <RootHeader />
       <Toaster richColors position='top-right' />
 
       <section className='flex-1'>

src/components/CodeContainer/ata.ts renamed to src/components/code-container/ata.ts

@@ -109,9 +109,13 @@ export default function FileNameListItem(props: FileNameListItemProps) {
       <AlertDialog open={open} onOpenChange={setOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>删除提醒</AlertDialogTitle>
+            <AlertDialogTitle>操作提醒</AlertDialogTitle>
             <AlertDialogDescription>
-              确定删除 <code>{delFileName}</code> ?
+              是否删除
+              <code className='relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono font-sesemibosemibold'>
+                {delFileName}
+              </code>
+              ?
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>

src/components/CodeContainer/index.tsx renamed to src/components/code-container/index.tsx

@@ -1,7 +1,7 @@
 import { PlaygroundContext } from "@/core/context";
 import { useContext, useEffect, useMemo, useRef } from "react";
 import { debounce } from "lodash-es";
-import FileNameListItem from "./FileNameListItem";
+import FileNameListItem from "./filename-list-item";
 import { Plus } from "lucide-react";
 import { ENTRY_FILE_NAME } from "@/core/files";
 

src/components/FileNameList/FileNameListItem.tsx renamed to src/components/filename-list/filename-list-item.tsx

@@ -1,4 +1,4 @@
-import type { CodeContainerFileInfo } from "@/components/CodeContainer";
+import type { CodeContainerFileInfo } from "@/components/code-container";
 import { createContext } from "react";
 
 export interface MultipleFiles {

src/components/FileNameList/index.tsx renamed to src/components/filename-list/index.tsx

@@ -1,10 +1,10 @@
 import { lazy, Suspense, useContext } from "react";
-import FileNameList from "@/components/FileNameList";
+import FileNameList from "@/components/filename-list";
 import { PlaygroundContext } from "@/core/context";
 import { debounce } from "lodash-es";
 import LazyLoading from "@/components/LazyLoading";
 
-const CodeContainer = lazy(() => import("@/components/CodeContainer"));
+const CodeContainer = lazy(() => import("@/components/code-container"));
 
 export default function RootEditor() {
   const { files = {}, setFiles, selectedFileName } = useContext(PlaygroundContext);

src/core/context/index.ts

@@ -1,5 +1,5 @@
-import ReactLogo from "@/icons/ReactLogo";
-export default function Header() {
+import ReactLogo from "@/icons/react-logo";
+export default function RootHeader() {
   return (
     <header className='flex items-center border-b p-2'>
       <ReactLogo className='h-8 w-8' style={{ color: "#61DAFB" }} />

src/icons/ReactLogo.tsx renamed to src/icons/react-logo.tsx

@@ -1,7 +1,7 @@
 import { transform } from "@babel/standalone";
 import type { MultipleFiles } from "@/core/context";
 import { ENTRY_FILE_NAME } from "@/core/files";
-import type { CodeContainerFileInfo } from "@/components/CodeContainer";
+import type { CodeContainerFileInfo } from "@/components/code-container";
 
 type TransformOptions = Parameters<typeof transform>["1"];
 type PluginItem = TransformOptions["plugins"];