feat: add CTA button to empty state list
This commit is contained in:
parent
959eef5e91
commit
a1fb7a750f
2 changed files with 13 additions and 1 deletions
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 && (
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue