Add basic debate details page (note: StandardCardDescription brightne…

…ss increased)

site/src/app/components/DebateSpeechCard.tsx

@@ -0,0 +1,22 @@
+import StandardCard from "@/app/components/StandardCard";
+import StandardCardTitle from "@/app/components/StandardCardTitle";
+import StandardCardDescription from "@/app/components/StandardCardDescription";
+import Markdown from "react-markdown";
+import React from "react";
+
+export default function DebateSummary({
+  debateSpeech,
+}: {
+  debateSpeech: { speaker_name: string | null; content: string };
+}) {
+  return (
+    <StandardCard>
+      {debateSpeech.speaker_name && (
+        <StandardCardTitle>{debateSpeech.speaker_name}</StandardCardTitle>
+      )}
+      <StandardCardDescription>
+        <Markdown>{debateSpeech.content}</Markdown>
+      </StandardCardDescription>
+    </StandardCard>
+  );
+}

site/src/app/components/DebateSummary.tsx

@@ -0,0 +1,31 @@
+import StandardCard from "@/app/components/StandardCard";
+import StandardCardTitle from "@/app/components/StandardCardTitle";
+import StandardCardDescription from "@/app/components/StandardCardDescription";
+import { Stack } from "@mantine/core";
+import Markdown from "react-markdown";
+import SummaryAiDisclaimer from "@/app/components/SummaryAiDisclaimer";
+import SummaryNotAvailableApology from "@/app/components/SummaryNotAvailableApology";
+import React from "react";
+
+export default function DebateSummary({
+  debate,
+}: {
+  debate: { summary: string | null };
+}) {
+  return (
+    <StandardCard>
+      <StandardCardTitle>Summary</StandardCardTitle>
+
+      <StandardCardDescription>
+        {debate.summary ? (
+          <Stack>
+            <Markdown>{debate.summary}</Markdown>
+            <SummaryAiDisclaimer />
+          </Stack>
+        ) : (
+          <SummaryNotAvailableApology />
+        )}
+      </StandardCardDescription>
+    </StandardCard>
+  );
+}

site/src/app/components/ShortDebate.tsx

@@ -7,6 +7,7 @@ import SummaryAiDisclaimer from "@/app/components/SummaryAiDisclaimer";
 import SummaryNotAvailableApology from "@/app/components/SummaryNotAvailableApology";
 import StandardButton from "@/app/components/StandardButton";
 import StandardCard from "@/app/components/StandardCard";
+import StandardCardSubtitle from "@/app/components/StandardCardSubtitle";
 
 export default function ShortDebate({
   debate,
@@ -28,11 +29,11 @@ export default function ShortDebate({
         <StandardCardTitle>{debate.title}</StandardCardTitle>
       </Group>
 
-      <StandardCardDescription>
+      <StandardCardSubtitle>
         {moment(debate.sitting!.sitting_date!.sitting_date).format(
           "D MMM YYYY",
         )}
-      </StandardCardDescription>
+      </StandardCardSubtitle>
 
       <StandardCardDescription>
         {debate.summary ? (

site/src/app/components/StandardCardDescription.tsx

@@ -7,7 +7,7 @@ export default function StandardCardDescription({
   children: React.ReactNode;
 }) {
   return (
-    <Text mt="xs" size="sm" c="dimmed" component="div">
+    <Text mt="xs" size="sm" component="div">
       {children}
     </Text>
   );

site/src/app/components/StandardCardSubtitle.tsx

@@ -0,0 +1,14 @@
+import { Text } from "@mantine/core";
+import React from "react";
+
+export default function StandardCardSubtitle({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <Text mt="xs" size="sm" c="dimmed" component="div">
+      {children}
+    </Text>
+  );
+}

site/src/app/components/SummaryNotAvailableApology.tsx

@@ -1,7 +1,9 @@
+import { Text } from "@mantine/core";
+
 export default function SummaryNotAvailableApology() {
   return (
-    <>
+    <Text c="dimmed">
       We&apos;re processing this bill&apos;s summary right now! Check back soon.
-    </>
+    </Text>
   );
 }

site/src/app/debates/[debateId]/page.tsx

@@ -0,0 +1,74 @@
+import { createClient } from "@/utils/supabase/client";
+import PageTitle from "@/app/components/PageTitle";
+import React from "react";
+import HumanFriendlyColumn from "@/app/components/HumanFriendlyColumn";
+import StandardStack from "@/app/components/StandardStack";
+import { Metadata } from "next";
+import moment from "moment";
+import DebateSummary from "@/app/components/DebateSummary";
+import DebateSpeechCard from "@/app/components/DebateSpeechCard";
+
+export const runtime = "edge";
+
+const subtitle = (debate: {
+  sitting: { sitting_date: { sitting_date: string } | null } | null;
+}) =>
+  `Debated in Parliament on ${moment(debate.sitting!.sitting_date!.sitting_date).format("D MMM YYYY")}.`;
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { debateId: string };
+}): Promise<Metadata> {
+  const debate = await getDebate(parseInt(params.debateId));
+
+  return {
+    title: debate.title,
+    description: subtitle(debate),
+  };
+}
+
+async function getDebate(debateId: number) {
+  const supabase = createClient();
+  const { error, data } = await supabase
+    .from("debate")
+    .select("id, title, summary, sitting ( sitting_date ( sitting_date ) )")
+    .eq("id", debateId)
+    .single();
+  if (error) throw error;
+  return data;
+}
+
+async function getDebateSpeeches(debateId: number) {
+  const supabase = createClient();
+  const { error, data } = await supabase
+    .from("debate_speech")
+    .select("speaker_name, content")
+    .eq("debate_id", debateId)
+    .order("order_no", { ascending: true });
+  if (error) throw error;
+  return data;
+}
+
+export default async function FullBill({
+  params,
+}: {
+  params: { debateId: string };
+}) {
+  const debate = await getDebate(parseInt(params.debateId));
+  const debateSpeeches = await getDebateSpeeches(parseInt(params.debateId));
+
+  return (
+    <HumanFriendlyColumn>
+      <StandardStack>
+        <PageTitle title={debate.title} subtitle={subtitle(debate)} />
+
+        <DebateSummary debate={debate} />
+
+        {debateSpeeches.map((debateSpeech, index) => (
+          <DebateSpeechCard key={index} debateSpeech={debateSpeech} />
+        ))}
+      </StandardStack>
+    </HumanFriendlyColumn>
+  );
+}