75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
"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>
|
|
);
|
|
}
|