BudgetAmountSelect.tsx raw

   1  import React from "react";
   2  import { FormattedBitcoinAmount } from "src/components/FormattedBitcoinAmount";
   3  import FormattedFiatAmount from "src/components/FormattedFiatAmount";
   4  import { Input } from "src/components/ui/input";
   5  import { cn } from "src/lib/utils";
   6  import { budgetOptionsSat as defaultBudgetOptionsSat } from "src/types";
   7  
   8  function BudgetAmountSelect({
   9    valueSat,
  10    onChange,
  11    minAmountSat,
  12    budgetOptionsSat = defaultBudgetOptionsSat,
  13  }: {
  14    valueSat: number;
  15    onChange: (value: number) => void;
  16    minAmountSat?: number;
  17    budgetOptionsSat?: typeof defaultBudgetOptionsSat;
  18  }) {
  19    const [inputValue, setInputValue] = React.useState(
  20      valueSat ? String(valueSat) : ""
  21    );
  22  
  23    React.useEffect(() => {
  24      setInputValue(valueSat ? String(valueSat) : "");
  25    }, [valueSat]);
  26  
  27    return (
  28      <>
  29        <div className="grid grid-cols-3 gap-3 text-xs mb-3">
  30          {Object.keys(budgetOptionsSat)
  31            .filter(
  32              (budget) =>
  33                !minAmountSat || budgetOptionsSat[budget] >= minAmountSat
  34            )
  35            .map((budget) => (
  36              <button
  37                type="button"
  38                key={budget}
  39                onClick={() => {
  40                  onChange(budgetOptionsSat[budget]);
  41                }}
  42                className={cn(
  43                  "cursor-pointer rounded text-nowrap border-2 text-center p-3 py-4 slashed-zero",
  44                  valueSat === budgetOptionsSat[budget]
  45                    ? "border-primary"
  46                    : "border-muted"
  47                )}
  48              >
  49                <FormattedBitcoinAmount
  50                  amountMsat={budgetOptionsSat[budget] * 1000}
  51                />
  52                <FormattedFiatAmount
  53                  className="text-xs"
  54                  showApprox
  55                  amountSat={budgetOptionsSat[budget]}
  56                />
  57              </button>
  58            ))}
  59        </div>
  60        <div className="mb-3">
  61          <Input
  62            id="budget"
  63            name="budget"
  64            type="number"
  65            min={1}
  66            required
  67            placeholder="Custom amount in sats"
  68            value={inputValue}
  69            onChange={(e) => {
  70              setInputValue(e.target.value);
  71              const n = parseInt(e.target.value);
  72              onChange(!isNaN(n) && n > 0 ? n : 0);
  73            }}
  74          />
  75        </div>
  76      </>
  77    );
  78  }
  79  
  80  export default BudgetAmountSelect;
  81