Research context card and list research context

lib/components/research-context/list-research-context-layout.tsx

@@ -1,5 +1,42 @@
+"use client";
+import React from "react";
+import {
+  ResearchContextCard,
+  ResearchContextCardProps,
+} from "./research-context-card";
+
+export interface ListResearchContextCardProps {
+  items: ResearchContextCardProps[];
+}
+
 export const ListResearchContextLayout = (props: {
   children: React.ReactNode;
 }) => {
-  return <div className="w-full h-full flex">{props.children}</div>;
+  return (
+    <div
+      className="
+        grid
+        gap-6
+        grid-cols-1       
+        sm:grid-cols-2    
+        lg:grid-cols-3    
+        w-full
+        p-4
+      "
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export const ListResearchContextCard = ({
+  items,
+}: ListResearchContextCardProps) => {
+  return (
+    <ListResearchContextLayout>
+      {items.map((item) => (
+        <ResearchContextCard key={item.id} {...item} />
+      ))}
+    </ListResearchContextLayout>
+  );
 };

lib/components/research-context/research-context-card.tsx

@@ -1,3 +1,14 @@
+"use client";
+import {
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Card as ShadcnCard,
+} from "@/ui/card";
+
+import { Button } from "@/components/button/index";
+import { cn } from "@/utils/utils";
+
 export interface ResearchContextCardProps {
   title: string;
   description: string;
@@ -8,21 +19,54 @@ export interface ResearchContextCardProps {
   };
 }
 
-export const ResearchContextCard = (props: ResearchContextCardProps) => {
+export const ResearchContextCard = ({
+  title,
+  description,
+  id,
+  callbacks,
+  ...props
+}: ResearchContextCardProps) => {
   return (
-    <div className="flex flex-col items-center justify-between">
-      <h1>{props.title}</h1>
-      <p>{props.description}</p>
-      <button onClick={() => props.callbacks.onNavigateToSourcesPage(props.id)}>
-        Sources
-      </button>
-      <button
-        onClick={() =>
-          props.callbacks.onNavigateToListConversationPage(props.id)
-        }
+    <ShadcnCard {...props}>
+      <CardContent
+        className={cn(
+          "flex flex-col items-center justify-between gap-medium",
+          "sm:max-w-md",
+          "w-full",
+          "p-6",
+          "px-7",
+          "bg-neutral-100 dark:bg-neutral-800",
+          "text-black dark:text-white",
+          "border",
+          "rounded-lg",
+        )}
       >
-        Conversuations
-      </button>
-    </div>
+        <CardHeader>
+          <CardTitle className="text-2xl font-semibold text-center">
+            {title}
+          </CardTitle>
+        </CardHeader>
+        <p className="text-center text-gray-600 dark:text-gray-300 mb-4">
+          {description}
+        </p>
+
+        <div className="flex flex-row items-center justify-between gap-4">
+          <Button
+            className="w-full"
+            variant="default"
+            size="default"
+            label="Sources"
+            onClick={() => callbacks.onNavigateToSourcesPage(id)}
+          />
+          <Button
+            className="w-full"
+            variant="default"
+            size="default"
+            label="Conversations"
+            onClick={() => callbacks.onNavigateToListConversationPage(id)}
+          />
+        </div>
+      </CardContent>
+    </ShadcnCard>
   );
 };

stories/components/research-context/ResearchContext.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ResearchContextCard } from "@/components/research-context/research-context-card";
+import { ListResearchContextCard } from "@/components/research-context/list-research-context-layout";
+
+const handleNavigateToSourcesPage = (id: number) => {
+  alert(`Navigate to sources for item ${id}`);
+};
+
+const handleNavigateToListConversationPage = (id: number) => {
+  alert(`Navigate to conversations for item ${id}`);
+};
+
+// Single card
+const singleCardProps = {
+  id: 1,
+  title: "Research Context 1",
+  description: "This is a sample description for research context 1.",
+  callbacks: {
+    onNavigateToSourcesPage: handleNavigateToSourcesPage,
+    onNavigateToListConversationPage: handleNavigateToListConversationPage,
+  },
+};
+
+// List of cards
+const listOfCardsProps = [
+  {
+    id: 1,
+    title: "Research Context 1",
+    description: "This is a sample description for research context 1.",
+    callbacks: {
+      onNavigateToSourcesPage: handleNavigateToSourcesPage,
+      onNavigateToListConversationPage: handleNavigateToListConversationPage,
+    },
+  },
+  {
+    id: 2,
+    title: "Research Context 2",
+    description: "This is a sample description for research context 2.",
+    callbacks: {
+      onNavigateToSourcesPage: handleNavigateToSourcesPage,
+      onNavigateToListConversationPage: handleNavigateToListConversationPage,
+    },
+  },
+  {
+    id: 3,
+    title: "Research Context 3",
+    description: "This is a sample description for research context 3.",
+    callbacks: {
+      onNavigateToSourcesPage: handleNavigateToSourcesPage,
+      onNavigateToListConversationPage: handleNavigateToListConversationPage,
+    },
+  },
+  {
+    id: 4,
+    title: "Research Context 4",
+    description: "This is a sample description for research context 3.",
+    callbacks: {
+      onNavigateToSourcesPage: handleNavigateToSourcesPage,
+      onNavigateToListConversationPage: handleNavigateToListConversationPage,
+    },
+  },
+  {
+    id: 5,
+    title: "Research Context 5",
+    description: "This is a sample description for research context 3.",
+    callbacks: {
+      onNavigateToSourcesPage: handleNavigateToSourcesPage,
+      onNavigateToListConversationPage: handleNavigateToListConversationPage,
+    },
+  },
+  {
+    id: 6,
+    title: "Research Context 6",
+    description: "This is a sample description for research context 3.",
+    callbacks: {
+      onNavigateToSourcesPage: handleNavigateToSourcesPage,
+      onNavigateToListConversationPage: handleNavigateToListConversationPage,
+    },
+  },
+];
+
+const meta = {
+  title: "Components/ResearchContextCard",
+  component: ResearchContextCard,
+  tags: ["autodocs"],
+} satisfies Meta<typeof ResearchContextCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SingleCard: Story = {
+  args: singleCardProps,
+};
+
+export const ListOfCards = {
+  render: () => <ListResearchContextCard items={listOfCardsProps} />,
+};