Initial commit

app/pages/crypto-details/CryptoDetailsPage.tsx

@@ -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>
+  );
+}