chore: partially implemented ProjectReviewList component

src/features/checker/components/ProjectReviewList/ProjectReviewList.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ProjectReviewList } from "./ProjectReviewList";
+import { mockProjectReviews } from "./mocks";
+
+const meta = {
+  title: "Features/Checker/ProjectReviewList",
+  component: ProjectReviewList,
+  args: {
+    reviewer: "0x1234567890123456789012345678901234567890",
+    projects: mockProjectReviews,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof ProjectReviewList>;
+
+export const Default: Story = {};

src/features/checker/components/ProjectReviewList/ProjectReviewList.tsx

@@ -0,0 +1,55 @@
+import { ListGrid, ListGridColumn } from "@/primitives/ListGrid/ListGrid";
+
+import { ProjectReview } from "./types";
+
+export interface ProjectReviewListProps {
+  reviewer: `0x${string}`;
+  projects: ProjectReview[];
+}
+
+export const ProjectReviewList = ({ reviewer, projects }: ProjectReviewListProps) => {
+  const columns: ListGridColumn<ProjectReview>[] = [
+    {
+      header: "Project",
+      key: "project",
+      render: (item) => <span>{item.name}</span>, // TODO: Add project avatar
+    },
+    {
+      header: "Date Submitted",
+      key: "date",
+      render: (item) => <span>{item.date.toLocaleDateString()}</span>,
+    },
+    {
+      header: "Reviews",
+      key: "reviews",
+      render: (item) => <span>{item.reviews.length}</span>,
+    },
+    {
+      header: "AI Suggestion",
+      key: "aiSuggestion",
+      render: (item) => <span>{item.aiSuggestion}</span>,
+    },
+    {
+      header: "Score Average",
+      key: "scoreAverage",
+      render: (item) => <span>{item.scoreAverage}</span>,
+    },
+    {
+      header: "Action",
+      key: "action",
+      render: (item) =>
+        item.reviews.find((review) => review.reviewer === reviewer) ? (
+          <span>IsReviewed</span>
+        ) : (
+          <span>Review</span>
+        ),
+    },
+  ];
+  return (
+    <ListGrid
+      data={projects}
+      columns={columns}
+      getRowKey={(item: ProjectReview) => item.id.toString()}
+    />
+  );
+};

src/features/checker/components/ProjectReviewList/mocks.tsx

@@ -0,0 +1,31 @@
+import { ProjectReview } from "./types";
+
+export const mockProjectReviews: ProjectReview[] = [
+  {
+    id: 1,
+    name: "Project 1",
+    date: new Date(),
+    avatarUrl: "",
+    reviews: [],
+    aiSuggestion: 0,
+    scoreAverage: 0,
+  },
+  {
+    id: 2,
+    name: "Project 2",
+    date: new Date(),
+    avatarUrl: "",
+    reviews: [],
+    aiSuggestion: 0,
+    scoreAverage: 0,
+  },
+  {
+    id: 3,
+    name: "Project 3",
+    date: new Date(),
+    avatarUrl: "",
+    reviews: [],
+    aiSuggestion: 0,
+    scoreAverage: 0,
+  },
+];

src/features/checker/components/ProjectReviewList/types.ts

@@ -0,0 +1,14 @@
+interface Review {
+  reviewer: `0x${string}`;
+  approved: boolean;
+}
+
+export interface ProjectReview {
+  id: number;
+  name: string;
+  date: Date;
+  avatarUrl: string;
+  reviews: Review[];
+  aiSuggestion: number;
+  scoreAverage: number;
+}