feat: lucide icon

src/components/stateless/BreatheText/index.jsx

@@ -1,13 +1,20 @@
 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>
+    <>
+      <section className={styles.breatheItem}>
+        <span>Breathe</span>
+      </section>
+
+      {/* <section className={styles.loopRotate}>
+        <section className={styles.outside}>
+          <section className={styles.inner} />
+          <section className={styles.text}>Loop</section>
+        </section>
+      </section> */}
+    </>
   )
 }
 

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

@@ -4,6 +4,7 @@
   background-color: #27c2a3;
   border-radius: 50%;
   text-align: center;
+  margin-bottom: 80px;
 }
 
 .breatheItem::before {
@@ -34,3 +35,63 @@
     opacity: 0;
   }
 }
+
+.loopRotate {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  .outside {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 120px;
+    height: 120px;
+    border: 1px dashed #44ec79;
+    border-radius: 50%;
+    position: relative;
+    .inner {
+      width: 100px;
+      height: 100px;
+      border: 3px dashed #44ec79;
+      border-radius: 50%;
+      text-align: center;
+      line-height: 100px;
+      animation: loop 10s linear infinite;
+    }
+    .text {
+      position: absolute;
+      padding: 0;
+      color: #44ec79;
+      font-size: 20px;
+      font-weight: bolder;
+    }
+  }
+}
+
+@keyframes loop {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes trans {
+  0% {
+    transform: rotate(1turn);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  to {
+    transform: rotate(0deg);
+  }
+}

src/pages/home/index.jsx

@@ -1,6 +1,7 @@
 import React, { version, useState, useRef } from 'react'
 import { Input, Flex, Button } from 'antd'
 import { SendOutlined } from '@ant-design/icons'
+import { Atom, Merge, GitMerge, GitPullRequestArrow } from 'lucide-react'
 import FixTabPanel from '@stateless/FixTabPanel'
 import TypedText from '@stateless/TypedText'
 import ReMarkdown from '@stateless/ReMarkdown'
@@ -172,7 +173,9 @@ const Home = () => {
       </section>
       <StarRating value={2} />
       <LineBordered text="A line bordered text." />
-
+      <section style={{ display: 'flex', alignItems: 'center', marginTop: 10 }}>
+        <Atom /> <Merge /> <GitMerge /> <GitPullRequestArrow />
+      </section>
       <section>
         <GradientTracking />
       </section>

src/pages/postmessage/index.jsx

@@ -38,11 +38,17 @@ const PostMessage = () => {
           border: 'none',
           width: '100%',
         }}
+        frameborder="0"
         src={childOrigin}
         ref={ref}
         width="800px"
         height="600px"
-        // sandbox=""
+        title="my-iframe"
+        loading="lazy"
+        allowfullscreen
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerpolicy="no-referrer-when-downgrade"
+        sandbox="allow-scripts allow-same-origin"
       />
     </>
   )