Initial commit
This commit is contained in:
zvspany
362
components/converter/converter-card.tsx
Normal file
362
components/converter/converter-card.tsx
Normal file
@@ -0,0 +1,362 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { AlertTriangle, ArrowUpDown, Loader2, RefreshCcw } from "lucide-react";
|
||||
|
||||
import { CurrencyIcon } from "@/components/converter/currency-icon";
|
||||
import { CurrencySelect } from "@/components/converter/currency-select";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { useDebouncedValue } from "@/hooks/use-debounced-value";
|
||||
import { useMarketRates } from "@/hooks/use-market-rates";
|
||||
import {
|
||||
formatAmount,
|
||||
formatInverseRate,
|
||||
formatRate,
|
||||
formatTimestamp
|
||||
} from "@/lib/format";
|
||||
import { buildRateMap, convertAmount } from "@/lib/rates";
|
||||
import { validateAmount } from "@/lib/validation";
|
||||
|
||||
const DEFAULT_FROM = "USD";
|
||||
const DEFAULT_TO = "EUR";
|
||||
|
||||
interface ConverterCardProps {
|
||||
forcedFromCode?: string;
|
||||
forcedToCode?: string;
|
||||
onPairChange?: (fromCode: string, toCode: string) => void;
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
function ErrorState({
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState() {
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export function ConverterCard({
|
||||
forcedFromCode,
|
||||
forcedToCode,
|
||||
onPairChange
|
||||
}: ConverterCardProps) {
|
||||
const { data, error, isLoading, refresh } = useMarketRates();
|
||||
|
||||
const [amountInput, setAmountInput] = useState("1");
|
||||
const [fromCode, setFromCode] = useState(DEFAULT_FROM);
|
||||
const [toCode, setToCode] = useState(DEFAULT_TO);
|
||||
|
||||
const debouncedAmount = useDebouncedValue(amountInput, 120);
|
||||
|
||||
const assets = useMemo(() => data?.assets ?? [], [data]);
|
||||
const rateMap = useMemo(() => buildRateMap(assets), [assets]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!assets.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!rateMap.has(fromCode)) {
|
||||
setFromCode(rateMap.has(DEFAULT_FROM) ? DEFAULT_FROM : assets[0].code);
|
||||
}
|
||||
|
||||
if (!rateMap.has(toCode)) {
|
||||
const fallback = rateMap.has(DEFAULT_TO)
|
||||
? DEFAULT_TO
|
||||
: assets.find((asset) => asset.code !== fromCode)?.code ?? assets[0].code;
|
||||
|
||||
setToCode(fallback);
|
||||
}
|
||||
}, [assets, fromCode, toCode, rateMap]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!assets.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (forcedFromCode && rateMap.has(forcedFromCode)) {
|
||||
setFromCode(forcedFromCode);
|
||||
}
|
||||
|
||||
if (forcedToCode && rateMap.has(forcedToCode)) {
|
||||
setToCode(forcedToCode);
|
||||
}
|
||||
}, [assets, forcedFromCode, forcedToCode, rateMap]);
|
||||
|
||||
useEffect(() => {
|
||||
onPairChange?.(fromCode, toCode);
|
||||
}, [fromCode, toCode, onPairChange]);
|
||||
|
||||
const inputValidation = validateAmount(amountInput);
|
||||
const debouncedValidation = validateAmount(debouncedAmount);
|
||||
|
||||
const fromAsset = rateMap.get(fromCode);
|
||||
const toAsset = rateMap.get(toCode);
|
||||
|
||||
const convertedValue = useMemo(() => {
|
||||
if (!fromAsset || !toAsset || !debouncedValidation.ok) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return convertAmount(debouncedValidation.value, fromAsset, toAsset);
|
||||
}, [fromAsset, toAsset, debouncedValidation]);
|
||||
|
||||
const currentRate = useMemo(() => {
|
||||
if (!fromAsset || !toAsset) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return formatRate(fromAsset, toAsset);
|
||||
}, [fromAsset, toAsset]);
|
||||
|
||||
const inverseRate = useMemo(() => {
|
||||
if (!fromAsset || !toAsset) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return formatInverseRate(fromAsset, toAsset);
|
||||
}, [fromAsset, toAsset]);
|
||||
|
||||
const handleSwap = () => {
|
||||
setFromCode(toCode);
|
||||
setToCode(fromCode);
|
||||
};
|
||||
|
||||
if (isLoading && !data) {
|
||||
return <ConverterSkeleton />;
|
||||
}
|
||||
|
||||
if (!data && error) {
|
||||
return <ErrorState message={error} onRetry={() => void refresh()} />;
|
||||
}
|
||||
|
||||
if (!data || assets.length === 0) {
|
||||
return <EmptyState />;
|
||||
}
|
||||
|
||||
const convertedDisplay =
|
||||
convertedValue !== null && toAsset
|
||||
? `${formatAmount(convertedValue, toAsset)} ${toAsset.code}`
|
||||
: "--";
|
||||
|
||||
const amountError = inputValidation.ok ? null : inputValidation.error;
|
||||
|
||||
return (
|
||||
<Card className="relative overflow-hidden border-border/70 bg-card/90">
|
||||
<CardHeader className="relative z-10 rounded-t-2xl bg-gradient-to-r from-sky-500/10 via-cyan-400/5 to-emerald-500/10 pb-4 sm:pb-5">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<CardTitle className="text-2xl font-semibold tracking-tight">
|
||||
Smart Converter
|
||||
</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="border-border/70 bg-background/50">
|
||||
Fiat: {data.sources.fiat}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="border-border/70 bg-background/50">
|
||||
Crypto: {data.sources.crypto}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<CardDescription className="pr-1 text-base/7 sm:text-sm">
|
||||
Convert fiat and crypto assets instantly using live normalized USD quote data.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="relative z-10 space-y-5 pt-4 sm:pt-5">
|
||||
{error ? (
|
||||
<div className="flex items-center gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-200">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<span>Using last successful data. Latest refresh failed: {error}</span>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="amount"
|
||||
className="text-xs uppercase tracking-[0.14em] text-muted-foreground"
|
||||
>
|
||||
Amount
|
||||
</label>
|
||||
<Input
|
||||
id="amount"
|
||||
type="text"
|
||||
inputMode="decimal"
|
||||
value={amountInput}
|
||||
onChange={(event) => setAmountInput(event.target.value)}
|
||||
placeholder="Enter amount"
|
||||
className="h-14 rounded-xl bg-background/70 px-4 text-lg"
|
||||
aria-invalid={Boolean(amountError)}
|
||||
aria-describedby={amountError ? "amount-error" : undefined}
|
||||
/>
|
||||
{amountError ? (
|
||||
<p id="amount-error" className="text-sm text-red-300">
|
||||
{amountError}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-[1fr_auto_1fr] sm:items-end">
|
||||
<CurrencySelect
|
||||
label="From"
|
||||
value={fromCode}
|
||||
onChange={setFromCode}
|
||||
assets={assets}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="outline"
|
||||
className="mx-auto mb-0.5 rounded-full border-border/70 bg-background/50"
|
||||
onClick={handleSwap}
|
||||
aria-label="Swap currencies"
|
||||
>
|
||||
<ArrowUpDown className="h-4 w-4" />
|
||||
</Button>
|
||||
<CurrencySelect
|
||||
label="To"
|
||||
value={toCode}
|
||||
onChange={setToCode}
|
||||
assets={assets}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-border/70 bg-background/50 p-4">
|
||||
<p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">
|
||||
Converted value
|
||||
</p>
|
||||
{fromAsset && toAsset ? (
|
||||
<div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-border/70 bg-background/60 px-2 py-1">
|
||||
<CurrencyIcon code={fromAsset.code} type={fromAsset.type} size="sm" />
|
||||
{fromAsset.code}
|
||||
</span>
|
||||
<span>to</span>
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-border/70 bg-background/60 px-2 py-1">
|
||||
<CurrencyIcon code={toAsset.code} type={toAsset.type} size="sm" />
|
||||
{toAsset.code}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
<p className="mt-2 break-all text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
|
||||
{convertedDisplay}
|
||||
</p>
|
||||
{fromAsset ? (
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
for {inputValidation.ok ? formatAmount(inputValidation.value, fromAsset) : "-"}{" "}
|
||||
{fromAsset.code}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<Separator className="bg-border/70" />
|
||||
|
||||
<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(data.updatedAt)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => void refresh()}
|
||||
className="text-muted-foreground"
|
||||
>
|
||||
<RefreshCcw className="mr-2 h-4 w-4" />
|
||||
Refresh rates
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-end gap-2 text-xs text-muted-foreground">
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
Updating market rates...
|
||||
</div>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
82
components/converter/currency-icon.tsx
Normal file
82
components/converter/currency-icon.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
|
||||
import type { AssetType } from "@/lib/assets";
|
||||
import { FIAT_FLAG_CODES } from "@/lib/fiat-flag-codes";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const sizeClassMap = {
|
||||
sm: "h-5 w-5",
|
||||
md: "h-6 w-6",
|
||||
lg: "h-8 w-8"
|
||||
} as const;
|
||||
|
||||
type IconSize = keyof typeof sizeClassMap;
|
||||
|
||||
interface CurrencyIconProps {
|
||||
code: string;
|
||||
type: AssetType;
|
||||
size?: IconSize;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function CurrencyIcon({
|
||||
code,
|
||||
type,
|
||||
size = "md",
|
||||
className
|
||||
}: CurrencyIconProps) {
|
||||
const [cryptoMissing, setCryptoMissing] = useState(false);
|
||||
|
||||
const lowerCode = useMemo(() => code.toLowerCase(), [code]);
|
||||
const wrapperSize = sizeClassMap[size];
|
||||
|
||||
if (type === "fiat" && FIAT_FLAG_CODES.has(lowerCode)) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center overflow-hidden rounded-full border border-border/70 bg-background/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
|
||||
wrapperSize,
|
||||
className
|
||||
)}
|
||||
aria-hidden
|
||||
>
|
||||
<span
|
||||
className={`currency-flag currency-flag-${lowerCode}`}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center"
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "crypto" && !cryptoMissing) {
|
||||
return (
|
||||
<img
|
||||
src={`/icons/crypto/${lowerCode}.png`}
|
||||
alt=""
|
||||
aria-hidden
|
||||
className={cn("rounded-full object-cover", wrapperSize, className)}
|
||||
onError={() => setCryptoMissing(true)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center rounded-full border border-border/70 bg-muted text-[10px] font-semibold uppercase text-muted-foreground",
|
||||
wrapperSize,
|
||||
className
|
||||
)}
|
||||
aria-hidden
|
||||
>
|
||||
{code.slice(0, 2)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
193
components/converter/currency-select.tsx
Normal file
193
components/converter/currency-select.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import { Check, ChevronDown } from "lucide-react";
|
||||
|
||||
import { POPULAR_CODES } from "@/lib/assets";
|
||||
import { RateAsset } from "@/lib/rates";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { CurrencyIcon } from "@/components/converter/currency-icon";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
CommandSeparator
|
||||
} from "@/components/ui/command";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
|
||||
interface CurrencySelectProps {
|
||||
value: string;
|
||||
onChange: (nextCode: string) => void;
|
||||
assets: RateAsset[];
|
||||
label: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
function AssetLabel({ asset }: { asset?: RateAsset }) {
|
||||
if (!asset) {
|
||||
return (
|
||||
<span className="text-sm text-muted-foreground">Choose currency</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="flex min-w-0 items-center gap-2.5 text-left">
|
||||
<CurrencyIcon code={asset.code} type={asset.type} size="md" className="shrink-0" />
|
||||
<span className="flex min-w-0 flex-col">
|
||||
<span className="truncate text-sm font-medium text-foreground">
|
||||
{asset.code} - {asset.name}
|
||||
</span>
|
||||
<span className="truncate text-xs text-muted-foreground">
|
||||
{asset.type === "fiat" ? "Fiat" : "Crypto"}
|
||||
{asset.symbol ? ` | ${asset.symbol}` : ""}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function CurrencySelect({
|
||||
value,
|
||||
onChange,
|
||||
assets,
|
||||
label,
|
||||
disabled
|
||||
}: CurrencySelectProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const selectedAsset = useMemo(
|
||||
() => assets.find((asset) => asset.code === value),
|
||||
[assets, value]
|
||||
);
|
||||
|
||||
const popularAssets = useMemo(
|
||||
() =>
|
||||
POPULAR_CODES.map((code) => assets.find((asset) => asset.code === code)).filter(
|
||||
(asset): asset is RateAsset => Boolean(asset)
|
||||
),
|
||||
[assets]
|
||||
);
|
||||
|
||||
const allAssets = useMemo(() => {
|
||||
const popularSet = new Set(popularAssets.map((asset) => asset.code));
|
||||
|
||||
return assets
|
||||
.filter((asset) => !popularSet.has(asset.code))
|
||||
.sort((a, b) => {
|
||||
if (a.type !== b.type) {
|
||||
return a.type === "fiat" ? -1 : 1;
|
||||
}
|
||||
|
||||
return a.code.localeCompare(b.code);
|
||||
});
|
||||
}, [assets, popularAssets]);
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">
|
||||
{label}
|
||||
</p>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
disabled={disabled}
|
||||
className="h-auto w-full justify-between rounded-xl border-border/70 px-3 py-2.5"
|
||||
>
|
||||
<AssetLabel asset={selectedAsset} />
|
||||
<ChevronDown className="ml-2 h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search by code or name..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No assets found.</CommandEmpty>
|
||||
{popularAssets.length > 0 ? (
|
||||
<CommandGroup heading="Popular">
|
||||
{popularAssets.map((asset) => (
|
||||
<CommandItem
|
||||
key={asset.code}
|
||||
value={`${asset.code} ${asset.name} ${asset.type}`}
|
||||
onSelect={() => {
|
||||
onChange(asset.code);
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2.5">
|
||||
<CurrencyIcon
|
||||
code={asset.code}
|
||||
type={asset.type}
|
||||
size="md"
|
||||
className="shrink-0"
|
||||
/>
|
||||
<span className="flex min-w-0 flex-col">
|
||||
<span className="truncate font-medium">
|
||||
{asset.code} - {asset.name}
|
||||
</span>
|
||||
<span className="truncate text-xs text-muted-foreground">
|
||||
{asset.type === "fiat" ? "Fiat" : "Crypto"}
|
||||
{asset.symbol ? ` | ${asset.symbol}` : ""}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<Check
|
||||
className={cn(
|
||||
"ml-2 h-4 w-4",
|
||||
value === asset.code ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
) : null}
|
||||
{allAssets.length > 0 ? <CommandSeparator /> : null}
|
||||
<CommandGroup heading="All assets">
|
||||
{allAssets.map((asset) => (
|
||||
<CommandItem
|
||||
key={asset.code}
|
||||
value={`${asset.code} ${asset.name} ${asset.type}`}
|
||||
onSelect={() => {
|
||||
onChange(asset.code);
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2.5">
|
||||
<CurrencyIcon
|
||||
code={asset.code}
|
||||
type={asset.type}
|
||||
size="md"
|
||||
className="shrink-0"
|
||||
/>
|
||||
<span className="flex min-w-0 flex-col">
|
||||
<span className="truncate font-medium">
|
||||
{asset.code} - {asset.name}
|
||||
</span>
|
||||
<span className="truncate text-xs text-muted-foreground">
|
||||
{asset.type === "fiat" ? "Fiat" : "Crypto"}
|
||||
{asset.symbol ? ` | ${asset.symbol}` : ""}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<Check
|
||||
className={cn(
|
||||
"ml-2 h-4 w-4",
|
||||
value === asset.code ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
23
components/sections/hero.tsx
Normal file
23
components/sections/hero.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<section className="relative pt-10 sm:pt-14">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-cyan-400/40 bg-cyan-400/10 px-3 py-1 text-cyan-200"
|
||||
>
|
||||
Real-time fiat and crypto conversion
|
||||
</Badge>
|
||||
<h1 className="mt-5 text-balance font-heading text-4xl font-semibold leading-tight tracking-tight text-foreground sm:text-5xl lg:text-6xl">
|
||||
Convert Global Currencies and Crypto in One Premium Workspace
|
||||
</h1>
|
||||
<p className="mx-auto mt-4 max-w-2xl text-balance text-base text-muted-foreground sm:text-lg">
|
||||
Instantly switch between fiat and digital assets with live rates, smart
|
||||
formatting, and a clean professional interface built for speed.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
145
components/sections/insights-section.tsx
Normal file
145
components/sections/insights-section.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
"use client";
|
||||
|
||||
import { ArrowRightLeft, Landmark, Layers, MoveRight, Workflow } from "lucide-react";
|
||||
|
||||
import { CurrencyIcon } from "@/components/converter/currency-icon";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import type { AssetType } from "@/lib/assets";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface PopularPair {
|
||||
from: string;
|
||||
to: string;
|
||||
fromType: AssetType;
|
||||
toType: AssetType;
|
||||
}
|
||||
|
||||
const popularPairs: PopularPair[] = [
|
||||
{ from: "USD", to: "PLN", fromType: "fiat", toType: "fiat" },
|
||||
{ from: "EUR", to: "GBP", fromType: "fiat", toType: "fiat" },
|
||||
{ from: "USD", to: "BTC", fromType: "fiat", toType: "crypto" },
|
||||
{ from: "BTC", to: "USD", fromType: "crypto", toType: "fiat" },
|
||||
{ from: "ETH", to: "SOL", fromType: "crypto", toType: "crypto" },
|
||||
{ from: "XMR", to: "BTC", fromType: "crypto", toType: "crypto" },
|
||||
{ from: "LTC", to: "BTC", fromType: "crypto", toType: "crypto" },
|
||||
{ from: "CHF", to: "JPY", fromType: "fiat", toType: "fiat" }
|
||||
];
|
||||
|
||||
const howItWorks = [
|
||||
"Fiat rates are fetched from Frankfurter with USD as the common quote.",
|
||||
"Crypto prices are fetched from CoinGecko in USD.",
|
||||
"Any pair is converted through normalized USD-per-unit pricing."
|
||||
];
|
||||
|
||||
const supportedAssets = [
|
||||
{
|
||||
title: "Fiat currencies",
|
||||
description:
|
||||
"Supports a broad list of global government-issued currencies, including major and regional pairs."
|
||||
},
|
||||
{
|
||||
title: "Cryptocurrencies",
|
||||
description:
|
||||
"Includes leading crypto assets such as BTC, ETH, LTC, XMR, SOL, USDT, and more."
|
||||
},
|
||||
{
|
||||
title: "Cross-market pairs",
|
||||
description:
|
||||
"Convert fiat-to-crypto, crypto-to-fiat, and crypto-to-crypto in one unified experience."
|
||||
}
|
||||
];
|
||||
|
||||
interface InsightsSectionProps {
|
||||
selectedFromCode: string;
|
||||
selectedToCode: string;
|
||||
onSelectPopularPair: (fromCode: string, toCode: string) => void;
|
||||
}
|
||||
|
||||
export function InsightsSection({
|
||||
selectedFromCode,
|
||||
selectedToCode,
|
||||
onSelectPopularPair
|
||||
}: InsightsSectionProps) {
|
||||
return (
|
||||
<section className="mt-10 grid gap-5 lg:grid-cols-3">
|
||||
<Card className="border-border/70 bg-card/85">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-lg">
|
||||
<ArrowRightLeft className="h-4 w-4 text-sky-300" />
|
||||
Popular conversions
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-wrap gap-2 pt-0">
|
||||
{popularPairs.map((pair) => {
|
||||
const isActive =
|
||||
pair.from === selectedFromCode && pair.to === selectedToCode;
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={`${pair.from}-${pair.to}`}
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onSelectPopularPair(pair.from, pair.to)}
|
||||
className={cn(
|
||||
"h-9 rounded-full border-border/70 bg-background/50 px-3.5 font-normal transition-all",
|
||||
"hover:border-cyan-400/40 hover:bg-cyan-400/10 hover:text-cyan-100",
|
||||
isActive &&
|
||||
"border-cyan-400/50 bg-cyan-400/15 text-cyan-100 shadow-[0_0_0_1px_hsl(189_100%_40%_/_0.2)]"
|
||||
)}
|
||||
>
|
||||
<span className="inline-flex items-center gap-1.5 text-xs sm:text-sm">
|
||||
<CurrencyIcon code={pair.from} type={pair.fromType} size="sm" />
|
||||
<span>{pair.from}</span>
|
||||
<MoveRight className="h-3.5 w-3.5 text-cyan-300" />
|
||||
<CurrencyIcon code={pair.to} type={pair.toType} size="sm" />
|
||||
<span>{pair.to}</span>
|
||||
</span>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-border/70 bg-card/85">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-lg">
|
||||
<Workflow className="h-4 w-4 text-cyan-300" />
|
||||
How it works
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 pt-0 text-sm text-muted-foreground">
|
||||
{howItWorks.map((line) => (
|
||||
<p key={line} className="rounded-lg border border-border/60 bg-background/40 px-3 py-2">
|
||||
{line}
|
||||
</p>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-border/70 bg-card/85">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-lg">
|
||||
<Layers className="h-4 w-4 text-emerald-300" />
|
||||
Supported asset types
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 pt-0 text-sm">
|
||||
{supportedAssets.map((item) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="rounded-lg border border-border/60 bg-background/40 px-3 py-2"
|
||||
>
|
||||
<p className="flex items-center gap-2 font-medium text-foreground">
|
||||
<Landmark className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
{item.title}
|
||||
</p>
|
||||
<p className="mt-1 text-muted-foreground">{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
30
components/ui/badge.tsx
Normal file
30
components/ui/badge.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import * as React from "react";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "border-transparent bg-primary/20 text-primary",
|
||||
secondary: "border-transparent bg-secondary text-secondary-foreground",
|
||||
outline: "border-border text-foreground"
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export interface BadgeProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof badgeVariants> {}
|
||||
|
||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants };
|
||||
55
components/ui/button.tsx
Normal file
55
components/ui/button.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import * as React from "react";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:scale-[0.99]",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/85",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
outline:
|
||||
"border border-border bg-background/70 backdrop-blur hover:bg-accent hover:text-accent-foreground"
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-lg px-8",
|
||||
icon: "h-10 w-10"
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean;
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Button.displayName = "Button";
|
||||
|
||||
export { Button, buttonVariants };
|
||||
72
components/ui/card.tsx
Normal file
72
components/ui/card.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Card = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-2xl border border-border/70 bg-card/85 text-card-foreground shadow-card backdrop-blur-xl",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
Card.displayName = "Card";
|
||||
|
||||
const CardHeader = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
|
||||
));
|
||||
CardHeader.displayName = "CardHeader";
|
||||
|
||||
const CardTitle = React.forwardRef<
|
||||
HTMLHeadingElement,
|
||||
React.HTMLAttributes<HTMLHeadingElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<h3
|
||||
ref={ref}
|
||||
className={cn("font-semibold leading-none tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardTitle.displayName = "CardTitle";
|
||||
|
||||
const CardDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<p
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardDescription.displayName = "CardDescription";
|
||||
|
||||
const CardContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||
));
|
||||
CardContent.displayName = "CardContent";
|
||||
|
||||
const CardFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex items-center p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardFooter.displayName = "CardFooter";
|
||||
|
||||
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
|
||||
116
components/ui/command.tsx
Normal file
116
components/ui/command.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { Command as CommandPrimitive } from "cmdk";
|
||||
import { Search } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Command = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-full w-full flex-col overflow-hidden rounded-xl bg-popover text-popover-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
Command.displayName = CommandPrimitive.displayName;
|
||||
|
||||
const CommandInput = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Input>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className="flex items-center border-b border-border px-3" cmdk-input-wrapper="">
|
||||
<Search className="mr-2 h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<CommandPrimitive.Input
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
));
|
||||
CommandInput.displayName = CommandPrimitive.Input.displayName;
|
||||
|
||||
const CommandList = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.List>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.List
|
||||
ref={ref}
|
||||
className={cn("max-h-[280px] overflow-y-auto overflow-x-hidden", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CommandList.displayName = CommandPrimitive.List.displayName;
|
||||
|
||||
const CommandEmpty = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Empty>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
|
||||
>((props, ref) => (
|
||||
<CommandPrimitive.Empty
|
||||
ref={ref}
|
||||
className="py-8 text-center text-sm text-muted-foreground"
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
|
||||
|
||||
const CommandGroup = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Group>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.Group
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"overflow-hidden p-1.5 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wide [&_[cmdk-group-heading]]:text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CommandGroup.displayName = CommandPrimitive.Group.displayName;
|
||||
|
||||
const CommandItem = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-pointer select-none items-center rounded-md px-2 py-2.5 text-sm outline-none transition-colors data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CommandItem.displayName = CommandPrimitive.Item.displayName;
|
||||
|
||||
const CommandSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
|
||||
|
||||
export {
|
||||
Command,
|
||||
CommandInput,
|
||||
CommandList,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandItem,
|
||||
CommandSeparator
|
||||
};
|
||||
24
components/ui/input.tsx
Normal file
24
components/ui/input.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
({ className, type, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-10 w-full rounded-lg border border-input bg-background/60 px-3 py-2 text-sm text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Input.displayName = "Input";
|
||||
|
||||
export { Input };
|
||||
31
components/ui/popover.tsx
Normal file
31
components/ui/popover.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Popover = PopoverPrimitive.Root;
|
||||
const PopoverTrigger = PopoverPrimitive.Trigger;
|
||||
const PopoverAnchor = PopoverPrimitive.Anchor;
|
||||
|
||||
const PopoverContent = React.forwardRef<
|
||||
React.ElementRef<typeof PopoverPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
||||
>(({ className, align = "center", sideOffset = 10, ...props }, ref) => (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
ref={ref}
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 w-72 rounded-xl border border-border bg-popover p-0 text-popover-foreground shadow-glow outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
));
|
||||
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
||||
|
||||
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|
||||
28
components/ui/separator.tsx
Normal file
28
components/ui/separator.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
decorative = true,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement> & {
|
||||
orientation?: "horizontal" | "vertical";
|
||||
decorative?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
role={decorative ? "none" : "separator"}
|
||||
aria-orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-border",
|
||||
orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Separator };
|
||||
17
components/ui/skeleton.tsx
Normal file
17
components/ui/skeleton.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import type * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"animate-shimmer rounded-md bg-gradient-to-r from-muted/60 via-muted to-muted/60 bg-[length:200%_100%]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Skeleton };
|
||||
Reference in New Issue
Block a user