From 11f724fa64ea096a516aabc2985a4f5491ea7831 Mon Sep 17 00:00:00 2001
From: zvspany <zv@zvcloud.net>
Date: Mon, 9 Mar 2026 17:05:47 +0100
Subject: [PATCH] feat: add quick amount shortcuts

---
 components/converter/converter-card.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/components/converter/converter-card.tsx b/components/converter/converter-card.tsx
index 87d45f5..d89cb42 100644
--- a/components/converter/converter-card.tsx
+++ b/components/converter/converter-card.tsx
@@ -32,6 +32,7 @@ import { validateAmount } from "@/lib/validation";
 
 const DEFAULT_FROM = "USD";
 const DEFAULT_TO = "EUR";
+const QUICK_AMOUNTS = [10, 50, 100, 500, 1000] as const;
 
 interface ConverterCardProps {
   forcedFromCode?: string;
@@ -311,6 +312,29 @@ export function ConverterCard({
               aria-describedby={amountError ? "amount-error" : undefined}
             />
           </div>
+          <div className="flex flex-wrap items-center gap-2 pt-1">
+            {QUICK_AMOUNTS.map((quickAmount) => {
+              const isActive =
+                inputValidation.ok && inputValidation.value === quickAmount;
+
+              return (
+                <Button
+                  key={quickAmount}
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setAmountInput(String(quickAmount))}
+                  className={cn(
+                    "h-7 rounded-full border-border/70 px-3 text-xs text-muted-foreground transition-colors hover:text-foreground",
+                    isActive ? "border-cyan-300/50 bg-cyan-500/15 text-cyan-100" : ""
+                  )}
+                  aria-label={`Set amount to ${quickAmount}`}
+                >
+                  {quickAmount}
+                </Button>
+              );
+            })}
+          </div>
           {amountError ? (
             <p id="amount-error" className="text-sm text-red-300">
               {amountError}