intialize list research context

lib/components/index.ts

@@ -4,4 +4,5 @@ export * from "./site-header";
 export * from "./mode-toggle";
 export * from "./card";
 export * from "./table";
+export * from "./research-context";
 export * from "./spinner";

lib/components/research-context/index.ts

@@ -0,0 +1,6 @@
+export {
+  ResearchContextCard,
+  type ResearchContextCardProps,
+} from "./research-context-card";
+
+export { ListResearchContextLayout } from "./list-research-context-layout";

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

@@ -0,0 +1,5 @@
+export const ListResearchContextLayout = (props: {
+  children: React.ReactNode;
+}) => {
+  return <div className="w-full h-full flex">{props.children}</div>;
+};

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

@@ -0,0 +1,28 @@
+export interface ResearchContextCardProps {
+  title: string;
+  description: string;
+  id: number;
+  callbacks: {
+    onNavigateToSourcesPage: (id: number) => void;
+    onNavigateToListConversationPage: (id: number) => void;
+  };
+}
+
+export const ResearchContextCard = (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)
+        }
+      >
+        Conversuations
+      </button>
+    </div>
+  );
+};