Initial commit
This commit is contained in:
39
app/pages/crypto-details/CryptoDetailsPage.tsx
Normal file
39
app/pages/crypto-details/CryptoDetailsPage.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useParams } from "react-router";
|
||||
import { ErrorView } from "~/components/error/ErrorView";
|
||||
import { LoadingView } from "~/components/loading/LoadingView";
|
||||
import { fetchApi } from "~/lib/fetch";
|
||||
import type { CryptocurrencyDetailsResponse } from "~/types/crypto-api";
|
||||
import { DescriptionSection } from "./DescriptionSection";
|
||||
import { useState } from "react";
|
||||
import { KeyStats } from "./KeyStats";
|
||||
import { PriceChart } from "./PriceChart";
|
||||
|
||||
export function CryptoDetailsPage() {
|
||||
const { id } = useParams();
|
||||
const [expandedView, setExpandedView] = useState(false);
|
||||
|
||||
const { data, isPending, error } = useQuery({
|
||||
queryKey: ["cryptocurrencies", id],
|
||||
queryFn: () => fetchApi<CryptocurrencyDetailsResponse>(`https://api.next.code-camp.org/cryptocurrencies/${id}`)
|
||||
});
|
||||
|
||||
if (isPending) {
|
||||
return <LoadingView />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <ErrorView />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<DescriptionSection currency={data.currency} />
|
||||
|
||||
<section className={expandedView ? "flex flex-col gap-4" : "grid gap-4 lg:grid-cols-5"}>
|
||||
<KeyStats currency={data.currency} />
|
||||
<PriceChart currency={data.currency} expanded={expandedView} onToggleExpand={() => setExpandedView(!expandedView)} />
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
45
app/pages/crypto-details/DescriptionSection.tsx
Normal file
45
app/pages/crypto-details/DescriptionSection.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import clsx from "clsx";
|
||||
import type { CryptocurrencyDetailsResponse } from "~/types/crypto-api";
|
||||
import { formatPercentage } from "~/utils/format";
|
||||
|
||||
export function DescriptionSection({
|
||||
currency
|
||||
}: {
|
||||
currency: CryptocurrencyDetailsResponse["currency"];
|
||||
}) {
|
||||
return (
|
||||
<section className="mb-8 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="max-w-3xl">
|
||||
<h2 className="text-base font-semibold text-slate-900">
|
||||
{currency.name} ({currency.symbol})
|
||||
</h2>
|
||||
<p className="mt-2 text-sm leading-6 text-slate-600">
|
||||
{currency.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 sm:items-end pt-3 md:pt-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-slate-500">Price</span>
|
||||
<span className="text-2xl font-semibold tracking-tight sm:text-3xl">
|
||||
${currency.price.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span
|
||||
className={clsx(
|
||||
"inline-flex items-center rounded-full px-3 py-1 text-xs font-medium",
|
||||
currency.percent_change_24h > 0
|
||||
? "bg-emerald-100 text-emerald-700"
|
||||
: "bg-rose-100 text-rose-700"
|
||||
)}
|
||||
>
|
||||
{formatPercentage(currency.percent_change_24h)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
60
app/pages/crypto-details/KeyStats.tsx
Normal file
60
app/pages/crypto-details/KeyStats.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import type { CryptocurrencyDetailsResponse } from "~/types/crypto-api";
|
||||
import { formatPercentage } from "~/utils/format";
|
||||
|
||||
export function KeyStats({
|
||||
currency
|
||||
}: {
|
||||
currency: CryptocurrencyDetailsResponse["currency"];
|
||||
}) {
|
||||
return (
|
||||
<div className="lg:col-span-2 rounded-2xl border border-slate-200 bg-white shadow-sm">
|
||||
<div className="border-b border-slate-200 p-5">
|
||||
<h2 className="text-base font-semibold text-slate-900">Key Stats</h2>
|
||||
<p className="mt-1 text-xs text-slate-500">Basic market data.</p>
|
||||
</div>
|
||||
|
||||
<div className="p-5">
|
||||
<dl className="divide-y divide-slate-100">
|
||||
<div className="flex items-center justify-between py-3">
|
||||
<dt className="text-sm text-slate-600">Market Cap</dt>
|
||||
<dd className="text-sm font-semibold text-slate-900">
|
||||
${(currency.market_cap / 1_000_000_000).toLocaleString()}B
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-3">
|
||||
<dt className="text-sm text-slate-600">Volume (24h)</dt>
|
||||
<dd className="text-sm font-semibold text-slate-900">
|
||||
${(currency.volume_24h / 1_000_000_000).toLocaleString()}B
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-3">
|
||||
<dt className="text-sm text-slate-600">Circulating Supply</dt>
|
||||
<dd className="text-sm font-semibold text-slate-900">
|
||||
{(currency.circulating_supply / 1_000_000).toFixed(1)}M {currency.symbol}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-3">
|
||||
<dt className="text-sm text-slate-600">Max Supply</dt>
|
||||
<dd className="text-sm font-semibold text-slate-900">
|
||||
{currency.max_supply
|
||||
? `${(currency.max_supply / 1_000_000).toFixed(1)}M ${currency.symbol}`
|
||||
: "N/A"}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-3">
|
||||
<dt className="text-sm text-slate-600">Percent change (24h)</dt>
|
||||
<dd className="text-sm font-semibold text-slate-900">
|
||||
{formatPercentage(currency.percent_change_24h)}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-3">
|
||||
<dt className="text-sm text-slate-600">Percent change (7d)</dt>
|
||||
<dd className="text-sm font-semibold text-slate-900">
|
||||
{formatPercentage(currency.percent_change_7d)}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
53
app/pages/crypto-details/PriceChart.tsx
Normal file
53
app/pages/crypto-details/PriceChart.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import clsx from "clsx";
|
||||
import { Area, AreaChart, XAxis, YAxis } from "recharts";
|
||||
import type { CryptocurrencyDetailsResponse } from "~/types/crypto-api";
|
||||
import { formatPercentage } from "~/utils/format";
|
||||
|
||||
export function PriceChart({
|
||||
currency,
|
||||
expanded,
|
||||
onToggleExpand
|
||||
}: {
|
||||
currency: CryptocurrencyDetailsResponse["currency"];
|
||||
expanded: boolean;
|
||||
onToggleExpand: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="lg:col-span-3 rounded-2xl border border-slate-200 bg-white shadow-sm">
|
||||
<div className="flex flex-col gap-3 border-b border-slate-200 p-5 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-slate-900">Price Chart</h2>
|
||||
<p className="mt-1 text-xs text-slate-500">Historical price movement of the cryptocurrency.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex-wrap gap-2 hidden md:flex">
|
||||
<button className="rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-100" type="button" onClick={onToggleExpand}>
|
||||
{expanded ? 'Collapse' : 'Expand'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5">
|
||||
<div className="rounded-2xl border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-4">
|
||||
<div className="mb-3 flex flex-wrap items-baseline justify-between gap-2">
|
||||
<div>
|
||||
<p className="text-xs text-slate-500">Price</p>
|
||||
<p className="text-lg font-semibold text-slate-900">${currency.price.toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-xs text-slate-500">Change 24h</p>
|
||||
<p className={clsx("text-sm font-semibold", currency.percent_change_24h > 0 ? "text-emerald-700" : "text-rose-700")}>{formatPercentage(currency.percent_change_24h)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AreaChart width="100%" height={300} key={`area-chart-${expanded}`} data={currency.history}>
|
||||
<XAxis dataKey="timestamp" tickFormatter={() => ''} />
|
||||
<YAxis dataKey="price" domain={['dataMin', 'dataMax']} tickFormatter={(val) => val.toLocaleString()} width={120} />
|
||||
|
||||
<Area dataKey="price" fillOpacity={0.3} />
|
||||
</AreaChart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user