Skip to main content
Collection components enable users to organize and manage saved Bible verses into collections.

​
CollectionVerseCard

Displays a single verse within a collection with options to view or remove it.

​
Props

​
_id
Id<'collectionVerses'>
required
The unique identifier for this collection verse entry
​
_creationTime
number
required
Unix timestamp of when this verse was added to the collection
​
verseId
string
required
The Bible verse reference (e.g., “GEN.1.1”)
​
bibleId
string
required
The Bible translation ID
​
chapterId
string
required
The chapter ID where this verse is located
​
verseText
string
required
The actual text content of the verse
​
collectionId
Id<'collections'>
required
The ID of the collection this verse belongs to
​
userId
string
required
The ID of the user who owns this collection

​
Usage Example

import CollectionVerseCard from '@/components/collections/collection-verse-card'

<CollectionVerseCard
  _id={verseCollectionId}
  _creationTime={1234567890}
  verseId="GEN.1.1"
  bibleId="KJV"
  chapterId="GEN.1"
  verseText="In the beginning God created the heaven and the earth."
  collectionId={collectionId}
  userId="user_123"
/>

​
Features

  • Hover effect with accent background
  • Click to navigate to verse in Bible
  • Delete button appears on hover
  • Displays verse text and reference
  • Responsive design with proper spacing
The card includes a link to view the verse in context within the Bible reader, preserving the Bible translation, chapter, and verse parameters.

​
AddToCollectionDialog

A dialog component for adding a verse to one or more collections.

​
Props

​
verseText
string
required
The text content of the verse to be added
​
verseId
string
required
The Bible verse reference
​
chapterId
string
required
The chapter ID containing the verse
​
bibleId
string
required
The Bible translation ID
​
trigger
React.ReactNode
required
The element that opens the dialog when clicked

​
Usage Example

import AddToCollectionDialog from '@/components/bible/add-to-collection-dialog'
import { Button } from '@/components/ui/button'

<AddToCollectionDialog
  verseText="For God so loved the world..."
  verseId="JHN.3.16"
  chapterId="JHN.3"
  bibleId="KJV"
  trigger={<Button>Add to Collection</Button>}
/>

​
Features

  • Displays all available collections for the user
  • Loading states during fetch and save operations
  • Scrollable list for many collections
  • Individual loading indicators per collection
  • Empty state when no collections exist
  • Automatic dialog close after selection
Users must create at least one collection before they can add verses. The dialog will display a helpful message if no collections are found.

​
Additional Collection Components

The collections directory also includes utility components:

​
DeleteVerseCollectionBtn

Button for removing a verse from a collection.

​
DeleteCollectionsBtn

Button for deleting an entire collection.

​
CollectionsBtn

Navigational button or link to view all collections.