style: format code with Prettier and StandardJS

postcss.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   plugins: {
-    '@tailwindcss/postcss': {},
-  },
+    '@tailwindcss/postcss': {}
+  }
 }

src/components/container/masonryContainer/index.jsx

@@ -1,28 +1,28 @@
 import useMasonry from '@hooks/useMasonry'
 
 const MyMasonry = () => {
   const masonryContainer = useMasonry()
   return (
     <div
-      className="mx-auto grid max-w-sm items-start gap-6 sm:max-w-none sm:grid-cols-2 lg:grid-cols-3"
+      className='mx-auto grid max-w-sm items-start gap-6 sm:max-w-none sm:grid-cols-2 lg:grid-cols-3'
       ref={masonryContainer}
     >
-      <div className="relative rounded-xl bg-linear-to-br from-gray-900/50 via-gray-800/25 to-gray-900/50 p-5 backdrop-blur-xs transition-opacity before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,var(--color-gray-800),var(--color-gray-700),var(--color-gray-800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]">
+      <div className='relative rounded-xl bg-linear-to-br from-gray-900/50 via-gray-800/25 to-gray-900/50 p-5 backdrop-blur-xs transition-opacity before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,var(--color-gray-800),var(--color-gray-700),var(--color-gray-800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]'>
         <div style={{ height: 140 }}>我的中国心</div>
       </div>
-      <div className="relative rounded-2xl bg-linear-to-br from-gray-900/50 via-gray-800/25 to-gray-900/50 p-5 backdrop-blur-xs transition-opacity before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,var(--color-gray-800),var(--color-gray-700),var(--color-gray-800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]">
+      <div className='relative rounded-2xl bg-linear-to-br from-gray-900/50 via-gray-800/25 to-gray-900/50 p-5 backdrop-blur-xs transition-opacity before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,var(--color-gray-800),var(--color-gray-700),var(--color-gray-800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]'>
         <div style={{ height: 80 }}>我的中国心</div>
       </div>
-      <div className="relative rounded-2xl bg-linear-to-br from-gray-900/50 via-gray-800/25 to-gray-900/50 p-5 backdrop-blur-xs transition-opacity before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,var(--color-gray-800),var(--color-gray-700),var(--color-gray-800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]">
+      <div className='relative rounded-2xl bg-linear-to-br from-gray-900/50 via-gray-800/25 to-gray-900/50 p-5 backdrop-blur-xs transition-opacity before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,var(--color-gray-800),var(--color-gray-700),var(--color-gray-800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]'>
         <div style={{ height: 150 }}>我的中国心</div>
       </div>
-      <div className="relative rounded-2xl bg-linear-to-br from-gray-900/50 via-gray-800/25 to-gray-900/50 p-5 backdrop-blur-xs transition-opacity before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,var(--color-gray-800),var(--color-gray-700),var(--color-gray-800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]">
+      <div className='relative rounded-2xl bg-linear-to-br from-gray-900/50 via-gray-800/25 to-gray-900/50 p-5 backdrop-blur-xs transition-opacity before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,var(--color-gray-800),var(--color-gray-700),var(--color-gray-800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]'>
         <div style={{ height: 120 }}>我的中国心</div>
       </div>
-      <div className="relative rounded-2xl bg-linear-to-br from-gray-900/50 via-gray-800/25 to-gray-900/50 p-5 backdrop-blur-xs transition-opacity before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,var(--color-gray-800),var(--color-gray-700),var(--color-gray-800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]">
+      <div className='relative rounded-2xl bg-linear-to-br from-gray-900/50 via-gray-800/25 to-gray-900/50 p-5 backdrop-blur-xs transition-opacity before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,var(--color-gray-800),var(--color-gray-700),var(--color-gray-800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]'>
         <div style={{ height: 130 }}>我的中国心</div>
       </div>
-      <div className="relative rounded-2xl bg-linear-to-br from-gray-900/50 via-gray-800/25 to-gray-900/50 p-5 backdrop-blur-xs transition-opacity before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,var(--color-gray-800),var(--color-gray-700),var(--color-gray-800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]">
+      <div className='relative rounded-2xl bg-linear-to-br from-gray-900/50 via-gray-800/25 to-gray-900/50 p-5 backdrop-blur-xs transition-opacity before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,var(--color-gray-800),var(--color-gray-700),var(--color-gray-800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]'>
         <div style={{ height: 50 }}>我的中国心</div>
       </div>
     </div>

src/components/container/musicPlayer/index.jsx

@@ -1,4 +1,4 @@
 import React, { useState } from 'react'
 
 import Controls from './Controls'
 import Player from './Player'
@@ -39,10 +39,10 @@
   }
 
   return (
-    <div className="absolute h-28 bottom-0 left-0 right-0 flex animate-slideup bg-linear-to-br from-white/10 to-[#2a2a80] backdrop-blur-lg z-10">
-      <div className="relative flex items-center justify-between w-full px-8 sm:px-12">
+    <div className='absolute h-28 bottom-0 left-0 right-0 flex animate-slideup bg-linear-to-br from-white/10 to-[#2a2a80] backdrop-blur-lg z-10'>
+      <div className='relative flex items-center justify-between w-full px-8 sm:px-12'>
         <Track isPlaying={isPlaying} isActive={isActive} activeSong={activeSong} />
-        <div className="flex flex-col items-center justify-center flex-1">
+        <div className='flex flex-col items-center justify-center flex-1'>
           <Controls
             isPlaying={isPlaying}
             isActive={isActive}
@@ -57,7 +57,7 @@
           />
           <Seekbar
             value={appTime}
-            min="0"
+            min='0'
             max={duration}
             onInput={(event) => setSeekTime(event.target.value)}
             setSeekTime={setSeekTime}
@@ -77,8 +77,8 @@
         </div>
         <VolumeBar
           value={volume}
-          min="0"
-          max="1"
+          min='0'
+          max='1'
           onChange={(event) => setVolume(event.target.value)}
           setVolume={setVolume}
         />

src/components/stateless/CompareAll/index.jsx

@@ -1,4 +1,4 @@
 'use client'
 import React, { useState, useEffect, useRef, useCallback } from 'react'
 import { AnimatePresence, motion } from 'motion/react'
 import { GitMerge } from 'lucide-react'
@@ -14,14 +14,14 @@
   slideMode = 'hover',
   showHandlebar = true,
   autoplay = false,
-  autoplayDuration = 5000,
+  autoplayDuration = 5000
 }) => {
   const [sliderXPercent, setSliderXPercent] = useState(initialSliderPercentage)
   const [isDragging, setIsDragging] = useState(false)
 
   const sliderRef = useRef(null)
 
   const [isMouseOver, setIsMouseOver] = useState(false)
 
   const autoplayRef = useRef(null)
 
@@ -53,12 +53,12 @@
     return () => stopAutoplay()
   }, [startAutoplay, stopAutoplay])
 
-  function mouseEnterHandler() {
+  function mouseEnterHandler () {
     setIsMouseOver(true)
     stopAutoplay()
   }
 
-  function mouseLeaveHandler() {
+  function mouseLeaveHandler () {
     setIsMouseOver(false)
     if (slideMode === 'hover') {
       setSliderXPercent(initialSliderPercentage)
@@ -70,7 +70,7 @@
   }
 
   const handleStart = useCallback(
     (clientX) => {
       if (slideMode === 'drag') {
         setIsDragging(true)
       }
@@ -133,7 +133,7 @@
       className={clsx('w-[360px] h-[160px] overflow-hidden', className)}
       style={{
         position: 'relative',
-        cursor: slideMode === 'drag' ? 'grab' : 'col-resize',
+        cursor: slideMode === 'drag' ? 'grab' : 'col-resize'
       }}
       onMouseMove={handleMouseMove}
       onMouseLeave={mouseLeaveHandler}
@@ -145,58 +145,62 @@
       onTouchMove={handleTouchMove}
     >
       <AnimatePresence initial={false}>
         <motion.div
-          className="h-full w-px absolute top-0 m-auto z-30 bg-linear-to-b from-transparent from-5% to-95% via-indigo-500 to-transparent"
+          className='h-full w-px absolute top-0 m-auto z-30 bg-linear-to-b from-transparent from-5% to-95% via-indigo-500 to-transparent'
           style={{
             left: `${sliderXPercent}%`,
             top: '0',
-            zIndex: 40,
+            zIndex: 40
           }}
           transition={{ duration: 0 }}
         >
-          <div className="w-36 h-full [mask-image:radial-gradient(100px_at_left,white,transparent)] absolute top-1/2 -translate-y-1/2 left-0 bg-linear-to-r from-indigo-400 via-transparent to-transparent z-20 opacity-50" />
-          <div className="w-10 h-1/2 [mask-image:radial-gradient(50px_at_left,white,transparent)] absolute top-1/2 -translate-y-1/2 left-0 bg-linear-to-r from-cyan-400 via-transparent to-transparent z-10 opacity-100" />
-          <div className="w-10 h-3/4 top-1/2 -translate-y-1/2 absolute -right-10 [mask-image:radial-gradient(100px_at_left,white,transparent)]"></div>
+          <div className='w-36 h-full [mask-image:radial-gradient(100px_at_left,white,transparent)] absolute top-1/2 -translate-y-1/2 left-0 bg-linear-to-r from-indigo-400 via-transparent to-transparent z-20 opacity-50' />
+          <div className='w-10 h-1/2 [mask-image:radial-gradient(50px_at_left,white,transparent)] absolute top-1/2 -translate-y-1/2 left-0 bg-linear-to-r from-cyan-400 via-transparent to-transparent z-10 opacity-100' />
+          <div className='w-10 h-3/4 top-1/2 -translate-y-1/2 absolute -right-10 [mask-image:radial-gradient(100px_at_left,white,transparent)]' />
           {showHandlebar && (
-            <div className="h-5 w-5 rounded-md top-1/2 -translate-y-1/2 bg-white z-30 -right-2.5 absolute   flex items-center justify-center shadow-[0px_-1px_0px_0px_#FFFFFF40]">
-              <GitMerge className="w-4 h-4 text-black" />
+            <div className='h-5 w-5 rounded-md top-1/2 -translate-y-1/2 bg-white z-30 -right-2.5 absolute   flex items-center justify-center shadow-[0px_-1px_0px_0px_#FFFFFF40]'>
+              <GitMerge className='w-4 h-4 text-black' />
             </div>
           )}
         </motion.div>
       </AnimatePresence>
-      <div className="relative z-20 w-full h-full overflow-hidden pointer-events-none">
+      <div className='relative z-20 w-full h-full overflow-hidden pointer-events-none'>
         <AnimatePresence initial={false}>
-          {firstImage ? (
-            <motion.div
-              className={clsx(
-                'absolute inset-0 z-20  shrink-0 w-full h-full select-none overflow-hidden',
-                firstImageClassName
-              )}
-              style={{
-                clipPath: `inset(0 ${100 - sliderXPercent}% 0 0)`,
-              }}
-              transition={{ duration: 0 }}
-            >
-              <img
-                alt="first image"
-                src={firstImage}
-                className={clsx('absolute inset-0  z-20  shrink-0 w-full h-full select-none', firstImageClassName)}
-                draggable={false}
-              />
-            </motion.div>
-          ) : null}
+          {firstImage
+            ? (
+              <motion.div
+                className={clsx(
+                  'absolute inset-0 z-20  shrink-0 w-full h-full select-none overflow-hidden',
+                  firstImageClassName
+                )}
+                style={{
+                  clipPath: `inset(0 ${100 - sliderXPercent}% 0 0)`
+                }}
+                transition={{ duration: 0 }}
+              >
+                <img
+                  alt='first image'
+                  src={firstImage}
+                  className={clsx('absolute inset-0  z-20  shrink-0 w-full h-full select-none', firstImageClassName)}
+                  draggable={false}
+                />
+              </motion.div>
+              )
+            : null}
         </AnimatePresence>
       </div>
 
       <AnimatePresence initial={false}>
-        {secondImage ? (
-          <motion.img
-            className={clsx('absolute top-0 left-0 z-19   w-full h-full select-none', secondImageClassname)}
-            alt="second image"
-            src={secondImage}
-            draggable={false}
-          />
-        ) : null}
+        {secondImage
+          ? (
+            <motion.img
+              className={clsx('absolute top-0 left-0 z-19   w-full h-full select-none', secondImageClassname)}
+              alt='second image'
+              src={secondImage}
+              draggable={false}
+            />
+            )
+          : null}
       </AnimatePresence>
     </div>
   )

src/components/stateless/FeatureAny/TextComponent.jsx

@@ -1,4 +1,4 @@
 import React, { useEffect, useState } from 'react'
 import clsx from 'clsx'
 
 const TextComponent = ({ number, title, content, isOpen, loadingWidthPercent }) => {
@@ -11,7 +11,7 @@
           : 'scale-90 border-transparent opacity-50 saturate-0'
       )}
     >
-      <div className="flex items-center w-full gap-4 p-4">
+      <div className='flex items-center w-full gap-4 p-4'>
         <p
           className={clsx(
             'inline-flex size-8 shrink-0 items-center justify-center rounded-md bg-neutral-500/20 text-neutral-600'
@@ -27,9 +27,9 @@
           isOpen ? ' max-h-64' : 'max-h-0'
         )}
       >
-        <p className="p-4 text-lg">{content}</p>
-        <div className="w-full px-4 pb-4">
-          <div className="relative w-full h-1 overflow-hidden rounded-full">
+        <p className='p-4 text-lg'>{content}</p>
+        <div className='w-full px-4 pb-4'>
+          <div className='relative w-full h-1 overflow-hidden rounded-full'>
             <div
               className={clsx('absolute left-0 top-0 h-1 bg-neutral-500')}
               style={{ width: `${loadingWidthPercent}%` }}

src/components/stateless/FeatureAny/index.jsx

@@ -1,4 +1,4 @@
 import React, { useState, useEffect } from 'react'
 import clsx from 'clsx'
 import TextComponent from './TextComponent'
 import SpringPng from '@assets/images/spring.png'
@@ -9,23 +9,23 @@
   {
     title: '《咏柳》—— 贺知章',
     content: '碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。',
-    srcImage: SpringPng,
+    srcImage: SpringPng
   },
   {
     title: '《小池》—— 杨万里',
     content: '泉眼无声惜细流，树阴照水爱晴柔。小荷才露尖尖角，早有蜻蜓立上头。',
-    srcImage: HePng,
+    srcImage: HePng
   },
   {
     title: '《山居秋暝》—— 王维',
     content: '空山新雨后，天气晚来秋。明月松间照，清泉石上流。',
-    srcImage: SongPng,
+    srcImage: SongPng
   },
   {
     title: '《逢雪宿芙蓉山主人》—— 刘长卿',
     content: '日暮苍山远，天寒白屋贫。柴门闻犬吠，风雪夜归人。',
-    srcImage: XuePng,
-  },
+    srcImage: XuePng
+  }
 ]
 
 const FeatureFourImages = () => {
@@ -46,17 +46,17 @@
   }, [timer])
 
   return (
-    <div className="grid grid-cols-1 gap-4 p-4 border rounded-sm md:grid-cols-2">
-      <div className="space-y-6 ">
+    <div className='grid grid-cols-1 gap-4 p-4 border rounded-sm md:grid-cols-2'>
+      <div className='space-y-6 '>
         {data.map((item, index) => (
           <button
-            className="w-full"
+            className='w-full'
             key={item.title}
             onClick={() => {
               setFeatureOpen(index)
               setTimer(0)
             }}
-            type="button"
+            type='button'
           >
             <TextComponent
               content={item.content}
@@ -68,7 +68,7 @@
           </button>
         ))}
       </div>
-      <div className="h-full">
+      <div className='h-full'>
         <div className={clsx('relative h-96 w-full overflow-hidden rounded-lg md:h-[500px]')}>
           {data.map((item, index) => (
             <img

src/components/stateless/HorizontalScroll/index.jsx

@@ -1,32 +1,32 @@
 import React, { useRef } from 'react'
 import { motion, useTransform, useScroll } from 'motion/react'
 
 const cards = [
   {
     url: 'https://picsum.photos/id/28/400/267',
     title: 'Title 1',
-    id: 1,
+    id: 1
   },
   {
     url: 'https://picsum.photos/id/29/400/267',
     title: 'Title 2',
-    id: 2,
+    id: 2
   },
   {
     url: 'https://picsum.photos/id/30/400/267',
     title: 'Title 3',
-    id: 3,
+    id: 3
   },
   {
     url: 'https://picsum.photos/id/31/400/267',
     title: 'Title 4',
-    id: 4,
+    id: 4
   },
   {
     url: 'https://picsum.photos/id/32/400/267',
     title: 'Title 5',
-    id: 5,
-  },
+    id: 5
+  }
 ]
 const HorizontalScrollParallax = () => {
   return (
@@ -40,17 +40,17 @@
 
 const Card = ({ card }) => {
   return (
-    <div key={card.id} className="group relative h-[267px] w-[400px] overflow-hidden">
+    <div key={card.id} className='group relative h-[267px] w-[400px] overflow-hidden'>
       <div
         style={{
           backgroundImage: `url(${card.url})`,
           backgroundSize: 'cover',
-          backgroundPosition: 'center',
+          backgroundPosition: 'center'
         }}
-        className="absolute inset-0 z-0 transition-transform duration-300 group-hover:scale-110"
-      ></div>
-      <div className="absolute inset-0 z-10 grid place-content-center">
-        <p className="p-8 text-6xl font-black text-white uppercase bg-linear-to-br from-white/20 to-white/0 backdrop-blur-lg">
+        className='absolute inset-0 z-0 transition-transform duration-300 group-hover:scale-110'
+      />
+      <div className='absolute inset-0 z-10 grid place-content-center'>
+        <p className='p-8 text-6xl font-black text-white uppercase bg-linear-to-br from-white/20 to-white/0 backdrop-blur-lg'>
           {card.title}
         </p>
       </div>

src/components/stateless/Meteors/index.jsx

@@ -1,4 +1,4 @@
 import React from 'react'
 import clsx from 'clsx'
 
 import styles from './index.module.less'
@@ -19,9 +19,9 @@
             top: 0,
             left: Math.floor(Math.random() * (400 - -400) + -400) + 'px',
             animationDelay: Math.random() * (0.8 - 0.2) + 0.2 + 's',
-            animationDuration: Math.floor(Math.random() * (10 - 2) + 2) + 's',
+            animationDuration: Math.floor(Math.random() * (10 - 2) + 2) + 's'
           }}
-        ></span>
+        />
       ))}
     </>
   )