feat: split into multiple items

components/forms/convert-currency.tsx

@@ -1,117 +0,0 @@
-import { FormError } from "@/components/forms/error"
-import { formatCurrency } from "@/lib/utils"
-import { format, startOfDay } from "date-fns"
-import { Loader2 } from "lucide-react"
-import { useEffect, useState } from "react"
-import { Button } from "../ui/button"
-
-async function getCurrencyRate(currencyCodeFrom: string, currencyCodeTo: string, date: Date): Promise<number> {
-  const formattedDate = format(date, "yyyy-MM-dd")
-  const response = await fetch(`/api/currency?from=${currencyCodeFrom}&to=${currencyCodeTo}&date=${formattedDate}`)
-
-  if (!response.ok) {
-    const errorData = await response.json()
-    console.log("Currency API error:", errorData.error)
-    throw new Error(errorData.error || "Failed to fetch currency rate")
-  }
-
-  const data = await response.json()
-  return data.rate
-}
-
-export const FormConvertCurrency = ({
-  originalTotal,
-  originalCurrencyCode,
-  targetCurrencyCode,
-  date,
-  onChange,
-}: {
-  originalTotal: number
-  originalCurrencyCode: string
-  targetCurrencyCode: string
-  date?: Date | undefined
-  onChange?: (value: number) => void
-}) => {
-  const normalizedDate = startOfDay(date || new Date(Date.now() - 24 * 60 * 60 * 1000))
-  const normalizedDateString = format(normalizedDate, "yyyy-MM-dd")
-  const [exchangeRate, setExchangeRate] = useState(0)
-  const [convertedTotal, setConvertedTotal] = useState(0)
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  const fetchAndUpdateRates = async () => {
-    try {
-      setIsLoading(true)
-      setError(null)
-
-      const rate = await getCurrencyRate(originalCurrencyCode, targetCurrencyCode, normalizedDate)
-      setExchangeRate(rate)
-      setConvertedTotal(Math.round(originalTotal * rate * 100) / 100)
-    } catch (error) {
-      console.error("Error fetching currency rates:", error)
-      setExchangeRate(0)
-      setConvertedTotal(0)
-      setError(error instanceof Error ? error.message : "Failed to fetch currency rate")
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  const handleRestart = () => {
-    setError(null)
-    fetchAndUpdateRates()
-  }
-
-  useEffect(() => {
-    fetchAndUpdateRates()
-  }, [originalCurrencyCode, targetCurrencyCode, normalizedDateString, originalTotal])
-
-  useEffect(() => {
-    onChange?.(convertedTotal)
-  }, [convertedTotal])
-
-  if (!originalTotal || !originalCurrencyCode || !targetCurrencyCode || originalCurrencyCode === targetCurrencyCode) {
-    return <></>
-  }
-
-  return (
-    <div className="flex flex-row gap-2 items-center">
-      {isLoading ? (
-        <div className="flex flex-row items-center gap-2 text-sm text-muted-foreground">
-          <Loader2 className="w-4 h-4 animate-spin" />
-          <div className="font-semibold">Loading exchange rates...</div>
-        </div>
-      ) : (
-        <div className="flex flex-col gap-2">
-          <div className="flex items-center gap-2">
-            <div>{formatCurrency(originalTotal * 100, originalCurrencyCode)}</div>
-            <div>=</div>
-            <div>{formatCurrency(originalTotal * 100 * exchangeRate, targetCurrencyCode).slice(0, 1)}</div>
-            <input
-              type="number"
-              step="0.01"
-              name="convertedTotal"
-              value={convertedTotal}
-              onChange={(e) => {
-                const newValue = parseFloat(e.target.value || "0")
-                !isNaN(newValue) && setConvertedTotal(Math.round(newValue * 100) / 100)
-              }}
-              className="w-32 rounded-md border border-input px-2 py-1"
-            />
-          </div>
-          {!error && (
-            <div className="text-xs text-muted-foreground">The exchange rate will be added to the transaction</div>
-          )}
-          {error && (
-            <div className="flex flex-row gap-2">
-              <FormError className="mt-0 text-sm">{error}</FormError>
-              <Button variant="outline" size="sm" className="text-xs" onClick={handleRestart}>
-                Retry
-              </Button>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

components/forms/error.tsx

@@ -1,5 +1,16 @@
 import { cn } from "@/lib/utils"
+import { AlertCircle } from "lucide-react"
 
 export function FormError({ children, className }: { children: React.ReactNode; className?: string }) {
-  return <p className={cn("text-red-500 mt-4 overflow-hidden", className)}>{children}</p>
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center gap-2 px-3 py-2 rounded-md bg-red-50 text-red-700 border border-red-200",
+        className
+      )}
+    >
+      <AlertCircle className="w-4 h-4 flex-shrink-0" />
+      <p className="text-sm">{children}</p>
+    </div>
+  )
 }