Hide projects list behind CTA

apps/rowboat/app/projects/select/components/search-projects.tsx

@@ -1,9 +1,10 @@
-import { Project } from "@/types/project_types";
+import { Project } from "@/app/lib/types/project_types";
 import { z } from "zod";
 import { ProjectList } from "./project-list";
 import { SectionHeading } from "@/components/ui/section-heading";
 import { HorizontalDivider } from "@/components/ui/horizontal-divider";
 import clsx from 'clsx';
+import { XMarkIcon } from "@heroicons/react/24/outline";
 
 interface SearchProjectsProps {
     projects: z.infer<typeof Project>[];
@@ -11,6 +12,7 @@ interface SearchProjectsProps {
     heading: string;
     subheading: string;
     className?: string;
+    onClose?: () => void;
 }
 
 export function SearchProjects({ 
@@ -18,16 +20,27 @@ export function SearchProjects({
     isLoading,
     heading,
     subheading,
-    className
+    className,
+    onClose
 }: SearchProjectsProps) {
     return (
         <div className={clsx("card", className)}>
             <div className="px-4 pt-4 pb-6 flex-none">
-                <SectionHeading
-                    subheading={subheading}
-                >
-                    {heading}
-                </SectionHeading>
+                <div className="flex justify-between items-center">
+                    <SectionHeading
+                        subheading={subheading}
+                    >
+                        {heading}
+                    </SectionHeading>
+                    {onClose && (
+                        <button
+                            onClick={onClose}
+                            className="text-gray-500 hover:text-gray-700"
+                        >
+                            <XMarkIcon className="w-5 h-5" />
+                        </button>
+                    )}
+                </div>
             </div>
             <HorizontalDivider />
             <div className="flex-1 overflow-hidden">