style: format code with Prettier and StandardJS

src/components/stateless/AnimationTabs/index.jsx

@@ -1,4 +1,4 @@
 'use client'
 import React, { useState } from 'react'
 import { motion } from 'motion/react'
 import clsx from 'clsx'
@@ -35,18 +35,18 @@
             onMouseLeave={() => setHovering(false)}
             className={clsx('relative px-4 py-2 rounded-full', tabClassName)}
             style={{
-              transformStyle: 'preserve-3d',
+              transformStyle: 'preserve-3d'
             }}
           >
             {active.value === tab.value && (
               <motion.div
-                layoutId="clickedButton"
+                layoutId='clickedButton'
                 transition={{ type: 'spring', bounce: 0.3, duration: 0.6 }}
                 className={clsx('absolute inset-0 bg-gray-200 dark:bg-zinc-800 rounded-full', activeTabClassName)}
               />
             )}
 
-            <span className="relative block text-black dark:text-white">{tab.title}</span>
+            <span className='relative block text-black dark:text-white'>{tab.title}</span>
           </button>
         ))}
       </div>
@@ -66,19 +66,19 @@
     return tab.value === tabs[0].value
   }
   return (
-    <div className="relative w-full h-full">
+    <div className='relative w-full h-full'>
       {tabs.map((tab, idx) => (
         <motion.div
           key={tab.value}
           layoutId={tab.value}
           style={{
             scale: 1 - idx * 0.1,
             top: hovering ? idx * -50 : 0,
             zIndex: -idx,
-            opacity: idx < 3 ? 1 - idx * 0.1 : 0,
+            opacity: idx < 3 ? 1 - idx * 0.1 : 0
           }}
           animate={{
-            y: isActive(tab) ? [0, 40, 0] : 0,
+            y: isActive(tab) ? [0, 40, 0] : 0
           }}
           className={clsx('w-full h-full absolute top-0 left-0', className)}
         >

src/pages/demo/index.jsx

@@ -1,4 +1,4 @@
 import React from 'react'
 import { Table } from 'antd'
 import FixTabPanel from '@stateless/FixTabPanel'
 import AnimationTabs from '@stateless/AnimationTabs'
@@ -7,72 +7,72 @@
     title: 'Name',
     align: 'center',
     dataIndex: 'name',
-    width: 150,
+    width: 150
   },
   {
     title: 'Age',
     align: 'center',
     dataIndex: 'age',
-    width: 150,
+    width: 150
   },
   {
     title: 'Address',
     align: 'center',
-    dataIndex: 'address',
-  },
+    dataIndex: 'address'
+  }
 ]
 
 const tabs = [
   {
     title: 'Product',
     value: 'product',
     content: (
-      <div className="relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900">
+      <div className='relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900'>
         <p>Product Tab</p>
       </div>
-    ),
+    )
   },
   {
     title: 'Services',
     value: 'services',
     content: (
-      <div className="relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900">
+      <div className='relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900'>
         <p>Services tab</p>
       </div>
-    ),
+    )
   },
   {
     title: 'Playground',
     value: 'playground',
     content: (
-      <div className="relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900">
+      <div className='relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900'>
         <p>Playground tab</p>
       </div>
-    ),
+    )
   },
   {
     title: 'Content',
     value: 'content',
     content: (
-      <div className="relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900">
+      <div className='relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900'>
         <p>Content tab</p>
       </div>
-    ),
+    )
   },
   {
     title: 'Random',
     value: 'random',
     content: (
-      <div className="relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900">
+      <div className='relative w-full h-full p-10 overflow-hidden text-xl font-bold text-white rounded-2xl md:text-4xl bg-gradient-to-br from-purple-700 to-violet-900'>
         <p>Random tab</p>
       </div>
-    ),
-  },
+    )
+  }
 ]
 const ProDemo = () => {
   return (
     <FixTabPanel>
-      <div className="h-[20rem] [perspective:1000px] relative b flex flex-col max-w-5xl mx-auto w-full  items-start justify-start">
+      <div className='h-[20rem] [perspective:1000px] relative b flex flex-col max-w-5xl mx-auto w-full  items-start justify-start'>
         <AnimationTabs tabs={tabs} />
       </div>
       <Table columns={columns} dataSource={[]} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} />