From 02468315178a2043e9cdab31ac0a27a838410a49 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Tue, 28 Feb 2023 22:24:53 +0000
Subject: [PATCH] feat: logo autoplay and loop

---
 src/components/common/Logo.tsx            | 7 +++++--
 src/components/main/MainLayout.tsx        | 2 +-
 src/components/site/SiteFooter.tsx        | 2 +-
 src/pages/dashboard/[subdomain]/index.tsx | 2 +-
 src/pages/index.tsx                       | 2 +-
 5 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/common/Logo.tsx b/src/components/common/Logo.tsx
index 3a2029be..d940a4dc 100644
--- a/src/components/common/Logo.tsx
+++ b/src/components/common/Logo.tsx
@@ -7,7 +7,9 @@ export const Logo: React.FC<{
   type: "svg" | "png" | "lottie"
   width?: number
   height?: number
-}> = ({ type, width, height }) => {
+  loop?: boolean
+  autoplay?: boolean
+}> = ({ type, width, height, loop, autoplay }) => {
   const ref = useRef<LottieRefCurrentProps>(null)
 
   switch (type) {
@@ -33,7 +35,8 @@ export const Logo: React.FC<{
       return (
         <Lottie
           animationData={LogoLottieJSON}
-          loop={false}
+          loop={loop ?? false}
+          autoplay={autoplay ?? true}
           lottieRef={ref}
           onMouseEnter={() => ref.current?.goToAndPlay(0)}
           style={{
diff --git a/src/components/main/MainLayout.tsx b/src/components/main/MainLayout.tsx
index 4b3e29e1..98333fdc 100644
--- a/src/components/main/MainLayout.tsx
+++ b/src/components/main/MainLayout.tsx
@@ -35,7 +35,7 @@ export function MainLayout({
         <div className="max-w-screen-lg px-5 mx-auto flex justify-between items-center">
           <div className="text-2xl font-extrabold flex items-center">
             <div className="inline-block w-9 h-9 mr-3">
-              <Logo type="lottie" width={36} height={36} />
+              <Logo type="lottie" width={36} height={36} autoplay={false} />
             </div>
             xLog
           </div>
diff --git a/src/components/site/SiteFooter.tsx b/src/components/site/SiteFooter.tsx
index bdb87489..b6d5ee00 100644
--- a/src/components/site/SiteFooter.tsx
+++ b/src/components/site/SiteFooter.tsx
@@ -24,7 +24,7 @@ export const SiteFooter: React.FC<{
         href={SITE_URL}
         className="inline-flex items-center align-text-top mx-1"
       >
-        <Logo type={logoType} width={20} height={20} />
+        <Logo type={logoType} width={20} height={20} autoplay={false} />
       </UniLink>
     )
   }
diff --git a/src/pages/dashboard/[subdomain]/index.tsx b/src/pages/dashboard/[subdomain]/index.tsx
index 2fff0417..22d1d634 100644
--- a/src/pages/dashboard/[subdomain]/index.tsx
+++ b/src/pages/dashboard/[subdomain]/index.tsx
@@ -66,7 +66,7 @@ export default function SubdomainIndex() {
     <DashboardMain>
       <div className="prose min-w-[270px] max-w-screen-md">
         <div className="w-14 h-14 mb-8">
-          <Logo type="lottie" width={100} height={100} />
+          <Logo type="lottie" width={56} height={56} />
         </div>
         <p className="text-2xl font-bold">{t("Site Stats")}</p>
         <div className="grid gap-4 sm:grid-cols-3 grid-cols-2 mb-8">
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 0f7a6359..1063ab9e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -549,7 +549,7 @@ export default function Home() {
           </div>
           <div className="my-20 text-center">
             <div className="w-20 h-20 mx-auto mb-10">
-              <Logo type="lottie" width={100} height={100} />
+              <Logo type="lottie" width={100} height={100} loop={true} />
             </div>
             {isConnected ? (
               <UniLink