# Tercul Component Structure

## Overview

The component structure has been reorganized to improve maintainability, scalability, and code reuse. Components are organized by their domain and functionality.

## Directory Structure

### UI Components (`/components/ui`)

Basic, reusable UI components with minimal business logic. These serve as building blocks for more complex components.

- **Typography Components** (`/components/ui/typography`)
  - heading.tsx - For h1-h6 headings with consistent styling
  - paragraph.tsx - For text content with various styles
  - quote.tsx - For blockquotes and citations
  - code-block.tsx - For code snippets

- **Data Display Components**
  - stat-card.tsx - For displaying statistics
  - timeline.tsx - For chronological events visualization
  - tree-view.tsx - For hierarchical data
  - tag-cloud.tsx - For tag visualization
  - file-viewer.tsx - For previewing documents
  - code-highlighter.tsx - For syntax highlighting

- **Feedback Components**
  - empty-state.tsx - For when no data is available
  - error-state.tsx - For error handling
  - loading-spinner.tsx - For loading indicators
  - status-indicator.tsx - For success/failure states
  - confirmation-dialog.tsx - For user confirmations

- **Navigation Components**
  - stepper.tsx - For multi-step processes
  - vertical-navigation.tsx - For side navigation
  - breadcrumbs.tsx - For navigation trails

- **Form Components**
  - rich-text-editor.tsx - For content creation
  - tag-input.tsx - For adding/managing tags
  - date-range-picker.tsx - For date selection
  - file-uploader.tsx - For file uploads
  - multi-select.tsx - For multiple selections
  - autocomplete.tsx - For search suggestions
  - form-wizard.tsx - For multi-step forms

- **Layout Components**
  - grid.tsx - For grid layouts
  - masonry.tsx - For pinterest-style layouts
  - split-pane.tsx - For resizable panels
  - spotlight.tsx - For featured content
  - responsive-container.tsx - For responsive design

- **Specialized Components**
  - color-picker.tsx - For color selection
  - rating.tsx - For rating inputs
  - comparison-slider.tsx - For before/after comparisons
  - share-buttons.tsx - For social sharing
  - expandable-search.tsx - For search interfaces
  - notification-badge.tsx - For alerts/notifications

### Domain-Specific Components

#### Blog Components (`/components/blog`)

Components specific to the blog functionality.

- blog-editor.tsx - For creating/editing blog posts
- blog-preview.tsx - For displaying blog post cards
- tag-manager.tsx - For managing post tags
- publication-scheduler.tsx - For scheduling posts
- featured-post.tsx - For highlighting posts

#### Dashboard Components (`/components/dashboard`)

Components for the editorial dashboard.

- stats-card.tsx - For dashboard statistics
- activity-feed.tsx - For recent activities
- content-queue.tsx - For approval workflows
- stats-chart.tsx - For data visualization
- dashboard-header.tsx - For dashboard navigation
- role-badge.tsx - For user role indication

#### Work Components (`/components/work`)

Components for literary works management and display.

- work-editor.tsx - For creating/editing works
- work-header.tsx - For work metadata display
- work-status.tsx - For publication status
- related-works.tsx - For similar works
- comparison-view.tsx - For comparing translations
- EnhancedReadingView.tsx - Enhanced reading experience
- LineNumberedText.tsx - Text with line numbers
- EnhancedLineNumberedText.tsx - Advanced text display
- TranslationSelector.tsx - For selecting translations
- ReadingControls.tsx - Reading interface controls
- ReadingView.tsx - Main reading component
- WorkCard.tsx - Work preview card

#### Author Components (`/components/authors`)

Components for author profiles and management.

- author-editor.tsx - For creating/editing authors
- author-card.tsx - Author preview card
- author-header.tsx - Author profile header
- author-stats.tsx - Author statistics
- related-authors.tsx - Similar authors
- AuthorTimeline.tsx - Author timeline component
- AuthorChip.tsx - Small author reference

#### Comment Components (`/components/comment`)

Components for the comment system.

- comment-thread.tsx - Threaded comments
- comment-editor.tsx - For writing comments
- moderation-tools.tsx - For moderating comments
- comment-filters.tsx - For filtering comments

#### Annotation Components (`/components/annotation`)

Components for the annotation system.

- AnnotationSystem.tsx - Main annotation component
- annotation-editor.tsx - For creating annotations
- annotation-browser.tsx - For browsing annotations
- inline-form.tsx - For inline annotation creation
- annotation-filters.tsx - For filtering annotations

#### User Components (`/components/user`)

Components for user profiles and management.

- profile-card.tsx - User profile display
- user-avatar.tsx - User avatar with status
- reading-progress.tsx - Reading progress tracker
- bookmarks-manager.tsx - Bookmarks interface
- preferences-form.tsx - User settings

#### Search Components (`/components/search`)

Components for search functionality.

- SearchBar.tsx - Main search input
- advanced-search.tsx - Advanced search interface
- search-filters.tsx - Search filter controls
- results-toggle.tsx - Grid/list view toggle
- pagination.tsx - Result pagination
- sort-controls.tsx - Result sorting
- FilterSidebar.tsx - Sidebar with filters

#### Pattern Components (`/components/patterns`)

Reusable component patterns and combinations.

- empty-states.tsx - Empty state patterns
- modal-forms.tsx - Modal dialog forms
- action-toolbar.tsx - Action button groups
- filter-controls.tsx - Standardized filters
- card-grid.tsx - Grid of cards

### Layout Components (`/components/layout`)

Components for page layout.

- PageLayout.tsx - Standard page wrapper
- DashboardLayout.tsx - Dashboard layout
- Footer.tsx - Site footer
- NavHeader.tsx - Navigation header

## Implementation Status

Most components are currently empty placeholder files. The implementation priority should follow the order outlined in the COMPONENT-IMPLEMENTATION-PLAN.md document.

## Key Benefits of This Structure

1. **Separation of Concerns**: UI components are separate from domain-specific components
2. **Reusability**: Common patterns are extracted into reusable components
3. **Discoverability**: Developers can easily find components by their domain
4. **Maintainability**: Related components are grouped together
5. **Scalability**: New domains can be added without affecting existing structure