chore: display quote pending list

Author: mjkeaton

src/components/H2.tsx renamed to src/components/Headings.tsx

@@ -7,3 +7,11 @@ export function H2({ children }: PropsWithChildren<unknown>) {
     </h2>
   )
 }
+
+export function H3({ children }: PropsWithChildren<unknown>) {
+  return (
+    <h3 className="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl">
+      {children}
+    </h3>
+  )
+}

src/components/PageTitle.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from "react";
-import { H2 } from "./H2";
+import { H2 } from "./Headings";
 
 export function PageTitle({ children }: PropsWithChildren<unknown>) {
   return (

src/pages/quotes/QuotesPage.tsx

@@ -1,8 +1,11 @@
 import { Breadcrumbs } from "@/components/Breadcrumbs";
+import { H3 } from "@/components/Headings";
 import { PageTitle } from "@/components/PageTitle";
+import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { fetchAdminQuotePending } from "@/lib/api";
 import { useSuspenseQuery } from "@tanstack/react-query";
+import { ViewIcon } from "lucide-react";
 import { Suspense } from "react";
 
 
@@ -14,7 +17,7 @@ function Loader() {
   )
 }
 
-function PageBody() {
+function QuoteListPendingRaw() {
   const { data } = useSuspenseQuery({
     queryKey: ["quotes-pending"],
     queryFn: fetchAdminQuotePending,
@@ -29,14 +32,46 @@ function PageBody() {
   )
 }
 
+function QuoteListPending() {
+  const { data } = useSuspenseQuery({
+    queryKey: ["quotes-pending"],
+    queryFn: fetchAdminQuotePending,
+  });
+
+  return (
+    <>
+      <div className="flex flex-col gap-1">
+        {data.quotes.map((it, index) => {
+          return (<div key={index} className="flex gap-1 items-center text-sm">
+            <span>{it}</span>
+            <Button size="sm">
+              <ViewIcon />
+            </Button>
+          </div>)
+        })}
+      </div>
+    </>
+  )
+}
+
+function PageBody() {
+  return (
+    <>
+      <H3>Pending</H3>
+      <Suspense fallback={<Loader />}>
+        <QuoteListPending />
+        <QuoteListPendingRaw />
+      </Suspense>
+    </>
+  )
+}
+
 export default function QuotesPage() {
   return (
     <>
       <Breadcrumbs>Quotes</Breadcrumbs>
       <PageTitle>Quotes</PageTitle>
-      <Suspense fallback={<Loader />}>
-        <PageBody />
-      </Suspense>
+      <PageBody />
     </>
   )
 }