refactor(converter): split converter card into modular section components

components/converter/converter-card-rates-summary.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { formatTimestamp } from "@/lib/format";
+import type { RateAsset } from "@/lib/rates";
+
+interface ConverterCardRatesSummaryProps {
+  fromAsset?: RateAsset;
+  toAsset?: RateAsset;
+  currentRate: string | null;
+  inverseRate: string | null;
+  updatedAt: string;
+}
+
+export function ConverterCardRatesSummary({
+  fromAsset,
+  toAsset,
+  currentRate,
+  inverseRate,
+  updatedAt,
+}: ConverterCardRatesSummaryProps) {
+  return (
+    <div className="grid gap-3 text-sm text-muted-foreground sm:grid-cols-3">
+      <div>
+        <p className="text-xs uppercase tracking-[0.12em]">Current rate</p>
+        <p className="mt-1 text-sm text-foreground">
+          {fromAsset && toAsset && currentRate
+            ? `1 ${fromAsset.code} = ${currentRate} ${toAsset.code}`
+            : "-"}
+        </p>
+      </div>
+      <div>
+        <p className="text-xs uppercase tracking-[0.12em]">Inverse rate</p>
+        <p className="mt-1 text-sm text-foreground">
+          {fromAsset && toAsset && inverseRate
+            ? `1 ${toAsset.code} = ${inverseRate} ${fromAsset.code}`
+            : "-"}
+        </p>
+      </div>
+      <div>
+        <p className="text-xs uppercase tracking-[0.12em]">Last updated</p>
+        <p className="mt-1 text-sm text-foreground">{formatTimestamp(updatedAt)}</p>
+      </div>
+    </div>
+  );
+}