setup pilot page

app/(stats)/pilot/content.tsx

@@ -0,0 +1,49 @@
+import { Suspense } from 'react';
+
+import { getFactionCount, getSquads } from '@/lib/db/squads';
+import { getTournamentsCount } from '@/lib/db/tournaments';
+import { pilot, type PilotData } from '@/lib/stats/module';
+import { setup } from '@/lib/stats/setup';
+
+import { CardTableSkeleton } from '@/ui';
+import { StatsHint } from '@/ui/stats/stats-hint';
+
+// Helpers
+// ---------------
+const create = setup<PilotData>([pilot]);
+
+// Props
+// ---------------
+export interface ContentProps {
+  from: Date;
+  to?: Date;
+}
+
+// Content
+// ---------------
+const AsyncContent = async ({ from, to }: ContentProps) => {
+  const [squads, tournaments, count] = await Promise.all([
+    getSquads({ from, to }),
+    getTournamentsCount({ from, to }),
+    getFactionCount({ from, to }),
+  ]);
+  const stats = create(squads, {
+    count,
+    tournaments,
+  });
+
+  return <div />;
+};
+
+export const Content = (props: ContentProps) => (
+  <Suspense fallback={<CardTableSkeleton />}>
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
+      <div className="col-span-full">
+        <AsyncContent {...props} />
+      </div>
+      <div className="col-span-full pt-8 lg:col-start-2 lg:col-end-12">
+        <StatsHint />
+      </div>
+    </div>
+  </Suspense>
+);

app/(stats)/pilot/loading.tsx

@@ -0,0 +1,19 @@
+import { Skeleton, HeadlineSkeleton, CardTableSkeleton } from '@/ui';
+
+export const Loading = () => (
+  <Skeleton>
+    <HeadlineSkeleton className="mt-8 h-14 w-72" />
+    <div className="flex items-center gap-4">
+      <HeadlineSkeleton className="mt-2 h-4 w-44" />{' '}
+      <HeadlineSkeleton className="mt-2 h-4 w-24" />{' '}
+      <HeadlineSkeleton className="mt-2 h-4 w-36" />
+    </div>
+    <div className="mb-4 mt-8 flex justify-end gap-4">
+      <HeadlineSkeleton className="h-8 w-12" />
+      <HeadlineSkeleton className="h-8 w-44" />
+    </div>
+    <CardTableSkeleton />
+  </Skeleton>
+);
+
+export default Loading;

app/(stats)/pilot/page.tsx

@@ -0,0 +1,66 @@
+import { createMetadata } from '@/lib/metadata';
+import { toDateRange } from '@/lib/utils/params.utils';
+
+import { Caption, Message, Title } from '@/ui';
+import { DateRangeFilter } from '@/ui/params/date-range-filter';
+import { FactionFilter } from '@/ui/params/faction-filter';
+import { Filter } from '@/ui/params/filter';
+import { SmallSamplesFilter } from '@/ui/params/small-samples-filter';
+import { SortParam } from '@/ui/params/sort-param';
+import { StatsInfo } from '@/ui/stats/stats-info';
+
+// Metadata
+// ---------------
+export const metadata = createMetadata({
+  title: 'Pilots',
+  description: 'Take a look at what is currently flown in X-Wing!',
+  ogTitle: 'Pilots',
+  ogWidth: 65,
+});
+
+// Props
+// ---------------
+interface PageProps {
+  searchParams: {
+    from: string;
+    to: string;
+  };
+}
+
+// Page
+// ---------------
+const PilotsPage = async ({ searchParams }: PageProps) => {
+  const params = toDateRange(searchParams);
+
+  if (params.error) {
+    return (
+      <div className="grid flex-1 place-items-center">
+        <Message variant="error">
+          <Message.Title>Whoopsie, something went wrong!</Message.Title>
+          Looks like there is an error in the given query parameters.
+        </Message>
+      </div>
+    );
+  }
+
+  const { from, to } = params;
+
+  return (
+    <>
+      <div className="pb-6">
+        <Title>Pilots</Title>
+        <Caption>
+          <StatsInfo from={from} to={to} />
+        </Caption>
+      </div>
+      <Filter>
+        <SmallSamplesFilter />
+        <DateRangeFilter />
+        <FactionFilter />
+        <SortParam />
+      </Filter>
+    </>
+  );
+};
+
+export default PilotsPage;

lib/config.ts

@@ -25,6 +25,10 @@ export const siteNavigation = [
     name: 'Compositions',
     href: '/composition',
   },
+  {
+    name: 'Pilots',
+    href: '/pilot',
+  },
 ];
 
 export const secondaryNavigation = [