feat: add CTA button to empty state list

This commit is contained in:
Fauzira Alpiandi 2026-01-10 04:08:42 +00:00
parent 959eef5e91
commit a1fb7a750f
2 changed files with 13 additions and 1 deletions

View file

@ -4,7 +4,7 @@ import { NotebookResponse } from '@/lib/types/api'
import { NotebookCard } from './NotebookCard' import { NotebookCard } from './NotebookCard'
import { LoadingSpinner } from '@/components/common/LoadingSpinner' import { LoadingSpinner } from '@/components/common/LoadingSpinner'
import { EmptyState } from '@/components/common/EmptyState' import { EmptyState } from '@/components/common/EmptyState'
import { Book, ChevronDown, ChevronRight } from 'lucide-react' import { Book, ChevronDown, ChevronRight, Plus } from 'lucide-react'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { useState } from 'react' import { useState } from 'react'
@ -15,6 +15,8 @@ interface NotebookListProps {
collapsible?: boolean collapsible?: boolean
emptyTitle?: string emptyTitle?: string
emptyDescription?: string emptyDescription?: string
onAction?: () => void
actionLabel?: string
} }
export function NotebookList({ export function NotebookList({
@ -24,6 +26,8 @@ export function NotebookList({
collapsible = false, collapsible = false,
emptyTitle, emptyTitle,
emptyDescription, emptyDescription,
onAction,
actionLabel,
}: NotebookListProps) { }: NotebookListProps) {
const [isExpanded, setIsExpanded] = useState(!collapsible) const [isExpanded, setIsExpanded] = useState(!collapsible)
@ -41,6 +45,12 @@ export function NotebookList({
icon={Book} icon={Book}
title={emptyTitle ?? `No ${title.toLowerCase()}`} title={emptyTitle ?? `No ${title.toLowerCase()}`}
description={emptyDescription ?? 'Start by creating your first notebook to organize your research.'} description={emptyDescription ?? 'Start by creating your first notebook to organize your research.'}
action={onAction && actionLabel ? (
<Button onClick={onAction} variant="outline" className="mt-4">
<Plus className="h-4 w-4 mr-2" />
{actionLabel}
</Button>
) : undefined}
/> />
) )
} }

View file

@ -77,6 +77,8 @@ export default function NotebooksPage() {
title="Active Notebooks" title="Active Notebooks"
emptyTitle={isSearching ? 'No notebooks match your search' : undefined} emptyTitle={isSearching ? 'No notebooks match your search' : undefined}
emptyDescription={isSearching ? 'Try using a different notebook name.' : undefined} emptyDescription={isSearching ? 'Try using a different notebook name.' : undefined}
onAction={!isSearching ? () => setCreateDialogOpen(true) : undefined}
actionLabel={!isSearching ? "Create Notebook" : undefined}
/> />
{hasArchived && ( {hasArchived && (