legend

Bowen7 · Jul 21, 2024 · 2ac88e1 · 2ac88e1
1 parent 262489c
commit 2ac88e1
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 111 deletions.
diff --git a/src/modules/editor/index.tsx b/src/modules/editor/index.tsx
@@ -67,92 +67,30 @@ function Editor({ defaultTab, collapsed }: Props) {
   })
 
   return (
-    <>
-      <Tabs
-        value={tabValue}
-        onValueChange={(value: string) => setTabValue(value as Tab)}
-        className={clsx('flex flex-col h-[calc(100vh-64px)] py-4 border-l transition-width', collapsed ? 'w-[0px]' : 'w-[300px]')}
-      >
-        <TabsList className="grid grid-cols-3 mx-4">
-          <TabsTrigger value="legend">{t('Legends')}</TabsTrigger>
-          <TabsTrigger value="edit" disabled={editDisabled}>{t('Edit')}</TabsTrigger>
-          <TabsTrigger value="test">{t('Test')}</TabsTrigger>
-        </TabsList>
-        <ScrollArea className="flex-1">
-          <div className="w-[300px] p-4">
-            <TabsContent value="legend">
-              <LegendTab />
-            </TabsContent>
-            <TabsContent value="edit">
-              <EditTab />
-            </TabsContent>
-            <TabsContent value="test">
-              <TestTab />
-            </TabsContent>
-          </div>
-        </ScrollArea>
-      </Tabs>
-      {/* <style jsx>
-        {`
-        .container {
-          position: fixed;
-          top: 64px;
-          right: 0;
-          height: calc(100% - 64px);
-          width: 275px;
-          border-left: 1px solid ${palette.accents_2};
-          transition: transform 0.3s ease-out;
-        }
-        .collapsed-container {
-          transform: translateX(275px);
-        }
-
-        footer {
-          height: 45px;
-          text-align: center;
-          line-height: 45px;
-          border-top: 2px solid ${palette.accents_1};
-          cursor: pointer;
-        }
-        footer :global(svg) {
-          vertical-align: middle;
-        }
-
-        .uncollapse-btn :global(button) {
-          position: fixed;
-          right: 24px;
-          bottom: 24px;
-        }
-        .uncollapse-btn :global(svg) {
-          width: 20px;
-          height: 20px;
-        }
-        .container > :global(.tabs) {
-          height: calc(100% - 45px);
-        }
-        .container > :global(.tabs > .content) {
-          height: calc(100% - 45px);
-        }
-        .content {
-          position: relative;
-          height: calc(100%);
-          overflow-y: auto;
-        }
-        .container > :global(.tabs > header) {
-          padding: 0 12px;
-        }
-        .container > :global(.tabs > header .highlight) {
-          display: none;
-        }
-        .container :global(.tabs > header .tab) {
-          width: 33.3%;
-          margin: 0;
-          justify-content: center;
-          height: 45px;
-        }
-      `}
-      </style> */}
-    </>
+    <Tabs
+      value={tabValue}
+      onValueChange={(value: string) => setTabValue(value as Tab)}
+      className={clsx('flex flex-col h-[calc(100vh-64px)] py-4 border-l transition-width', collapsed ? 'w-[0px]' : 'w-[300px]')}
+    >
+      <TabsList className="grid grid-cols-3 mx-4 mb-6">
+        <TabsTrigger value="legend">{t('Legends')}</TabsTrigger>
+        <TabsTrigger value="edit" disabled={editDisabled}>{t('Edit')}</TabsTrigger>
+        <TabsTrigger value="test">{t('Test')}</TabsTrigger>
+      </TabsList>
+      <ScrollArea className="flex-1">
+        <div className="w-[300px] p-4 pt-0">
+          <TabsContent value="legend">
+            <LegendTab />
+          </TabsContent>
+          <TabsContent value="edit">
+            <EditTab />
+          </TabsContent>
+          <TabsContent value="test">
+            <TestTab />
+          </TabsContent>
+        </div>
+      </ScrollArea>
+    </Tabs>
   )
 }
 

diff --git a/src/modules/editor/legend-tab.tsx b/src/modules/editor/legend-tab.tsx
@@ -1,4 +1,3 @@
-import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
 import legends from './legends'
 
@@ -13,13 +12,15 @@ function Legend() {
         </div> */}
       {legends.map(({ name, infos }) => (
         <div key={name}>
-          <h5>{t(name)}</h5>
-          {infos.map(({ Icon, desc }) => (
-            <Fragment key={desc}>
-              {Icon}
-              <span>{t(desc)}</span>
-            </Fragment>
-          ))}
+          <h5 className="font-bold mb-4">{t(name)}</h5>
+          <div className="space-y-6">
+            {infos.map(({ Icon, desc }) => (
+              <div key={desc}>
+                {Icon}
+                <span className="text-foreground/80">{t(desc)}</span>
+              </div>
+            ))}
+          </div>
         </div>
       ))}
     </div>

diff --git a/src/modules/home/regex-input.tsx b/src/modules/home/regex-input.tsx
@@ -96,11 +96,11 @@ const RegexInput: React.FC<Props> = ({
                 return (
                   <label
                     key={value}
-                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
                   >
-                    <div className="flex items-center space-x-1">
+                    <div className="flex items-center space-x-2">
                       <CheckboxItem value={value} />
-                      {label}
+                      <span>{label}</span>
                     </div>
                   </label>
                 )

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,26 +1,26 @@
 {
   "compilerOptions": {
     "target": "es5",
+    "jsx": "react-jsx",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
     "module": "esnext",
     "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "noFallthroughCasesInSwitch": true,
-    "types": ["vite/client", "vite-plugin-svgr/client"],
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"],
       "tests/*": ["../tests/*"]
-    }
+    },
+    "resolveJsonModule": true,
+    "types": ["vite/client", "vite-plugin-svgr/client"],
+    "allowJs": true,
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noEmit": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
   },
   "include": ["src", "tests"]
 }