Component Structure

Overview

my-buddy uses atomic design to organize components into four levels of complexity.

Component Hierarchy

src/components/
├── atoms/         # Basic building blocks
├── molecules/     # Simple component groups
├── organisms/     # Complex components
└── templates/     # Page layouts

Atoms

The smallest, most reusable components.

Component	Purpose
Badge	Status and type indicators
FilterSelect	Dropdown filter for list views
KeyToast	Keyboard shortcut indicator
SearchInput	Search input field
SiblingNav	Previous/next navigation

Molecules

Combinations of atoms that form distinct UI pieces.

Component	Purpose
Backlinks	”Referenced by” section on detail pages
Breadcrumb	Navigation breadcrumb trail
FilterBar	Collection of filters for list pages
RelatedContent	Related entries sidebar

Organisms

Complex components that form major sections of the UI.

Component	Purpose
Sidebar	Main navigation sidebar
HelpModal	Keyboard shortcuts help overlay

Templates

Page-level layouts that compose organisms and define page structure.

Component	Purpose
BaseTemplate	Base HTML layout with head, styles, scripts
PageTemplate	Standard page layout with sidebar and content area

Pages

Pages live in src/pages/ and use file-based routing:

Route	Page
/	Dashboard
/accounts/	Account list
/accounts/[slug]	Account detail
/contacts/	Contact list
/contacts/[slug]	Contact detail
/deals/	Deal list
/deals/[slug]	Deal detail
/projects/	Project list
/projects/[slug]	Project detail
/tasks/	Task list
/tasks/[slug]	Task detail
/kb/	KB list
/kb/[slug]	KB detail
/meetings/	Meeting list
/meetings/[slug]	Meeting detail
/journals/	Journal list
/journals/[slug]	Journal detail