Components

UI Components (/components/ui/)

26 reusable components built on shadcn/ui + Tailwind CSS 4:

Component	Purpose
button	Primary action buttons
calendar	Date picker calendar
confirm-dialog	Confirmation modals (danger variant for destructive)
date-range-picker	Date range selection
empty-state	Empty data placeholders
field	Form field wrapper with label + error
google-drive-picker	Drive file selection
input	Text input
kpi-card	Metric display cards
label	Form labels
markdown-editor	Rich text editor
markdown-preview	Markdown renderer
mood-selector	Student mood feedback
multi-select	Multi-value selection
popover	Floating content
price-input	Currency amount input
resource-picker	Resource selection dialog
sheet	Slide-over panels
skeleton	Loading placeholders
star-rating	1-5 star display/input
status-badge	Colored status indicators
tag-multi-select	Tag selection with search
template-picker	Template selection dialog
textarea	Multi-line text input
toggle-switch	Boolean toggle
emoji-picker	Emoji selection popover (11 categories, search, toggle)
timezone-select	Timezone selector with search, dynamic GMT offsets, browser detection, compact mode

Caution

Always use ConfirmDialog for confirmations. Never use window.confirm().

TimezoneSelect

Unified timezone selector used across the app (settings, booking, student portal, widgets).

Props:

Prop	Type	Default	Description
value	string	—	IANA timezone ID
onChange	(tz: string) => void	—	Callback
grouped	boolean	true	Show region group headers
searchable	boolean	true	Show search input
compact	boolean	false	Compact inline style: icon + label + chevron, no border
placeholder	string	—	Placeholder when no value
error	boolean	false	Error styling

Features:

• Search: Real-time regex matching across IANA ID, city name, and GMT offset
• Dynamic GMT offsets: Uses Intl.DateTimeFormat with timeZoneName: 'shortOffset' — offsets update with DST changes
• Browser detection: Auto-includes browser timezone via Intl.DateTimeFormat().resolvedOptions().timeZone, shows “(detected)” badge
• 6 curated regions: Pacific, Americas, Europe, Africa, Asia, Oceania (49 zones covering Spanish teachers + global students)
• Compact mode: text-xs, no border, minimal layout — used in widgets and lightweight layouts

Exports: getTimezoneLabel(ianaId) → “Madrid (GMT+1)”, BROWSER_TIMEZONE constant

EmojiPicker

Popover with 11 emoji categories (smileys, hands, animals, nature, food, activities, travel, objects, education, symbols, flags), search input, and toggle on/off behavior. Used in tag management for tag icons.

Feature Components

Calendar (/components/calendar/, 7 files)

• WeekCalendarGrid: Week view with draggable events
• AgendaListView: Chronological session list
• EventDetailPanel: Session detail sheet
• RescheduleSheet: Reschedule flow
• ScheduleSelector: Calendar/schedule picker
• ActionSheet: Quick actions menu
• AvailabilityEditor: Edit time off/extra availability

Materials (/components/materials/, 13 files)

Google Drive-style file browser:

• Breadcrumb navigation
• Folder tree sidebar
• List, grid, kanban views
• Template & resource editors
• Move-to-folder dialog
• DnD wrapper (dnd-kit)
• Toolbar with search + filters

Reviews (/components/reviews/, 6 files)

• Review card (rating, content, actions)
• Review form (student submission)
• Import form (external platforms)
• Response form (teacher reply)
• Settings panel
• Public reviews section

Widgets (/components/widgets/, 11 files)

• Booking/storefront/reviews config forms
• Preview panel with live rendering
• Embed code section
• Analytics badge
• Variant list
• Widget editor
• Dirty state hook

Storefront (/components/storefront/, 5 files)

• Service card
• Storefront grid
• Booking sheet
• Auth gate (magic link prompt)
• Student context bar

Kanban (/components/kanban/, 4 files)

dnd-kit powered board:

• Board container
• Column (droppable)
• Card (draggable)
• Layout wrapper

Command Palette (/components/command-palette/, 2 files)

• CommandPalette: Cmd+K dialog with student search via TanStack Query
• ShortcutHelp: Shift+? dialog showing all shortcuts in 2-column grid

Services (/components/services/, 1 file)

• ServiceWizard: 3-dimension picker (delivery x group x structure)