style(prettier): format code style

lib/components/attributes/attributes-title.tsx

@@ -7,52 +7,58 @@ export interface AttributesTitleProps {
   alias?: string
 }
 
-const getAlias = (isChinese: boolean, alias?: string, ) => {
+const getAlias = (isChinese: boolean, alias?: string) => {
   if (!alias) return null
   return (
-    <small><span>[</span>{isChinese ? '别名' : 'alias'}: <Code>{alias}</Code><span>]</span></small>
+    <small>
+      <span>[</span>
+      {isChinese ? '别名' : 'alias'}: <Code>{alias}</Code>
+      <span>]</span>
+    </small>
   )
 }
 
-const AttributesTitle: React.FC<React.PropsWithChildren<AttributesTitleProps>> = React.memo(({
-  children, alias,
-}) => {
-  const theme = useTheme()
-  const { isChinese } = useConfigs()
+const AttributesTitle: React.FC<React.PropsWithChildren<AttributesTitleProps>> = React.memo(
+  ({ children, alias }) => {
+    const theme = useTheme()
+    const { isChinese } = useConfigs()
 
-  return (
-    <>
-      <h4 className="title">
-        <Code><VirtualAnchor pure>{children}</VirtualAnchor></Code>
-        {getAlias(!!isChinese, alias)}
-      </h4>
-      <Spacer y={.6} />
-  
-      <style jsx>{`
-        h4 {
-          display: inline-flex;
-          align-items: center;
-          height: 2rem;
-          padding-left: ${theme.layout.gapQuarter};
-          padding-right: ${theme.layout.gapHalf};
-          background-color: ${theme.palette.accents_1};
-          border-radius: ${theme.layout.radius};
-        }
+    return (
+      <>
+        <h4 className="title">
+          <Code>
+            <VirtualAnchor pure>{children}</VirtualAnchor>
+          </Code>
+          {getAlias(!!isChinese, alias)}
+        </h4>
+        <Spacer y={0.6} />
 
-        h4 :global(small) {
-          font-size: .65em;
-          padding-left: .65rem;
-          color: ${theme.palette.accents_4};
-          align-self: flex-end;
-          line-height: 1.6rem;
-        }
-        
-        h4 :global(span) {
-          color: ${theme.palette.accents_6};
-        }
-      `}</style>
-    </>
-  )
-})
+        <style jsx>{`
+          h4 {
+            display: inline-flex;
+            align-items: center;
+            height: 2rem;
+            padding-left: ${theme.layout.gapQuarter};
+            padding-right: ${theme.layout.gapHalf};
+            background-color: ${theme.palette.accents_1};
+            border-radius: ${theme.layout.radius};
+          }
+
+          h4 :global(small) {
+            font-size: 0.65em;
+            padding-left: 0.65rem;
+            color: ${theme.palette.accents_4};
+            align-self: flex-end;
+            line-height: 1.6rem;
+          }
+
+          h4 :global(span) {
+            color: ${theme.palette.accents_6};
+          }
+        `}</style>
+      </>
+    )
+  },
+)
 
 export default AttributesTitle

lib/components/attributes/attributes.tsx

@@ -9,116 +9,118 @@ export interface AttributesProps {
   edit: string
 }
 
-const Attributes: React.FC<React.PropsWithChildren<AttributesProps>> = React.memo(({
-  edit, children,
-}) => {
-  const theme = useTheme()
-  const { isChinese } = useConfigs()
-  const path = edit.replace('/pages', 'pages')
-  
-  return (
-    <>
-      <Spacer y={5} />
-      <h3><VirtualAnchor>APIs</VirtualAnchor>{isChinese && ' / 接口文档'}</h3>
-      <Card className="attr">
-        {children}
-      </Card>
-      <Spacer y={3} />
-      <h4 className="contributor-title">{isChinese ? '文档贡献者' : 'Contributors'}</h4>
-      <Contributors path={path} />
-      <style global jsx>{`
-        .attr table {
-          margin-right: ${theme.layout.gap};
-        }
+const Attributes: React.FC<React.PropsWithChildren<AttributesProps>> = React.memo(
+  ({ edit, children }) => {
+    const theme = useTheme()
+    const { isChinese } = useConfigs()
+    const path = edit.replace('/pages', 'pages')
 
-        .attr pre {
-          margin: 0;
-        }
-        
-        .attr h4.title {
-          margin-top: calc(${theme.layout.gap} * 2.2);
-        }
+    return (
+      <>
+        <Spacer y={5} />
+        <h3>
+          <VirtualAnchor>APIs</VirtualAnchor>
+          {isChinese && ' / 接口文档'}
+        </h3>
+        <Card className="attr">{children}</Card>
+        <Spacer y={3} />
+        <h4 className="contributor-title">{isChinese ? '文档贡献者' : 'Contributors'}</h4>
+        <Contributors path={path} />
+        <style global jsx>{`
+          .attr table {
+            margin-right: ${theme.layout.gap};
+          }
 
-        .attr h4.title:first-of-type {
-          margin-top: 0;
-        }
-        
-        .attr table {
-          border-collapse: separate;
-          border-spacing: 0;
-          width: 100%;
-        }
-        
-        .attr thead th td {
-          height: 2.5rem;
-        }
-        
-        .attr tbody tr td {
-          height: 3.333rem;
-        }
-        
-        .attr th, .attr td {
-          padding: 0 0.625rem;
-          text-align: left;
-        }
-        
-        .attr th {
-          height: 2.5rem;
-          color: ${theme.palette.accents_5};;
-          font-size: 0.75rem;
-          font-weight: 400;
-          letter-spacing: 0;
-          background: ${theme.palette.accents_1};
-          border-bottom: 1px solid ${theme.palette.border};
-          border-top: 1px solid ${theme.palette.border};
-        }
-        
-        .attr th:nth-child(1) {
-          border-bottom: 1px solid ${theme.palette.border};
-          border-left: 1px solid ${theme.palette.border};
-          border-radius: 4px 0 0 4px;
-          border-top: 1px solid ${theme.palette.border};
-        }
-        
-        .attr th:last-child {
-          border-bottom: 1px solid ${theme.palette.border};
-          border-radius: 0 4px 4px 0;
-          border-right: 1px solid ${theme.palette.border};
-          border-top: 1px solid ${theme.palette.border};
-        }
-        
-        .attr tr td {
-          border-bottom: 1px solid ${theme.palette.border};
-          color: ${theme.palette.accents_6};
-          font-size: 0.875rem;
-          height: 2.5rem;
-        }
-        
-        .attr td:nth-child(1) {
-          border-left: 1px solid transparent;
-        }
-        
-        .contributor-title {
-          text-transform: uppercase;
-          font-size: 1rem;
-          letter-spacing: 1.5px;
-        }
-        
-        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
-          .attr {
-            overflow-x: scroll;
+          .attr pre {
+            margin: 0;
           }
-          
-          .attr::-webkit-scrollbar {
-            width: 0;
-            height: 0;
-            background-color: transparent;
+
+          .attr h4.title {
+            margin-top: calc(${theme.layout.gap} * 2.2);
           }
-        }
-      `}</style>
-    </>
-  )
-})
+
+          .attr h4.title:first-of-type {
+            margin-top: 0;
+          }
+
+          .attr table {
+            border-collapse: separate;
+            border-spacing: 0;
+            width: 100%;
+          }
+
+          .attr thead th td {
+            height: 2.5rem;
+          }
+
+          .attr tbody tr td {
+            height: 3.333rem;
+          }
+
+          .attr th,
+          .attr td {
+            padding: 0 0.625rem;
+            text-align: left;
+          }
+
+          .attr th {
+            height: 2.5rem;
+            color: ${theme.palette.accents_5};
+            font-size: 0.75rem;
+            font-weight: 400;
+            letter-spacing: 0;
+            background: ${theme.palette.accents_1};
+            border-bottom: 1px solid ${theme.palette.border};
+            border-top: 1px solid ${theme.palette.border};
+          }
+
+          .attr th:nth-child(1) {
+            border-bottom: 1px solid ${theme.palette.border};
+            border-left: 1px solid ${theme.palette.border};
+            border-radius: 4px 0 0 4px;
+            border-top: 1px solid ${theme.palette.border};
+          }
+
+          .attr th:last-child {
+            border-bottom: 1px solid ${theme.palette.border};
+            border-radius: 0 4px 4px 0;
+            border-right: 1px solid ${theme.palette.border};
+            border-top: 1px solid ${theme.palette.border};
+          }
+
+          .attr tr td {
+            border-bottom: 1px solid ${theme.palette.border};
+            color: ${theme.palette.accents_6};
+            font-size: 0.875rem;
+            height: 2.5rem;
+          }
+
+          .attr td:nth-child(1) {
+            border-left: 1px solid transparent;
+          }
+
+          .contributor-title {
+            text-transform: uppercase;
+            font-size: 1rem;
+            letter-spacing: 1.5px;
+          }
+
+          @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
+            .attr {
+              overflow-x: scroll;
+            }
+
+            .attr::-webkit-scrollbar {
+              width: 0;
+              height: 0;
+              background-color: transparent;
+            }
+          }
+        `}</style>
+      </>
+    )
+  },
+)
 
 type AttributesComponent<P = {}> = React.FC<P> & {
   Title: typeof AttributesTitle

lib/components/attributes/contributors.tsx

@@ -29,7 +29,7 @@ const Contributors: React.FC<Props> = ({ path }) => {
   const { isChinese } = useConfigs()
   const [users, setUsers] = useState<Array<Contributor>>([])
   const link = useMemo(() => `${GithubURL}/${path || '/pages'}`, [])
-  
+
   useEffect(() => {
     let unmount = false
     ;(async () => {
@@ -41,7 +41,7 @@ const Contributors: React.FC<Props> = ({ path }) => {
       unmount = true
     }
   }, [])
-  
+
   return (
     <div className="contributors">
       {users.map((user, index) => (
@@ -65,7 +65,7 @@ const Contributors: React.FC<Props> = ({ path }) => {
           display: flex;
           flex-wrap: wrap;
         }
-        
+
         .contributors :global(.tooltip) {
           margin-right: 3px;
         }