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 {