From 10aac7b4ed4f2878b16a9cdefcac7cd01f7b5959 Mon Sep 17 00:00:00 2001
From: Clumsy-Coder <19594044+Clumsy-Coder@users.noreply.github.com>
Date: Thu, 4 Jan 2024 21:23:48 -0700
Subject: [PATCH] chore(page:problemNum): add structure and placeholder
 components

  ## what
  - add structure and placeholder components

  ## how
  - divide into to big sections
    - charts
      - uses grid for display
      - 2 columns on md to larger screens
      - 1 column on smaller screens
    - table
      - uses flex for display
      - will be in flex column direction

  ## why
  - this will show how the components are laid out

  ## where
  - ./src/app/problems/[problemNum]/page.tsx

  ## usage
---
 src/app/problems/[problemNum]/page.tsx | 48 ++++++++++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/app/problems/[problemNum]/page.tsx b/src/app/problems/[problemNum]/page.tsx
index c3cabc7..7f12763 100644
--- a/src/app/problems/[problemNum]/page.tsx
+++ b/src/app/problems/[problemNum]/page.tsx
@@ -1,10 +1,37 @@
 "use client";
 
-import { useFetchProblemNum } from "@/hooks";
-import { problemNumSchema } from "@/schema";
 import { AxiosError } from "axios";
 import { z } from "zod";
+
 import Error from "@/components/error";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { useFetchProblemNum } from "@/hooks";
+import { problemNumSchema } from "@/schema";
+
+
+type ChartCard = {
+  title: string;
+  chart: React.ReactNode;
+}
+const ChartCard = ({title, chart}: ChartCard) => {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {chart}
+      </CardContent>
+    </Card>
+  );
+}
 
 type problemPageProps = {
   params: z.infer<typeof problemNumSchema>;
@@ -57,7 +84,22 @@ const ProblemPage = ({ params }: problemPageProps) => {
   console.log("problem page: ", params.problemNum);
   return (
     <section>
-      <h1 className="text-3xl">Problem page: {params.problemNum}</h1>
+      <h1 className="text-3xl mb-4">Problem page: {params.problemNum}</h1>
+      <div className="grid lg:grid-cols-2 gap-4 mb-4">
+        <div className="w-full">
+          <ChartCard title="Problem Verdicts" />
+        </div>
+        <div className="w-full">
+          <ChartCard title="Submissions overtime" />
+        </div>
+        <div className="w-full">
+          <ChartCard title="Submission by language" />
+        </div>
+      </div>
+      <div className="flex flex-col gap-4">
+        <div>ranklist</div>
+        <div>submissions</div>
+      </div>
     </section>
   );
 };