72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
|
|
export function ConverterCardHeader({
|
|
fiatSource,
|
|
cryptoSource,
|
|
}: {
|
|
fiatSource: string;
|
|
cryptoSource: string;
|
|
}) {
|
|
return (
|
|
<CardHeader className="relative isolate z-10 overflow-hidden rounded-t-2xl border-b border-white/5 bg-[linear-gradient(115deg,rgba(16,39,62,0.9)_0%,rgba(14,32,50,0.95)_46%,rgba(14,50,54,0.88)_100%)] pb-4 sm:pb-5 before:pointer-events-none before:absolute before:inset-0 before:bg-[radial-gradient(140%_120%_at_0%_0%,rgba(56,189,248,0.12)_0%,rgba(56,189,248,0)_45%),radial-gradient(120%_100%_at_100%_0%,rgba(16,185,129,0.1)_0%,rgba(16,185,129,0)_45%)] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10">
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<CardTitle className="text-2xl font-semibold tracking-tight">
|
|
Currency Converter
|
|
</CardTitle>
|
|
<Badge
|
|
variant="outline"
|
|
className="max-w-full border-border/70 bg-background/50 text-[11px] sm:text-xs"
|
|
>
|
|
<span className="inline-flex items-center gap-1 whitespace-nowrap sm:hidden">
|
|
<span className="text-muted-foreground">Data sources:</span>
|
|
<a
|
|
href="https://frankfurter.dev/"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-foreground transition-colors hover:text-cyan-100"
|
|
>
|
|
{fiatSource}
|
|
</a>
|
|
<span className="text-muted-foreground">•</span>
|
|
<a
|
|
href="https://www.coingecko.com/"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-foreground transition-colors hover:text-cyan-100"
|
|
>
|
|
{cryptoSource}
|
|
</a>
|
|
</span>
|
|
|
|
<span className="hidden items-center gap-1 whitespace-nowrap sm:inline-flex">
|
|
<span className="text-muted-foreground">Data sources:</span>
|
|
<a
|
|
href="https://frankfurter.dev/"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-foreground transition-colors hover:text-cyan-100"
|
|
>
|
|
{fiatSource}
|
|
</a>
|
|
<span className="text-muted-foreground">•</span>
|
|
<a
|
|
href="https://www.coingecko.com/"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-foreground transition-colors hover:text-cyan-100"
|
|
>
|
|
{cryptoSource}
|
|
</a>
|
|
</span>
|
|
</Badge>
|
|
</div>
|
|
<CardDescription className="pr-1 text-base/7 sm:text-sm">
|
|
Convert fiat currencies and cryptocurrencies using live exchange rates.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
);
|
|
}
|