「5」next-shopping：Error组件、Loading组件、Toast

我们先来定义几个通用组件，Icons的话会用到react-icons

安装依赖：

pnpm i react-icons

Icons组件

此次Icons组件只需要导出密码框的👀，🛒，登录图标和无权限图标，新建components/share/Icons.js

import { BsEyeSlash, BsEye, BsCart2, BsShieldExclamation } from 'react-icons/bs'
import { FiLogIn } from 'react-icons/fi'

const Icons = {
  Eye: BsEye,
  EyeSlash: BsEyeSlash,
  Cart: BsCart2,
  Login: FiLogIn,
  Exclamation: BsShieldExclamation,
}

export default Icons

DisplayError组件

新建components/share/DisplayError.js

import Icons from './Icons'

export default function DisplayError({ errors }) {
  return (
    <div className="error-msg">
      {errors && <Icons.Exclamation />}
      <span>{errors && errors.message}</span>
    </div>
  )
}

Loding组件

新建components/share/Loading.js

export default function Loading() {
  return (
    <div>
      <div className='bar bar1'></div>
      <div className='bar bar2'></div>
      <div className='bar bar3'></div>
      <div className='bar bar4'></div>
      <div className='bar bar5'></div>
      <div className='bar bar6'></div>
      <div className='bar bar7'></div>
      <div className='bar bar8'></div>
      <style jsx>{`
  
        .bar {
          width: 8px;
          height: 15px;
          background: #fff;
          display: inline-block;
          transform-origin: bottom center;
          border-top-right-radius: 20px;
          border-top-left-radius: 20px;
          /*   box-shadow:5px 10px 20px inset rgba(255,23,25.2); */
          animation: loader 1.2s linear infinite;
        }
        .bar1 {
          animation-delay: 0.1s;
        }
        .bar2 {
          animation-delay: 0.2s;
        }
        .bar3 {
          animation-delay: 0.3s;
        }
        .bar4 {
          animation-delay: 0.4s;
        }
        .bar5 {
          animation-delay: 0.5s;
        }
        .bar6 {
          animation-delay: 0.6s;
        }
        .bar7 {
          animation-delay: 0.7s;
        }
        .bar8 {
          animation-delay: 0.8s;
        }

        @keyframes loader {
          0% {
            transform: scaleY(0.1);
            background: ;
          }
          50% {
            transform: scaleY(1);
            background: #e3e2e9;
          }
          100% {
            transform: scaleY(0.1);
            background: transparent;
          }
        }
      `}</style>
    </div>
  );
}

把他们统一到处，新建components/index.js

export { default as Icons } from './share/Icons'
export { default as Loading } from './share/Loading'
export { default as DisplayError } from './share/DisplayError'

Toast组件

我们需要用到react-hot-toast，安装依赖：

pnpm i react-hot-toast

然后在app/(main)/layout.js中引入

'use client'
import { Toaster } from 'react-hot-toast'
import StoreProvider from '@/app/StoreProvider'

export default function Layout({ children }) {
  return (
    <StoreProvider>
      {children}
      <Toaster position="top-right" toastOptions={{ style: { fontSize: '1rem' } }} />
    </StoreProvider>
  )
}

在app/(main)/page.js中测试:

'use client'
import { toast } from 'react-hot-toast'
export default function Page() {
  const onHandleClick = () => {
    console.log('aaaa')
    toast.success('成功啦')
  }
  return (
    <div>
      <button onClick={onHandleClick}>点击我显示toast</button>
    </div>
  )
}

效果如下：

感谢阅读，下次再见！

代码地址：feat: 添加部分通用组件 · liyunfu1998/next-shopping@ae3dab2 (github.com)