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 |
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn