correct text

package.json

@@ -36,6 +36,7 @@
     "@near-wallet-selector/modal-ui": "^8.9.13",
     "@near-wallet-selector/my-near-wallet": "^8.9.13",
     "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-slot": "^1.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cookie": "^1.0.2",

src/components/compose-post.js

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { useDraftsStore } from "../store/drafts-store";
 import { DraftsModal } from "./drafts-modal";
+import { Button } from "./ui/button";
 
 // This "widget" handles all of the editing for post content
 // Calls "onSubmit" with an array of post objects
@@ -94,18 +95,12 @@ export function ComposePost({ onSubmit }) {
   return (
     <div className="space-y-3">
       <div className="flex justify-end gap-2 mb-2">
-        <button
-          onClick={() => setModalOpen(true)}
-          className="text-sm px-3 py-1 border-2 border-gray-800 hover:bg-gray-100 shadow-[2px_2px_0_rgba(0,0,0,1)]"
-        >
+        <Button onClick={() => setModalOpen(true)} size="sm">
           Drafts
-        </button>
-        <button
-          onClick={toggleMode}
-          className="text-sm px-3 py-1 border-2 border-gray-800 hover:bg-gray-100 shadow-[2px_2px_0_rgba(0,0,0,1)]"
-        >
+        </Button>
+        <Button onClick={toggleMode} size="sm">
           {isThreadMode ? "Single Post Mode" : "Thread Mode"}
-        </button>
+        </Button>
       </div>
 
       {isThreadMode ? (
@@ -124,23 +119,22 @@ export function ComposePost({ onSubmit }) {
                   {post.text.length}/280 characters
                 </span>
                 {posts.length > 1 && (
-                  <button
+                  <Button
                     onClick={() => removeThread(index)}
-                    className="text-red-500 text-sm hover:text-red-700"
+                    variant="ghost"
+                    size="sm"
+                    className="text-red-500 hover:text-red-700"
                   >
                     Remove
-                  </button>
+                  </Button>
                 )}
               </div>
               {/* Future image upload UI would go here */}
             </div>
           ))}
-          <button
-            onClick={addThread}
-            className="w-full py-2 border-2 border-gray-800 hover:bg-gray-100 shadow-[2px_2px_0_rgba(0,0,0,1)] text-sm"
-          >
+          <Button onClick={addThread} className="w-full" size="sm">
             + Add Thread
-          </button>
+          </Button>
         </div>
       ) : (
         <div>
@@ -162,20 +156,18 @@ export function ComposePost({ onSubmit }) {
             : `${posts[0].text.length} characters`}
         </span>
         <div className="flex gap-2">
-          <button
+          <Button
             onClick={() => saveDraft(posts)}
             disabled={posts.every((p) => !p.text.trim())}
-            className="px-4 py-2 border-2 border-gray-800 hover:bg-gray-100 shadow-[2px_2px_0_rgba(0,0,0,1)] disabled:opacity-50 disabled:cursor-not-allowed"
           >
             Save Draft
-          </button>
-          <button
+          </Button>
+          <Button
             onClick={handleSubmit}
             disabled={posts.every((p) => !p.text.trim())}
-            className="flex items-center gap-2 px-6 py-2 border-2 border-gray-800 hover:bg-gray-100 shadow-[2px_2px_0_rgba(0,0,0,1)] disabled:opacity-50 disabled:cursor-not-allowed"
           >
             Post
-          </button>
+          </Button>
         </div>
       </div>
 

src/components/connect-to-near.js

@@ -2,6 +2,7 @@ import { useNearSocialStore } from "@/store/near-social-store";
 import { NearContext } from "@/wallets/near";
 import { Wallet } from "lucide-react";
 import { useContext, useEffect } from "react";
+import { Button } from "./ui/button";
 
 export function ConnectToNearButton() {
   const { signedAccountId, wallet } = useContext(NearContext);
@@ -29,12 +30,9 @@ export function ConnectToNearButton() {
   };
 
   return (
-    <button
-      onClick={signedAccountId ? handleSignOut : handleSignIn}
-      className="flex items-center gap-2 px-4 py-2 border-2 border-gray-800 hover:bg-gray-100 shadow-[2px_2px_0_rgba(0,0,0,1)]"
-    >
+    <Button onClick={signedAccountId ? handleSignOut : handleSignIn}>
       <Wallet size={18} />
       {signedAccountId ? "Disconnect NEAR" : "Connect NEAR"}
-    </button>
+    </Button>
   );
 }

src/components/connect-to-twitter.js

@@ -1,6 +1,7 @@
 import { useCallback, useEffect } from "react";
 import { useTwitterConnection } from "../store/twitter-store";
 import { Twitter } from "lucide-react";
+import { Button } from "./ui/button";
 
 export function ConnectToTwitterButton() {
   const { isConnected, isConnecting, connect, disconnect, checkConnection } =
@@ -19,17 +20,13 @@ export function ConnectToTwitterButton() {
   }, [isConnected, connect, disconnect]);
 
   return (
-    <button
-      onClick={handleClick}
-      disabled={true}
-      className="flex items-center gap-2 px-4 py-2 border-2 border-gray-800 hover:bg-gray-100 shadow-[2px_2px_0_rgba(0,0,0,1)] disabled:opacity-50 disabled:cursor-not-allowed"
-    >
+    <Button onClick={handleClick} disabled={true}>
       <Twitter size={18} />
       {isConnecting
         ? "Connecting..."
         : isConnected
           ? "Disconnect Twitter"
           : "Connect Twitter"}
-    </button>
+    </Button>
   );
 }

src/components/drafts-modal.js

@@ -1,6 +1,7 @@
 import { motion, AnimatePresence } from "framer-motion";
 import { useDraftsStore } from "../store/drafts-store";
 import { formatDistanceToNow } from "date-fns";
+import { Button } from "./ui/button";
 
 export function DraftsModal({ onSelect }) {
   const { drafts, isModalOpen, setModalOpen, deleteDraft } = useDraftsStore();
@@ -18,12 +19,14 @@ export function DraftsModal({ onSelect }) {
         >
           <div className="flex justify-between items-center mb-6">
             <h2 className="text-2xl font-bold">Drafts</h2>
-            <button
+            <Button
               onClick={() => setModalOpen(false)}
+              variant="ghost"
+              size="sm"
               className="text-gray-600 hover:text-gray-800"
             >
               ✕
-            </button>
+            </Button>
           </div>
 
           {drafts.length === 0 ? (
@@ -42,21 +45,22 @@ export function DraftsModal({ onSelect }) {
                       })}
                     </span>
                     <div className="flex gap-2">
-                      <button
+                      <Button
                         onClick={() => {
                           onSelect(draft.posts);
                           setModalOpen(false);
                         }}
-                        className="text-sm px-3 py-1 border-2 border-gray-800 hover:bg-gray-100 shadow-[2px_2px_0_rgba(0,0,0,1)]"
+                        size="sm"
                       >
                         Load
-                      </button>
-                      <button
+                      </Button>
+                      <Button
                         onClick={() => deleteDraft(draft.id)}
-                        className="text-sm px-3 py-1 border-2 border-red-600 text-red-600 hover:bg-red-50 shadow-[2px_2px_0_rgba(0,0,0,1)]"
+                        variant="destructive"
+                        size="sm"
                       >
                         Delete
-                      </button>
+                      </Button>
                     </div>
                   </div>
                   <div className="text-sm text-gray-800">

src/components/twitter-api-notice.js

@@ -7,7 +7,9 @@ import {
   DialogTitle,
   DialogDescription,
 } from "./ui/dialog";
+import { Button } from "./ui/button";
 import { ModalWindowControls } from "./modal-window-controls";
+import { format } from "date-fns";
 
 export function TwitterApiNotice() {
   const [open, setOpen] = useState(false);
@@ -25,25 +27,39 @@ export function TwitterApiNotice() {
       <DialogContent className="border-none bg-transparent p-0 shadow-none">
         <motion.div
           initial={{ opacity: 0, x: 0 }}
-          animate={{ 
+          animate={{
             opacity: 1,
             x: [0, -10, 10, -5, 5, 0],
             transition: {
               opacity: { duration: 0.1 },
-              x: { duration: 0.5, times: [0, 0.2, 0.4, 0.6, 0.8, 1] }
-            }
+              x: { duration: 0.5, times: [0, 0.2, 0.4, 0.6, 0.8, 1] },
+            },
           }}
           className="relative border-2 border-gray-800 bg-white shadow-[4px_4px_0_rgba(0,0,0,1)]"
         >
           <ModalWindowControls onClose={() => setOpen(false)} />
           <div className="p-6">
             <DialogHeader className="text-left">
               <DialogTitle className="font-mono text-xl font-semibold">
-                Twitter API Notice
+                We've been ratelimited.
               </DialogTitle>
               <DialogDescription className="text-gray-600">
-                Due to Twitter&apos;s API rate limiting and increased pricing, Twitter integration has been temporarily disabled. We apologize for any inconvenience and are exploring alternative solutions.
+                We exceeded our ration of 17 tweets per 24 hours... so while we wait until {format(new Date(1736524953 * 1000), "h:mm a 'on' MMM d, yyyy")}, we're raising funds to pay the absurd $200/month API fee.
               </DialogDescription>
+              <div className="pt-2 flex gap-4">
+                <Button
+                  asChild
+                >
+                  <a
+                    href="https://app.potlock.org/?tab=project&projectId=crosspost.near"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    please donate
+                  </a>
+                </Button>
+                <Button disabled>buy $XPOST</Button>
+              </div>
             </DialogHeader>
           </div>
         </motion.div>

src/components/ui/button.jsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-2 border-gray-800 hover:bg-gray-100 shadow-[2px_2px_0_rgba(0,0,0,1)]",
+  {
+    variants: {
+      variant: {
+        default: "bg-white",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "bg-white",
+        secondary: "bg-white",
+        ghost: "border-0 shadow-none hover:bg-accent hover:text-accent-foreground",
+        link: "border-0 shadow-none text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 px-3 text-xs",
+        lg: "h-10 px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+  return (
+    (<Comp
+      className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
+      {...props} />)
+  );
+})
+Button.displayName = "Button"
+
+export { Button, buttonVariants }