From 178dcf360035a15c6548d4d8069f04c8c1b44dba Mon Sep 17 00:00:00 2001
From: KaiyiWing <Zhang.kaiyi42@gmail.com>
Date: Sun, 23 Apr 2023 01:14:48 +0800
Subject: [PATCH] chore: modify prettier config

---
 .prettierrc                                      | 16 ----------------
 prettier.config.js                               | 16 ++++++++++++++++
 .../Typing/components/Setting/DataSetting.tsx    | 16 ++++++++--------
 3 files changed, 24 insertions(+), 24 deletions(-)
 delete mode 100644 .prettierrc
 create mode 100644 prettier.config.js

diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index b078ad82..00000000
--- a/.prettierrc
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all",
-  "printWidth": 140,
-  "bracketSpacing": true,
-  "semi": false,
-  "tabWidth": 2,
-  "jsxSingleQuote": false,
-  "overrides": [
-    {
-      "files": ".prettierrc",
-      "options": { "parser": "json" }
-    }
-  ],
-  "plugins": ["prettier-plugin-tailwindcss", "@trivago/prettier-plugin-sort-imports"]
-}
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 00000000..49d1e237
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'all',
+  printWidth: 140,
+  bracketSpacing: true,
+  semi: false,
+  tabWidth: 2,
+  jsxSingleQuote: false,
+  overrides: [
+    {
+      files: '.prettierrc',
+      options: { parser: 'json' },
+    },
+  ],
+  plugins: ['@trivago/prettier-plugin-sort-imports', require('prettier-plugin-tailwindcss')],
+}
diff --git a/src/pages/Typing/components/Setting/DataSetting.tsx b/src/pages/Typing/components/Setting/DataSetting.tsx
index 1a3246b3..6dad8947 100644
--- a/src/pages/Typing/components/Setting/DataSetting.tsx
+++ b/src/pages/Typing/components/Setting/DataSetting.tsx
@@ -59,14 +59,14 @@ export default function DataSetting() {
           目前，用户的练习数据<strong>仅保存在本地</strong>。如果您需要在不同的设备、浏览器或者其他非官方部署上使用 Qwerty Learner，
           您需要手动进行数据同步和保存。为了保留您的练习进度，以及使用近期即将上线的数据分析和智能训练功能， 我们建议您及时备份您的数据。
         </span>
-        <span className="pl-4 text-sm font-bold leading-tight text-red-500 text-left">为了您的数据安全，请不要修改导出的数据文件。</span>
-        <div className="h-3 w-full px-5 flex items-center justify-start">
+        <span className="pl-4 text-left text-sm font-bold leading-tight text-red-500">为了您的数据安全，请不要修改导出的数据文件。</span>
+        <div className="flex h-3 w-full items-center justify-start px-5">
           <Progress.Root
-            className="relative bg-gray-200 rounded-full w-11/12 h-2  overflow-hidden transform translate-z-0"
+            className="translate-z-0 relative h-2 w-11/12 transform  overflow-hidden rounded-full bg-gray-200"
             value={exportProgress}
           >
             <Progress.Indicator
-              className="bg-indigo-400 h-full w-full transition-transform duration-500 ease-out cubic-bezier(0.65, 0, 0.35, 1)"
+              className="cubic-bezier(0.65, 0, 0.35, 1) h-full w-full bg-indigo-400 transition-transform duration-500 ease-out"
               style={{ transform: `translateX(-${100 - exportProgress}%)` }}
             />
           </Progress.Root>
@@ -80,16 +80,16 @@ export default function DataSetting() {
       <div className={styles.section}>
         <span className={styles.sectionLabel}>数据导入</span>
         <span className={styles.sectionDescription}>
-          请注意，导入数据将<strong className="text-red-500 text-sm font-bold"> 完全覆盖 </strong>当前数据。请谨慎操作。
+          请注意，导入数据将<strong className="text-sm font-bold text-red-500"> 完全覆盖 </strong>当前数据。请谨慎操作。
         </span>
 
-        <div className="h-3 w-full px-5 flex items-center justify-start">
+        <div className="flex h-3 w-full items-center justify-start px-5">
           <Progress.Root
-            className="relative bg-gray-200 rounded-full w-11/12 h-2  overflow-hidden transform translate-z-0"
+            className="translate-z-0 relative h-2 w-11/12 transform  overflow-hidden rounded-full bg-gray-200"
             value={importProgress}
           >
             <Progress.Indicator
-              className="bg-indigo-400 h-full w-full transition-transform duration-500 ease-out cubic-bezier(0.65, 0, 0.35, 1)"
+              className="cubic-bezier(0.65, 0, 0.35, 1) h-full w-full bg-indigo-400 transition-transform duration-500 ease-out"
               style={{ transform: `translateX(-${100 - importProgress}%)` }}
             />
           </Progress.Root>