Refactor ZapButton to use Button component and adjust BlogPostPage button size and styling

src/components/ZapButton.tsx

@@ -5,11 +5,13 @@ import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useAuthor } from '@/hooks/useAuthor';
 import { Zap } from 'lucide-react';
 import type { Event } from 'nostr-tools';
+import { Button } from './ui/button';
 
 interface ZapButtonProps {
   target: Event;
   className?: string;
   showCount?: boolean;
+  buttonVariant?: 'default' | 'outline' | 'ghost' | 'link' | 'destructive';
   zapData?: { count: number; totalSats: number; isLoading?: boolean };
 }
 
@@ -17,6 +19,7 @@ export function ZapButton({
   target,
   className = "text-xs ml-1",
   showCount = true,
+  buttonVariant = "outline",
   zapData: externalZapData
 }: ZapButtonProps) {
   const { user } = useCurrentUser();
@@ -41,18 +44,18 @@ export function ZapButton({
 
   return (
     <ZapDialog target={target}>
-      <div className={`flex items-center gap-1 ${className}`}>
-        <Zap className="h-4 w-4" />
-        <span className="text-xs">
-          {showLoading ? (
-            '...'
-          ) : showCount && totalSats > 0 ? (
-            `${totalSats.toLocaleString()}`
-          ) : (
-            'Zap'
-          )}
-        </span>
-      </div>
+      <Button variant={buttonVariant} className={`flex items-center gap-1 ${className}`}>
+          <Zap className="h-4 w-4" />
+          <span className="text-xs">
+            {showLoading ? (
+              '...'
+            ) : showCount && totalSats > 0 ? (
+              `${totalSats.toLocaleString()}`
+            ) : (
+              'Zap'
+            )}
+          </span>
+      </Button>
     </ZapDialog>
   );
 }

src/pages/BlogPostPage.tsx

@@ -189,13 +189,12 @@ export default function BlogPostPage() {
         <div className="flex flex-wrap items-center gap-4 mb-12">
           <Button
             variant={hasReacted ? "default" : "outline"}
-            size="lg"
             onClick={handleReact}
             disabled={!user || hasReacted}
             className="gap-2"
           >
-            <Heart className={`h-5 w-5 ${hasReacted ? 'fill-current' : ''}`} />
-            <span className="font-semibold">
+            <Heart className={`h-4 w-4 ${hasReacted ? 'fill-current' : ''}`} />
+            <span className="text-xs">
               {reactions?.likeCount || 0}
             </span>
           </Button>