fix: optimize sign in prompts for guestbook

app/(main)/guestbook/Guestbook.tsx

@@ -1,18 +1,30 @@
 'use client'
 
-import { SignedIn, SignedOut } from '@clerk/nextjs'
+import { SignedIn, SignedOut, SignInButton } from '@clerk/nextjs'
+import { usePathname } from 'next/navigation'
+import React from 'react'
+
+import { UserArrowLeftIcon } from '~/assets'
+import { Button } from '~/components/ui/Button'
+import { url } from '~/lib'
 
 import { GuestbookFeeds } from './GuestbookFeeds'
 import { GuestbookInput } from './GuestbookInput'
 
 export function Guestbook() {
+ const pathname = usePathname()
+
  return (
  <section className="max-w-2xl">
  <SignedOut>
- <p className="text-base text-zinc-600 dark:text-zinc-400">
- 你需要登录才能留言。
- </p>
+ <SignInButton mode="modal" redirectUrl={url(pathname).href}>
+ <Button type="button">
+ <UserArrowLeftIcon className="mr-1 h-5 w-5" />
+ 登录后才可以留言噢
+ </Button>
+ </SignInButton>
  </SignedOut>
+
  <SignedIn>
  <GuestbookInput />
  </SignedIn>