Wispers

Navigation Header

The main navigation header includes:

Responsive mobile menu
Team switcher
Navigation links
Theme toggle

Footer

The minimal footer includes:

Navigation links
Social media links
Copyright information

Epic Horror Components

Haunted Clippy

A haunted version of the classic assistant that appears randomly. Click the logo 5 times to toggle the horror mode.

Shadow Watcher

A mysterious figure that appears in the background at random intervals. Becomes more frequent as you encounter it more.

Tag Edit Component

Interactive Tag Badges

The TagEdit component provides a way to quickly edit status, type, and other categorical data. It communicates directly with the Python backend API for real-time updates.

Campaign Status and Type Example:

Custom Styled Tags:

Key features of the TagEdit component:

Direct API communication with the backend
Real-time updates with success/error notifications
Customizable appearance with different badge styles
Dropdown selection interface for quick editing
Server-side rendering compatible with browser environment checks

Campaign Detail Card Component

Campaign Detail Card

The CampaignDetailCard component provides a comprehensive view of a campaign with editable fields. It uses TagEdit for status and type, and InlineEdit for other fields.

Key features of the CampaignDetailCard component:

Editable campaign type and status using TagEdit
Editable schedule with date pickers
Editable campaign details like title and URL
Image preview with hover effect for changing
Organized sections with icons for better visual hierarchy

Usage example:

<CampaignDetailCard
  campaign={campaignData}
  handleCampaignChange={handleCampaignChange}
/>

Page Components