style(prettier): format code style

lib/components/customization/editor.tsx

@@ -1,46 +1,91 @@
 import React from 'react'
-import { Text, Button, useTheme, ZeitUIThemesPalette, ZeitUIThemesExpressiveness, ZeitUIThemesLayout } from 'components'
+import {
+  Text,
+  Button,
+  useTheme,
+  ZeitUIThemesPalette,
+  ZeitUIThemesExpressiveness,
+  ZeitUIThemesLayout,
+} from 'components'
 import EditorColorItem from './editor-color-item'
 import EditorInputItem from './editor-input-item'
 import DefaultTheme from 'components/styles/themes/default'
 import { useConfigs } from 'lib/config-context'
 
 const basicColors: Array<keyof ZeitUIThemesPalette> = [
-  'accents_1', 'accents_2', 'accents_3', 'accents_4', 'accents_5', 'accents_6',
-  'accents_7', 'accents_8', 'foreground', 'background',
+  'accents_1',
+  'accents_2',
+  'accents_3',
+  'accents_4',
+  'accents_5',
+  'accents_6',
+  'accents_7',
+  'accents_8',
+  'foreground',
+  'background',
 ]
 const statusColors: Array<keyof ZeitUIThemesPalette> = [
-  'success', 'successLight', 'successDark', 'error', 'errorLight', 'errorDark',
-  'warning', 'warningLight', 'warningDark',
+  'success',
+  'successLight',
+  'successDark',
+  'error',
+  'errorLight',
+  'errorDark',
+  'warning',
+  'warningLight',
+  'warningDark',
 ]
 const otherColors: Array<keyof ZeitUIThemesPalette> = [
-  'selection', 'secondary', 'link', 'border', 'code', 'cyan', 'purple', 'alert', 'violet'
+  'selection',
+  'secondary',
+  'link',
+  'border',
+  'code',
+  'cyan',
+  'purple',
+  'alert',
+  'violet',
 ]
 const expressiveness: Array<keyof ZeitUIThemesExpressiveness> = [
-  'linkStyle', 'linkHoverStyle', 'dropdownBoxShadow', 'shadowSmall',
-  'shadowMedium', 'shadowLarge',
+  'linkStyle',
+  'linkHoverStyle',
+  'dropdownBoxShadow',
+  'shadowSmall',
+  'shadowMedium',
+  'shadowLarge',
 ]
 const pageLayout: Array<keyof ZeitUIThemesLayout> = [
-  'pageWidth', 'pageWidthWithMargin', 'pageMargin', 'radius',
+  'pageWidth',
+  'pageWidthWithMargin',
+  'pageMargin',
+  'radius',
 ]
 const gapLayout: Array<keyof ZeitUIThemesLayout> = [
-  'gap', 'gapNegative', 'gapHalf', 'gapHalfNegative', 'gapQuarter', 'gapQuarterNegative',
+  'gap',
+  'gapNegative',
+  'gapHalf',
+  'gapHalfNegative',
+  'gapQuarter',
+  'gapQuarterNegative',
 ]
 
 const Editor = () => {
   const theme = useTheme()
   const { updateCustomTheme, isChinese } = useConfigs()
-  
+
   const resetLayout = () => updateCustomTheme({ layout: DefaultTheme.layout })
   const restColors = () => updateCustomTheme({ palette: DefaultTheme.palette })
   const resetExpressiveness = () => {
     updateCustomTheme({ expressiveness: DefaultTheme.expressiveness })
   }
-  
+
   return (
     <div className="editor">
-      <Text h3>{isChinese ? '色彩' : 'Colors'}
-        <Button type="abort" auto size="mini" onClick={restColors}>{isChinese ? '重置' : 'Reset'}</Button>
+      <Text h3>
+        {isChinese ? '色彩' : 'Colors'}
+        <Button type="abort" auto size="mini" onClick={restColors}>
+          {isChinese ? '重置' : 'Reset'}
+        </Button>
       </Text>
       <p className="subtitle">{isChinese ? '基础' : 'basic'}</p>
       <div className="content">
@@ -60,9 +105,12 @@ const Editor = () => {
           <EditorColorItem key={`${item}-${index}`} keyName={item} />
         ))}
       </div>
-  
-      <Text h3>{isChinese ? '表现力' : 'Expressiveness'}
-        <Button type="abort" auto size="mini" onClick={resetExpressiveness}>{isChinese ? '重置' : 'Reset'}</Button>
+
+      <Text h3>
+        {isChinese ? '表现力' : 'Expressiveness'}
+        <Button type="abort" auto size="mini" onClick={resetExpressiveness}>
+          {isChinese ? '重置' : 'Reset'}
+        </Button>
       </Text>
       <p className="subtitle">{isChinese ? '基础' : 'basic'}</p>
       <div className="content">
@@ -70,14 +118,20 @@ const Editor = () => {
           <EditorInputItem key={`${item}-${index}`} groupName="expressiveness" keyName={item} />
         ))}
       </div>
-  
-      <Text h3>{isChinese ? '布局' : 'Layout'}
-        <Button type="abort" auto size="mini" onClick={resetLayout}>{isChinese ? '重置' : 'Reset'}</Button>
+
+      <Text h3>
+        {isChinese ? '布局' : 'Layout'}
+        <Button type="abort" auto size="mini" onClick={resetLayout}>
+          {isChinese ? '重置' : 'Reset'}
+        </Button>
       </Text>
       {isChinese ? (
         <p>大多数的布局间距都依赖这些变量，不合理的更改可能会导致布局失衡。</p>
       ) : (
-        <p>Most layout spacing depends on these variables, unreasonable changes may cause layout imbalance.</p>
+        <p>
+          Most layout spacing depends on these variables, unreasonable changes may cause layout
+          imbalance.
+        </p>
       )}
       <p className="subtitle">{isChinese ? '基础' : 'basic'}</p>
       <div className="content">
@@ -101,15 +155,15 @@ const Editor = () => {
           margin: 0 auto;
           padding-left: ${theme.layout.gapQuarter};
         }
-        
+
         .editor :global(h3) {
           margin: 2rem 0 1rem 0;
         }
-        
+
         .subtitle {
           color: ${theme.palette.accents_4};
           text-transform: uppercase;
-          font-size: .75rem;
+          font-size: 0.75rem;
           margin-top: 2rem;
         }
       `}</style>