Shared Components
Cross-route components used across the entire application. These live in src/components/shared/.
Logo
Brand mark used in the navbar, interview header, and landing page. Accepts a className prop for sizing.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | --- | Additional CSS classes (typically for height) |
ThemeToggle
Switches between light and dark themes. Uses next-themes under the hood. Renders as a ghost icon button with sun/moon icons.
ThinkingSteps
Animated thinking indicator with cycling status text. Used during AI processing in the interview chat. Shows a pulsing dot and rotates through contextual messages.
Ukrainian
English
| Prop | Type | Default | Description |
|---|---|---|---|
| language | 'ua' | 'en' | --- | Language for thinking step messages |
StatusIndicator
Shows the current interview status with distinct visual treatment for each state. Used in the interview top bar.
| Prop | Type | Default | Description |
|---|---|---|---|
| status | 'idle' | 'listening' | 'thinking' | 'speaking' | --- | Current interview status to visualize |
Need a design system like this?
I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.
Product Designer | AI Design Engineer | Designer for Startups | Mobile & Complex SaaS | from Idea to Product | Framer Developer