Interactive Tagline element editor for the Onepage no‑code website builder test task.
- Demo: https://onepage-bice.vercel.app
- Repository: https://github.com/CDenisUa/onepage
This project implements an interactive editor for the Tagline element based on the provided Figma design. The editor includes a preview area and a settings panel to create, edit, and style tags, with immediate UI updates.
- Tagline preview with tags rendered as buttons/chips and wrapping layout
- Main panel with tag list, add item, and styles navigation
- Create/Edit item panels for label and link
- Styles panel with variants, size, radius, and alignment controls
- Simulated persistence of changes to the server
- React
- TypeScript
- MobX (state management)
- Vite (build tool)
- CSS Modules (styling)
- Install dependencies:
npm install- Start dev server:
npm run dev- Production build:
npm run build- Menu behavior updated: opens as a context menu (right click).
- Validation on item creation.
- Duplicate names are not allowed.
- Name (label) field is required.
- Drag handles/icons added to the item list in the context menu.
- Drag & drop works in both the menu list and the Tagline preview.
- Long tag labels are truncated with ellipsis in the menu list and preview chips.
- Empty states are shown in the preview and menu when no tags exist.
- Preview area with heading and wrap behavior
- Main panel with list, add item, and styles navigation
- Create/Edit item panels with label and link
- Styles: variants, size, radius, alignment
- Instant preview updates
- Simulated persistence on changes
- Drag & drop sorting (optional requirement)
The app simulates saving changes by logging POST http://api/tagline to the console. It is triggered on:
- Typing in the Item panel (Label/Link) with a short debounce.
- Pressing Enter or closing the Item panel (when the draft is valid).
- Deleting an item.
- Reordering items via drag & drop (menu list or preview).
- Changing any Style settings (variant, size, radius, alignment).
- Resetting styles.
If any Figma details are ambiguous, reasonable defaults are chosen and can be adjusted easily.