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

components/converter/converter-card-states.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { AlertTriangle, RefreshCcw } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function ConverterSkeleton() {
+  return (
+    <Card className="border-border/70">
+      <CardHeader>
+        <Skeleton className="h-6 w-40" />
+        <Skeleton className="h-4 w-72" />
+      </CardHeader>
+      <CardContent className="space-y-5">
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-14 w-full rounded-xl" />
+        </div>
+        <div className="grid gap-3 sm:grid-cols-[1fr_auto_1fr] sm:items-end">
+          <Skeleton className="h-20 w-full rounded-xl" />
+          <Skeleton className="mx-auto h-10 w-10 rounded-full" />
+          <Skeleton className="h-20 w-full rounded-xl" />
+        </div>
+        <Skeleton className="h-28 w-full rounded-xl" />
+      </CardContent>
+    </Card>
+  );
+}
+
+export function ConverterErrorState({
+  message,
+  onRetry,
+}: {
+  message: string;
+  onRetry: () => void;
+}) {
+  return (
+    <Card className="border-red-500/30 bg-red-500/5">
+      <CardContent className="flex flex-col gap-4 p-6">
+        <div className="flex items-start gap-3">
+          <AlertTriangle className="mt-0.5 h-5 w-5 text-red-300" />
+          <div>
+            <p className="text-sm font-medium text-red-200">
+              Unable to load market rates
+            </p>
+            <p className="mt-1 text-sm text-red-200/80">{message}</p>
+          </div>
+        </div>
+        <Button
+          variant="outline"
+          onClick={onRetry}
+          className="w-fit border-red-300/30"
+        >
+          <RefreshCcw className="mr-2 h-4 w-4" />
+          Retry
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function ConverterEmptyState() {
+  return (
+    <Card className="border-border/70">
+      <CardContent className="p-6">
+        <p className="text-sm text-muted-foreground">
+          No assets are currently available. Please try again shortly.
+        </p>
+      </CardContent>
+    </Card>
+  );
+}