feat: create sync status indicator component

Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

__tests__/components/sync-status-indicator.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react'
+import { SyncStatusIndicator } from '@/components/bible/sync-status-indicator'
+
+describe('SyncStatusIndicator', () => {
+  it('should show synced state', () => {
+    render(<SyncStatusIndicator status="synced" />)
+    expect(screen.getByTestId('sync-status-synced')).toBeInTheDocument()
+  })
+
+  it('should show syncing state with spinner', () => {
+    render(<SyncStatusIndicator status="syncing" />)
+    expect(screen.getByTestId('sync-status-syncing')).toBeInTheDocument()
+  })
+
+  it('should show error state', () => {
+    render(<SyncStatusIndicator status="error" errorMessage="Network error" />)
+    expect(screen.getByTestId('sync-status-error')).toBeInTheDocument()
+    expect(screen.getByText('Network error')).toBeInTheDocument()
+  })
+
+  it('should show pending count', () => {
+    render(<SyncStatusIndicator status="pending" pendingCount={3} />)
+    expect(screen.getByText('3 pending')).toBeInTheDocument()
+  })
+})