mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-05-19 18:35:18 +02:00
Hide projects list behind CTA
This commit is contained in:
parent
fab66841d8
commit
0d775003bf
2 changed files with 38 additions and 10 deletions
|
|
@ -15,6 +15,8 @@ import { CustomPromptCard } from "./components/custom-prompt-card";
|
|||
import { Submit } from "./components/submit-button";
|
||||
import { PageHeading } from "@/components/ui/page-heading";
|
||||
import { USE_MULTIPLE_PROJECTS } from "@/app/lib/feature_flags";
|
||||
import { FolderOpenIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
const sectionHeaderStyles = clsx(
|
||||
"text-sm font-medium",
|
||||
|
|
@ -39,6 +41,7 @@ const textareaStyles = clsx(
|
|||
export default function App() {
|
||||
const [projects, setProjects] = useState<z.infer<typeof Project>[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isProjectPaneOpen, setIsProjectPaneOpen] = useState(false);
|
||||
|
||||
const [selectedCard, setSelectedCard] = useState<'custom' | any>('custom');
|
||||
const [customPrompt, setCustomPrompt] = useState("");
|
||||
|
|
@ -198,7 +201,7 @@ export default function App() {
|
|||
: "mt-8 -mx-12"
|
||||
)}>
|
||||
{/* Left side: Project Selection */}
|
||||
{USE_MULTIPLE_PROJECTS && (
|
||||
{USE_MULTIPLE_PROJECTS && isProjectPaneOpen && (
|
||||
<div className="overflow-auto">
|
||||
<SearchProjects
|
||||
projects={projects}
|
||||
|
|
@ -206,6 +209,7 @@ export default function App() {
|
|||
heading="Select an existing project"
|
||||
subheading="Choose from your projects"
|
||||
className="h-full"
|
||||
onClose={() => setIsProjectPaneOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -213,7 +217,8 @@ export default function App() {
|
|||
{/* Right side: Project Creation */}
|
||||
<div className={clsx(
|
||||
"overflow-auto",
|
||||
!USE_MULTIPLE_PROJECTS && "max-w-none px-12 py-12"
|
||||
!USE_MULTIPLE_PROJECTS && "max-w-none px-12 py-12",
|
||||
USE_MULTIPLE_PROJECTS && !isProjectPaneOpen && "col-span-full"
|
||||
)}>
|
||||
<section className={clsx(
|
||||
"card h-full",
|
||||
|
|
@ -221,10 +226,20 @@ export default function App() {
|
|||
USE_MULTIPLE_PROJECTS && "px-8"
|
||||
)}>
|
||||
{USE_MULTIPLE_PROJECTS && (
|
||||
<div className="pt-12">
|
||||
<div className="pt-12 flex justify-between items-center">
|
||||
<SectionHeading subheading="Set up a new AI assistant">
|
||||
Create a new project
|
||||
</SectionHeading>
|
||||
{!isProjectPaneOpen && (
|
||||
<Button
|
||||
onClick={() => setIsProjectPaneOpen(true)}
|
||||
variant="primary"
|
||||
size="md"
|
||||
startContent={<FolderOpenIcon className="w-4 h-4" />}
|
||||
>
|
||||
View Projects
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue