BudgetRenewalSelect.tsx raw

   1  import React from "react";
   2  import { Label } from "src/components/ui/label";
   3  import {
   4    Select,
   5    SelectContent,
   6    SelectItem,
   7    SelectTrigger,
   8    SelectValue,
   9  } from "src/components/ui/select";
  10  import { BudgetRenewalType, validBudgetRenewals } from "src/types";
  11  
  12  interface BudgetRenewalProps {
  13    value: BudgetRenewalType;
  14    onChange: (value: BudgetRenewalType) => void;
  15  }
  16  
  17  const BudgetRenewalSelect: React.FC<BudgetRenewalProps> = ({
  18    value,
  19    onChange,
  20  }) => {
  21    return (
  22      <div className="flex gap-3 items-center mb-3">
  23        <Label htmlFor="budget-renewal">Renewal</Label>
  24        <Select value={value} onValueChange={onChange}>
  25          <SelectTrigger id="budget-renewal" className="w-[150px] capitalize">
  26            <SelectValue placeholder={value} />
  27          </SelectTrigger>
  28          <SelectContent className="capitalize">
  29            {validBudgetRenewals.map((renewalOption) => (
  30              <SelectItem key={renewalOption} value={renewalOption}>
  31                {renewalOption}
  32              </SelectItem>
  33            ))}
  34          </SelectContent>
  35        </Select>
  36      </div>
  37    );
  38  };
  39  
  40  export default BudgetRenewalSelect;
  41