From d9f242ea6615fa282028e132829bb353bd3f647d Mon Sep 17 00:00:00 2001
From: "deepsource-autofix[bot]"
 <62050782+deepsource-autofix[bot]@users.noreply.github.com>
Date: Thu, 26 Dec 2024 10:10:40 +0000
Subject: [PATCH] style: format code with Prettier and StandardJS

This commit fixes the style issues introduced in 5df95d1 according to the output
from Prettier and StandardJS.

Details: None
---
 .../stateless/ContentPlaceholder/index.jsx    |  2 +-
 src/pages/home/index.jsx                      | 44 +++++++++----------
 src/pages/motion/index.jsx                    | 37 +++++++---------
 3 files changed, 40 insertions(+), 43 deletions(-)

diff --git a/src/components/stateless/ContentPlaceholder/index.jsx b/src/components/stateless/ContentPlaceholder/index.jsx
index 110b23e6..6422d02e 100644
--- a/src/components/stateless/ContentPlaceholder/index.jsx
+++ b/src/components/stateless/ContentPlaceholder/index.jsx
@@ -26,7 +26,7 @@ const ContentPlaceholder = () => (
     variants={{ collapsed: { scale: 0.8 }, open: { scale: 1 } }}
     initial="collapsed"
     animate="open"
-    whileInView={true}
+    whileInView
     transition={{ duration: 0.8 }}
     className={styles.contentPlaceholder}
   >
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 7128f833..2a4f9b41 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -190,7 +190,7 @@ const Home = () => {
       <section style={{ marginBottom: 40 }}>
         <AutoLink text="foo bar baz http://example.org bar https://github.com/wkylin/pro-react-admin" />
       </section>
-      <section className={styles.line}></section>
+      <section className={styles.line} />
       <section>
         <AvatarCard avatar="https://picsum.photos/seed/picsum/300/160" text="Hi, I'm a developer." />
       </section>
@@ -271,14 +271,14 @@ const Home = () => {
         <AnimateOnScreen.DiyAnimation
           from={{ opacity: 0, transform: 'translate(-100%, 0)' }}
           to={{ opacity: 1, transform: 'translate(0, 0)' }}
-          triggerOnce={true}
+          triggerOnce
         >
           <img src="https://picsum.photos/360/200.jpg" alt="" />
         </AnimateOnScreen.DiyAnimation>
       </section>
       <section style={{ marginBottom: 40, display: 'flex' }}>
         <SpotlightCard className="my-spot" style={{ width: 360, height: 200, color: '#fff' }}>
-          <section></section>
+          <section />
         </SpotlightCard>
       </section>
       <section style={{ margin: '20px 0' }}>
@@ -319,16 +319,16 @@ const Home = () => {
         mask
       </section>
       <section style={{ marginBottom: 40 }}>
-        <button className={styles['button']} onClick={fireConfetti}>
+        <button className={styles.button} onClick={fireConfetti}>
           <span className={styles['button-label']}>Click Me</span>
         </button>
       </section>
 
       <section style={{ position: 'relative', margin: '80px 0 160px 100px' }}>
-        <div className={styles['circle-1']}></div>
-        <div className={styles['circle-2']}></div>
-        <div className={styles['circle-3']}></div>
-        <div className={styles['circle-4']}></div>
+        <div className={styles['circle-1']} />
+        <div className={styles['circle-2']} />
+        <div className={styles['circle-3']} />
+        <div className={styles['circle-4']} />
       </section>
 
       <section style={{ margin: 20 }} className={styles.eHElAY}>
@@ -388,20 +388,20 @@ const Home = () => {
       <section style={{ margin: 20 }}>
         <ResponsiveMasonry columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 6 }}>
           <Masonry gutter="10px">
-            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
-            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }}></section>
+            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 100, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 200, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
+            <section style={{ height: 150, border: '1px solid #ccc', background: '#aaa' }} />
           </Masonry>
         </ResponsiveMasonry>
       </section>
diff --git a/src/pages/motion/index.jsx b/src/pages/motion/index.jsx
index 1eb379f9..bf169253 100644
--- a/src/pages/motion/index.jsx
+++ b/src/pages/motion/index.jsx
@@ -71,7 +71,7 @@ const easeNames = [
 ]
 
 const randomSort = (arr) => {
-  let newArr = []
+  const newArr = []
   const len = arr.length
   for (let i = 0; i < len; i++) {
     const random = Math.floor(Math.random() * arr.length)
@@ -168,9 +168,9 @@ const ParallaxVert = () => {
           backgroundColor: '#aaa',
           borderRadius: '3px',
           // scaleX: scrollYProgress,
-          scaleX: scaleX,
+          scaleX,
         }}
-      ></motion.div>
+      />
       <motion.div
         style={{
           width: 100,
@@ -194,7 +194,7 @@ const ParallaxVert = () => {
           rotate: 45, // 旋转45度
           opacity: 0.5, // 不透明度设置为0.5
         }}
-      ></motion.div>
+      />
       <motion.div
         transformTemplate={template}
         animate={{ rotate: 360 }}
@@ -206,7 +206,7 @@ const ParallaxVert = () => {
           rotate: 0,
           x: '200px',
         }}
-      ></motion.div>
+      />
 
       <motion.div
         style={{
@@ -219,9 +219,9 @@ const ParallaxVert = () => {
           duration: 2,
         }}
         variants={animations}
-        initial={'hidden'}
-        animate={'show'}
-      ></motion.div>
+        initial="hidden"
+        animate="show"
+      />
       <motion.ul
         initial="hidden"
         animate="visible"
@@ -272,7 +272,7 @@ const ParallaxVert = () => {
           onClick={() => {
             setRotate(!isRotated)
           }}
-        ></motion.div>
+        />
       </div>
 
       {/* <div
@@ -328,7 +328,7 @@ const ParallaxVert = () => {
             setIsAnimation(false)
             console.log('Completed animating', definition)
           }}
-        ></motion.div>
+        />
         <div
           style={{
             display: 'flex',
@@ -400,13 +400,10 @@ const ParallaxVert = () => {
           onDragStart={(event, info) => console.log(info.point.x, info.point.y)}
           onDragEnd={(event, info) => console.log(info.point.x, info.point.y)}
           onDirectionLock={(axis) => console.log('axis', axis)}
-          dragSnapToOrigin={true}
+          dragSnapToOrigin
           // dragConstraints={{ left: 0, right: 300 }}
           dragConstraints={constraintsRef}
-          // dragElastic={false}
-          // dragElastic={0.8}
-          // dragPropagation={false}
-        ></motion.div>
+        />
         <div
           style={{
             display: 'flex',
@@ -561,7 +558,7 @@ const ParallaxVert = () => {
             backgroundColor: 'white',
             borderRadius: 60,
           }}
-        ></motion.div>
+        />
       </motion.div>
 
       <section style={{ fontSize: 30 }}>scrollDirection: {scrollDirection}</section>
@@ -575,7 +572,7 @@ const ParallaxVert = () => {
           x,
           rotate,
         }}
-      ></motion.div>
+      />
       <motion.div
         style={{
           width: 200,
@@ -584,7 +581,7 @@ const ParallaxVert = () => {
           borderRadius: '20px',
           scaleX,
         }}
-      ></motion.div>
+      />
 
       <div
         style={{
@@ -697,7 +694,7 @@ const ParallaxVert = () => {
                 backgroundColor: '#fff',
                 borderRadius: 10,
               }}
-            ></motion.div>
+            />
             <motion.div
               layout
               style={{
@@ -706,7 +703,7 @@ const ParallaxVert = () => {
                 backgroundColor: '#fff',
                 borderRadius: 10,
               }}
-            ></motion.div>
+            />
           </LayoutGroup>
         </motion.div>
       </div>