AnthoLume/frontend/src/components

UI Components

This directory contains reusable UI components for the AnthoLume application.

Toast Notifications

Usage

The toast system provides info, warning, and error notifications that respect the current theme and dark/light mode.

import { useToasts } from './components/ToastContext';

function MyComponent() {
  const { showInfo, showWarning, showError, showToast } = useToasts();

  const handleAction = async () => {
    try {
      // Do something
      showInfo('Operation completed successfully!');
    } catch (error) {
      showError('An error occurred while processing your request.');
    }
  };

  return <button onClick={handleAction}>Click me</button>;
}

API

• showToast(message: string, type?: 'info' | 'warning' | 'error', duration?: number): string

  • Shows a toast notification
  • Returns the toast ID for manual removal
  • Default type: 'info'
  • Default duration: 5000ms (0 = no auto-dismiss)

• showInfo(message: string, duration?: number): string

  • Shortcut for showing an info toast

• showWarning(message: string, duration?: number): string

  • Shortcut for showing a warning toast

• showError(message: string, duration?: number): string

  • Shortcut for showing an error toast

• removeToast(id: string): void

  • Manually remove a toast by ID

• clearToasts(): void

  • Clear all active toasts

Examples

// Info toast (auto-dismisses after 5 seconds)
showInfo('Document saved successfully!');

// Warning toast (auto-dismisses after 10 seconds)
showWarning('Low disk space warning', 10000);

// Error toast (no auto-dismiss)
showError('Failed to load data', 0);

// Generic toast
showToast('Custom message', 'warning', 3000);

Skeleton Loading

Usage

Skeleton components provide placeholder content while data is loading. They automatically adapt to dark/light mode.

Components

Skeleton

Basic skeleton element with various variants:

import { Skeleton } from './components/Skeleton';

// Default (rounded rectangle)
<Skeleton className="w-full h-8" />

// Text variant
<Skeleton variant="text" className="w-3/4" />

// Circular variant (for avatars)
<Skeleton variant="circular" width={40} height={40} />

// Rectangular variant
<Skeleton variant="rectangular" width="100%" height={200} />

SkeletonText

Multiple lines of text skeleton:

<SkeletonText lines={3} />
<SkeletonText lines={5} className="max-w-md" />

SkeletonAvatar

Avatar placeholder:

<SkeletonAvatar size="md" />
<SkeletonAvatar size={56} />

SkeletonCard

Card placeholder with optional elements:

// Default card
<SkeletonCard />

// With avatar
<SkeletonCard showAvatar />

// Custom configuration
<SkeletonCard 
  showAvatar 
  showTitle 
  showText 
  textLines={4}
  className="max-w-sm"
/>

SkeletonTable

Table placeholder:

<SkeletonTable rows={5} columns={4} />
<SkeletonTable rows={10} columns={6} showHeader={false} />

SkeletonButton

Button placeholder:

<SkeletonButton width={120} />
<SkeletonButton className="w-full" />

PageLoader

Full-page loading indicator:

<PageLoader message="Loading your documents..." />

InlineLoader

Small inline loading spinner:

<InlineLoader size="sm" />
<InlineLoader size="md" />
<InlineLoader size="lg" />

Integration with Table Component

The Table component now supports skeleton loading:

import { Table, SkeletonTable } from './components/Table';

function DocumentList() {
  const { data, isLoading } = useGetDocuments();

  if (isLoading) {
    return <SkeletonTable rows={10} columns={5} />;
  }

  return (
    <Table
      columns={columns}
      data={data?.documents || []}
    />
  );
}

Theme Support

All components automatically adapt to the current theme:

• Light mode: Uses gray tones for skeletons, appropriate colors for toasts
• Dark mode: Uses darker gray tones for skeletons, adjusted colors for toasts

The theme is controlled via Tailwind's dark: classes, which respond to the system preference or manual theme toggles.

Dependencies

• clsx - Utility for constructing className strings
• tailwind-merge - Merges Tailwind CSS classes intelligently
• lucide-react - Icon library used by Toast component