mixmi Component Library
Comprehensive documentation of all UI components, design patterns, and interactive elements in the mixmi platform.
Core Display Components
TrackCard
File: components/TrackCard.tsx
Size: 160px × 160px square
Structure
-
Front (Default State):
- Cover image (full bleed)
- Gradient overlay at bottom
- Track title (truncated if long)
- Artist name
- Price badge (if applicable)
- Track type icon (loop/song/pack/EP)
-
Hover State:
- Darkened overlay
- Control buttons appear:
- Play button (center)
- Add to cart (top right)
- Info button (bottom right)
- Subtle scale animation (1.02x)
Props
interface TrackCardProps {
track: Track;
size?: 'small' | 'medium' | 'large'; // 120px, 160px, 200px
showPrice?: boolean;
showControls?: boolean;
onClick?: () => void;
onPlay?: () => void;
onAddToCart?: () => void;
onInfo?: () => void;
}
Visual States
- Default (static display)
- Hover (shows controls)
- Playing (animated border)
- Loading (skeleton)
- Error (fallback image)
- Selected (highlighted border)
ContentGrid
File: components/ContentGrid.tsx
Layout: Responsive grid of TrackCards
Grid Configuration
- Desktop: 6-7 columns
- Tablet: 4-5 columns
- Mobile: 2-3 columns
- Gap: 16px (1rem)
- Padding: 24px container padding
Features
- Virtualization for large lists
- Lazy loading images
- Responsive breakpoints
- Filter/sort controls
- Empty state handling
CreatorHeader
File: components/CreatorHeader.tsx
Height: 240px banner + 80px info bar
Elements
- Background image/gradient
- Avatar (120px circle)
- Creator name
- Wallet address (truncated)
- Stats (tracks, plays, earnings)
- Follow button
- Share button
FilterTabs
File: components/FilterTabs.tsx
Tab Options
- All (total count)
- Loops (8-bar)
- Loop Packs (2-5 loops)
- Songs (full tracks)
- EPs (2-5 songs)
Visual Design
- Active tab: Purple background
- Inactive: Transparent with border
- Count badges on each tab
- Smooth transitions between states
Modal Components
TrackDetailsModal
File: components/TrackDetailsModal.tsx
Size: 800px max-width, 90vh max-height
Sections
-
Header:
- Cover image (large)
- Title and artist
- Play controls
- Close button
-
Metadata Tabs:
- Details (BPM, key, duration, location)
- Credits (attribution splits)
- License (terms and pricing)
- Source (for remixes)
-
Actions:
- Download/Purchase button
- Add to cart
- Share
- Report
PaymentModal
File: components/mixer/PaymentModal.tsx
Size: 500px width
Flow Steps
-
Remix Preview:
- Waveform visualization
- 8-bar selection
- Play preview button
-
Attribution Setup:
- Title input
- Artist name
- Cover image upload
-
Payment Breakdown:
- Source tracks (2 × 1 STX)
- Total: 2 STX
- Recipient list with percentages
-
Wallet Connection:
- Connect button (if needed)
- Balance display
- Insufficient funds warning
-
Confirmation:
- Processing spinner
- Success animation
- Transaction link
Audio Components
AudioPlayer
File: components/AudioPlayer.tsx
Position: Fixed bottom bar or inline
Controls
- Play/pause button
- Progress bar (draggable)
- Time display (current/total)
- Volume slider
- Track info display
- Next/previous (in playlists)
WaveformDisplay
File: components/WaveformDisplay.tsx
Powered by: Wavesurfer.js
Features
- Real-time rendering
- Zoom controls
- Region selection
- Playhead position
- Loading state
- Error fallback
DJMixer Interface
File: components/mixer/DJMixer.tsx
Channel Strip Components
- Volume fader (vertical)
- EQ knobs (high/mid/low)
- Gain control
- Cue button
- Load track button
- Track info display
- Waveform preview
Crossfader
- Horizontal slider
- A/B channel assignment
- Curve adjustment
- Cut buttons
Form Components
FileUpload
File: components/FileUpload.tsx
Features
- Drag and drop zone
- File type validation
- Progress indication
- Multiple file support
- Preview generation
- Size limits display
SplitInput
File: components/SplitInput.tsx
Attribution Percentage Inputs
- Wallet address field
- Percentage slider/input
- Auto-calculation to 100%
- Add/remove contributors
- Validation messages
- TBD wallet option
LocationPicker
File: components/LocationPicker.tsx
Interface
- Map view (Mapbox)
- Search bar
- Pin placement
- Coordinate display
- Named location input
- GPS auto-detect button
Navigation Components
TopNavigation
File: components/Navigation.tsx
Height: 64px
Elements
- Logo (left)
- Main nav links (center):
- Globe
- Mixer
- Upload
- Welcome
- User menu (right):
- Avatar
- Wallet connection
- Settings dropdown
MobileDrawer
File: components/MobileDrawer.tsx
Trigger: Hamburger menu
Content:
- User profile section
- Navigation links
- Settings
- Logout
Utility Components
LoadingStates
- Skeleton: Placeholder shapes
- Spinner: Circular loader
- ProgressBar: Linear progress
- Shimmer: Animated placeholder
EmptyStates
- Icon illustration
- Descriptive text
- Action button (optional)
- Consistent styling across app
ToastNotifications
Position: Top-right corner Types:
- Success (green)
- Error (red)
- Warning (yellow)
- Info (blue) Auto-dismiss: 5 seconds
Design System
Colors
--primary: #8B5CF6; /* Purple */
--secondary: #EC4899; /* Pink */
--background: #0F0F0F; /* Near black */
--surface: #1A1A1A; /* Dark gray */
--text-primary: #FFFFFF;
--text-secondary: #A0A0A0;
--success: #10B981;
--error: #EF4444;
--warning: #F59E0B;
Typography
- Font: System font stack
- Headings: Bold, 1.5-2.5rem
- Body: Regular, 0.875-1rem
- Small: 0.75-0.875rem
Spacing Scale
- 4px (0.25rem)
- 8px (0.5rem)
- 16px (1rem)
- 24px (1.5rem)
- 32px (2rem)
- 48px (3rem)
Border Radius
- Small: 4px
- Default: 8px
- Large: 16px
- Full: 9999px (circles)
Shadows
- sm: 0 1px 2px rgba(0,0,0,0.05)
- md: 0 4px 6px rgba(0,0,0,0.1)
- lg: 0 10px 15px rgba(0,0,0,0.1)
- xl: 0 20px 25px rgba(0,0,0,0.1)
Breakpoints
- Mobile: < 640px
- Tablet: 640px - 1024px
- Desktop: > 1024px
Animation Timings
- Fast: 150ms
- Normal: 200ms
- Slow: 300ms
- Easing: cubic-bezier(0.4, 0, 0.2, 1)
Interactive Patterns
Hover Behaviors
- Buttons: Brightness increase
- Cards: Scale 1.02x + shadow
- Links: Underline appears
- All: 200ms transition
Click Feedback
- Buttons: Scale 0.95x
- Cards: Brief highlight
- Ripple effect (Material-style)
Loading Patterns
- Skeleton for layouts
- Spinner for actions
- Progress for uploads
- Shimmer for content
Error Handling
- Inline validation messages
- Toast notifications
- Fallback UI components
- Retry mechanisms
Accessibility Features
Keyboard Navigation
- Tab order logical
- Focus indicators visible
- Skip links available
- Escape closes modals
Screen Reader Support
- ARIA labels
- Role attributes
- Live regions for updates
- Semantic HTML
Color Contrast
- WCAG AA compliant
- High contrast mode support
- Color-blind friendly palette
Interactive Targets
- Minimum 44×44px touch targets
- Adequate spacing
- Clear hover states
Component library version: 1.0.0 Last updated: October 2024