feat: donate button

Signed-off-by: Innei <tukon479@gmail.com>

src/app.config.ts

@@ -5,4 +5,15 @@ export const appConfig = {
         ? 'https://innei.ren'
         : 'http://localhost:2323',
   },
+
+  module: {
+    donate: {
+      enable: true,
+      link: 'https://afdian.net/@Innei',
+      qrcode: [
+        'https://cdn.jsdelivr.net/gh/Innei/img-bed@master/20191211132347.png',
+        'https://cdn.innei.ren/bed/2023/0424213144.png',
+      ],
+    },
+  },
 }

src/components/widgets/note/NoteActionAside.tsx

@@ -1,12 +1,11 @@
 'use client'
 
 import { useQueryClient } from '@tanstack/react-query'
-import { motion } from 'framer-motion'
+import { motion, useAnimationControls } from 'framer-motion'
 import { produce } from 'immer'
 import type { NoteWrappedPayload } from '@mx-space/api-client'
 
 import { MotionButtonBase } from '~/components/ui/button'
-import { microReboundPreset } from '~/constants/spring'
 import { useIsClient } from '~/hooks/common/use-is-client'
 import { useNoteData } from '~/hooks/data/use-note'
 import { toast } from '~/lib/toast'
@@ -16,6 +15,8 @@ import { queries } from '~/queries/definition'
 import { clsxm } from '~/utils/helper'
 import { apiClient } from '~/utils/request'
 
+import { DonateButton } from '../shared/DonateButton'
+
 export const NoteActionAside: Component = ({ className }) => {
   return (
     <div
@@ -26,6 +27,7 @@ export const NoteActionAside: Component = ({ className }) => {
     >
       <LikeButton />
       <ShareButton />
+      <DonateButton />
     </div>
   )
 }
@@ -34,6 +36,7 @@ const LikeButton = () => {
   const note = useNoteData()
 
   const queryClient = useQueryClient()
+  const control = useAnimationControls()
   if (!note) return null
   const id = note.id
   const handleLike = () => {
@@ -48,11 +51,15 @@ const LikeButton = () => {
       )
     })
   }
+
   return (
     <MotionButtonBase
       className="flex flex-col space-y-2"
       onClick={() => {
         handleLike()
+        control.start('tap', {
+          repeat: 5,
+        })
         toast('谢谢你！', undefined, {
           iconElement: (
             <motion.i
@@ -61,19 +68,31 @@ const LikeButton = () => {
                 scale: 0.96,
               }}
               animate={{
-                scale: 1.12,
+                scale: 1.22,
               }}
               transition={{
-                ...microReboundPreset,
-                delay: 1,
+                easings: ['easeInOut'],
+                delay: 0.3,
                 repeat: 5,
+                repeatDelay: 0.3,
               }}
             />
           ),
         })
       }}
     >
-      <i className="icon-[mingcute--heart-fill] text-[24px] opacity-80 duration-200 hover:text-uk-red-light hover:opacity-100" />
+      <motion.i
+        className="icon-[mingcute--heart-fill] text-[24px] opacity-80 duration-200 hover:text-uk-red-light hover:opacity-100"
+        animate={control}
+        variants={{
+          tap: {
+            scale: 1.3,
+          },
+        }}
+        transition={{
+          easings: ['easeInOut'],
+        }}
+      />
     </MotionButtonBase>
   )
 }

src/components/widgets/shared/DonateButton.tsx

@@ -0,0 +1,46 @@
+import { MotionButtonBase } from '~/components/ui/button'
+import { FloatPopover } from '~/components/ui/float-popover'
+import { useIsClient } from '~/hooks/common/use-is-client'
+import { useConfig } from '~/hooks/data/use-config'
+
+export const DonateButton = () => {
+  const isClient = useIsClient()
+  const {
+    module: { donate },
+  } = useConfig()
+  if (!isClient) return null
+  if (!donate || !donate.enable) return null
+
+  return (
+    <FloatPopover TriggerComponent={TriggerComponent} placement="left-end">
+      <div className="flex flex-wrap space-x-2 center">
+        {donate.qrcode.map((src) => (
+          <img
+            src={src}
+            alt="donate"
+            className="h-[300px] max-h-[70vh]"
+            key={src}
+          />
+        ))}
+      </div>
+    </FloatPopover>
+  )
+}
+
+const TriggerComponent = () => {
+  const {
+    module: { donate },
+  } = useConfig()
+
+  if (!donate) return null
+  return (
+    <MotionButtonBase
+      className="flex flex-col space-y-2"
+      onClick={() => {
+        window.open(donate.link, '_blank')
+      }}
+    >
+      <i className="icon-[material-symbols--coffee] text-[24px] opacity-80 duration-200 hover:text-uk-brown-dark hover:opacity-100" />
+    </MotionButtonBase>
+  )
+}

src/hooks/data/use-config.ts

@@ -0,0 +1,4 @@
+import { appConfig } from '~/app.config'
+
+// TODO
+export const useConfig = () => appConfig

src/styles/toastify.css

@@ -3,7 +3,7 @@
   position: fixed;
   z-index: 99;
   bottom: 30px;
-  right: 0;
+  right: 12px;
   width: 300px;
 }
 .Toastify__toast-container {