feat: breathe

.gitignore

@@ -1,7 +1,6 @@
 .DS_Store
 /.idea
 /dist
-/.scannerwork
 /node_modules
 /.eslintcache
 compilation-stats.json

.vscode/settings.json

@@ -100,5 +100,9 @@
   },
   "i18n-ally.localesPaths": [
     "public/locales"
-  ]
+  ],
+  "sonarlint.connectedMode.project": {
+    "connectionId": "http-localhost-9000",
+    "projectKey": "pro-react-admin"
+  }
 }

src/components/stateless/BreatheText/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import styles from './index.module.less'
+import { Section } from 'lucide-react'
+
+const BreatheText = () => {
+  return (
+    <section className={styles.breatheItem}>
+      <span>Breathe</span>
+    </section>
+  )
+}
+
+export default BreatheText

src/components/stateless/BreatheText/index.module.less

@@ -0,0 +1,36 @@
+.breatheItem {
+  width: 40px;
+  height: 40px;
+  background-color: #27c2a3;
+  border-radius: 50%;
+  text-align: center;
+}
+
+.breatheItem::before {
+  content: '';
+  display: block;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  opacity: 0.7;
+  background-color: #27c2a3;
+  animation: breathe 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
+}
+
+@keyframes breathe {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  50%,
+  75% {
+    -webkit-transform: scale(3);
+    transform: scale(3);
+  }
+
+  78%,
+  to {
+    opacity: 0;
+  }
+}

src/pages/home/index.jsx

@@ -1,4 +1,4 @@
-import React, { version, useState, useRef } from 'react'
+import React, { version, useState, useRef } from 'react'
 import { Input, Flex, Button } from 'antd'
 import { SendOutlined } from '@ant-design/icons'
 import FixTabPanel from '@stateless/FixTabPanel'
@@ -14,6 +14,7 @@ import AvatarCard from '@stateless/AvatarCard'
 import LineBordered from '@stateless/LineBordered'
 import GradientTracking from '@stateless/GradientTracking'
 import ShiftingCard from '@stateless/ShiftingCard'
+import BreatheText from '@stateless/BreatheText'
 
 import { oneApiChat, prettyObject } from '@utils/aidFn'
 
@@ -176,9 +177,13 @@ const Home = () => {
         <GradientTracking />
       </section>
 
+      <section style={{ margin: 40 }}>
+        <BreatheText />
+      </section>
       <section>
         <ShiftingCard />
       </section>
+
       <section style={{ width: 600, margin: '30px 0' }}>
         <Input defaultValue={apiKey} placeholder="api key" onChange={changeApiKey} style={{ marginBottom: 20 }} />
         <Flex align="center">

src/utils/aidFn.js

@@ -1,4 +1,4 @@
-import { parse, stringify } from 'qs'
+import { parse, stringify } from 'qs'
 import html2canvas from 'html2canvas'
 
 export const getEnv = () => {