refactor(antd): wrap BackTop and classnames

issue #699

components/Article/ArticleHeader.tsx

@@ -5,9 +5,9 @@ import {
 } from '@ant-design/icons';
 import { Slide } from '@components/Motion';
 import { IconTag, LinkTag } from '@components/Tags';
+import { classNames } from '@components/utils';
 import { siteConfig } from '@config';
 import type { PostMeta } from '@types';
-import classNames from 'classnames';
 
 interface Props {
   post: PostMeta;

components/Article/ArticleNav.tsx

@@ -6,8 +6,8 @@ import {
 import FlexContainer from '@components/FlexContainer';
 import Link from '@components/Link';
 import { Bounce } from '@components/Motion';
+import { classNames } from '@components/utils';
 import type { PostMeta } from '@types';
-import classNames from 'classnames';
 
 interface Props {
   prevPost: PostMeta['prevPost'];

components/Article/ArticleToc.tsx

@@ -1,6 +1,6 @@
 import { CloseOutlined, MenuFoldOutlined } from '@ant-design/icons';
+import { classNames } from '@components/utils';
 import { Button, Drawer } from 'antd';
-import classNames from 'classnames';
 import { useCallback, useState } from 'react';
 import styles from './ArticleToc.module.css';
 

components/BackTop/BackTop.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import BackTop from './BackTop';
+
+describe('BackTop', () => {
+  test('should render correctly (snapshot)', () => {
+    const { container } = render(<BackTop />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

components/BackTop/BackTop.tsx

@@ -0,0 +1,5 @@
+import { BackTop as AntBackTop } from 'antd';
+
+const BackTop = () => <AntBackTop />;
+
+export default BackTop;

components/BackTop/__snapshots__/BackTop.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BackTop should render correctly (snapshot) 1`] = `
+<div>
+  <div
+    class="ant-back-top"
+  />
+</div>
+`;

components/BackTop/index.ts

@@ -0,0 +1 @@
+export { default } from './BackTop';

components/Header/DesktopNav.tsx

@@ -1,10 +1,10 @@
 import Link from '@components/Link';
 import PostsSearchBar from '@components/PostsSearchBar';
+import { classNames } from '@components/utils';
 import { routes } from '@config';
 import logo from '@images/logo-full.png';
 import type { PostMeta } from '@types';
 import { Menu } from 'antd';
-import classNames from 'classnames';
 import Image from 'next/image';
 
 interface Props {

components/LandingNav/LandingNav.tsx

@@ -1,7 +1,7 @@
 import { Close, Hamburger } from '@components/Icons';
+import { classNames } from '@components/utils';
 import { routes as defaultRoutes } from '@config';
 import type { Route } from '@types';
-import classNames from 'classnames';
 import { motion } from 'framer-motion';
 import { useCallback, useState } from 'react';
 import LandingNavLink from './LandingNavLink';

components/LandingNav/LandingNavLink.tsx

@@ -1,7 +1,7 @@
 import Link from '@components/Link';
 import { Bounce } from '@components/Motion';
+import { classNames } from '@components/utils';
 import { Tooltip } from 'antd';
-import classNames from 'classnames';
 import type { ReactNode } from 'react';
 
 interface Props {

components/Motion/Bounce.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { classNames } from '@components/utils';
 import { motion } from 'framer-motion';
 import type { ReactNode } from 'react';
 

components/NotFoundResult/NotFoundResult.tsx

@@ -1,6 +1,6 @@
 import Link from '@components/Link';
+import { classNames } from '@components/utils';
 import { Result } from 'antd';
-import classNames from 'classnames';
 
 interface Props {
   title?: string;

components/PostsGrid/PostCard.tsx

@@ -3,9 +3,9 @@ import Container from '@components/Container';
 import Link from '@components/Link';
 import { Slide } from '@components/Motion';
 import { IconTag, LinkTag } from '@components/Tags';
+import { classNames } from '@components/utils';
 import type { PostMeta } from '@types';
 import { Button, Skeleton, Typography } from 'antd';
-import classNames from 'classnames';
 
 interface Props {
   post: PostMeta;

components/Tags/LinkTag.tsx

@@ -1,8 +1,8 @@
 import Link from '@components/Link';
+import { classNames } from '@components/utils';
 import { getColorByName } from '@config';
 import type { Tag } from '@types';
 import { Tag as AntTag } from 'antd';
-import classNames from 'classnames';
 
 interface Props {
   tag?: Tag;

components/TypingTitle/TypingTitle.tsx

@@ -1,6 +1,6 @@
+import { classNames } from '@components/utils';
 import { siteConfig } from '@config';
 import { useTypingEffect } from '@hooks';
-import classNames from 'classnames';
 import { useRef } from 'react';
 
 interface Props {

components/index.ts

@@ -1,4 +1,5 @@
 export { default as Article } from './Article';
+export { default as BackTop } from './BackTop';
 export { default as BooksGrid } from './BooksGrid';
 export { default as Container } from './Container';
 export { default as Divider } from './Divider';

components/utils/index.ts

@@ -0,0 +1,3 @@
+import classNames from 'classnames';
+
+export { classNames };

layouts/LandingLayout.tsx

@@ -1,6 +1,6 @@
 import { MetaHeader } from '@components';
+import { classNames } from '@components/utils';
 import landingImage from '@images/landing.jpg';
-import classNames from 'classnames';
 import type { ReactNode } from 'react';
 
 interface Props {

layouts/PostLayout.tsx

@@ -1,6 +1,5 @@
-import { Container, Footer, Header, MetaHeader } from '@components';
+import { BackTop, Container, Footer, Header, MetaHeader } from '@components';
 import type { PostMeta } from '@types';
-import { BackTop } from 'antd';
 import type { ReactNode } from 'react';
 
 interface Props {