diff --git a/lib/components/research-context/list-research-context-layout.tsx b/lib/components/research-context/list-research-context-layout.tsx
index 47ef8b6..4b4b4c4 100644
--- a/lib/components/research-context/list-research-context-layout.tsx
+++ b/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
{props.children}
;
+ return (
+
+ {props.children}
+
+ );
+};
+
+export const ListResearchContextCard = ({
+ items,
+}: ListResearchContextCardProps) => {
+ return (
+
+ {items.map((item) => (
+
+ ))}
+
+ );
};
diff --git a/lib/components/research-context/research-context-card.tsx b/lib/components/research-context/research-context-card.tsx
index ef6d819..aad117b 100644
--- a/lib/components/research-context/research-context-card.tsx
+++ b/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 (
-
-
{props.title}
-
{props.description}
-
-
-
+
+
+ {title}
+
+
+
+ {description}
+
+
+
+
+
+
);
};
diff --git a/stories/components/research-context/ResearchContext.stories.tsx b/stories/components/research-context/ResearchContext.stories.tsx
new file mode 100644
index 0000000..a563e5f
--- /dev/null
+++ b/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;
+
+export default meta;
+type Story = StoryObj;
+
+export const SingleCard: Story = {
+ args: singleCardProps,
+};
+
+export const ListOfCards = {
+ render: () => ,
+};