148 lines
6.2 KiB
Markdown
148 lines
6.2 KiB
Markdown
# Reference: Tasks 4-6 — TopBar and Sidebar
|
||
|
||
## Concept Reference
|
||
|
||
All specs below are derived from `References/GPSystemconcept.html`. Open it in a browser for visual reference.
|
||
|
||
---
|
||
|
||
## Task 4: TopBar Component
|
||
|
||
### File: `src/components/TopBar.tsx`
|
||
|
||
### Structure
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ [🏠] Headhunt Medical Center Remote │ [🔍 Search... Ctrl+K] │ Dr. A.CHARLWOOD · Active Session · 12:23 [Ctrl+K] │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### Specs
|
||
|
||
**Container:**
|
||
- `position: fixed`, `top: 0`, `left: 0`, `right: 0`
|
||
- `height: var(--topbar-height)` (48px)
|
||
- `background: var(--surface)` (#FFFFFF)
|
||
- `border-bottom: 1px solid var(--border)` (#D4E0DE)
|
||
- `display: flex`, `align-items: center`, `justify-content: space-between`
|
||
- `padding: 0 20px`
|
||
- `z-index: 100`
|
||
|
||
**Brand (left):**
|
||
- `Home` icon from lucide-react (18px, accent color)
|
||
- Text: "Headhunt Medical Center" — 13px, font-ui, 600 weight, text-primary
|
||
- Version badge: "Remote" — 11px, 400 weight, text-tertiary, margin-left 2px
|
||
|
||
**Search bar (center):**
|
||
- Wrapper: `max-width: 560px`, `min-width: 400px`
|
||
- Container: `height: 42px`, `border: 1.5px solid var(--border)`, `border-radius: var(--radius)` (8px), `padding: 0 14px`, white bg
|
||
- Search icon (16px, tertiary) + input + "Ctrl+K" kbd badge
|
||
- Input: 13px, font-body, placeholder "Search records, experience, skills... (Ctrl+K)"
|
||
- Hover: `border-color: var(--accent-border)`
|
||
- Focus: `border-color: var(--accent)`, `box-shadow: 0 0 0 3px rgba(13,110,110,0.12)`
|
||
- **On click/focus: opens Command Palette** (Task 18). Does NOT do inline search.
|
||
- Kbd badge: mono font, 10px, tertiary, bg: var(--bg), border, padding 2px 6px, radius 4px
|
||
|
||
**Session info (right):**
|
||
- Text: "Dr. A.CHARLWOOD · Active Session · [time]" — 12px, text-secondary
|
||
- Session pill: mono 11px, tertiary, `background: var(--accent-light)`, `padding: 3px 10px`, radius 4px, `border: 1px solid var(--accent-border)`
|
||
- Ctrl+K shortcut badge (same style as search bar badge)
|
||
|
||
**Responsive:**
|
||
- Mobile (<768px): hide center search bar. Show only brand + session info (or hamburger).
|
||
- Tablet: search bar may shrink.
|
||
|
||
---
|
||
|
||
## Task 5: Sidebar — PersonHeader
|
||
|
||
### File: `src/components/Sidebar.tsx`
|
||
|
||
### Overall Sidebar Container
|
||
- `width: var(--sidebar-width)` (272px)
|
||
- `min-width: var(--sidebar-width)`
|
||
- `background: var(--sidebar-bg)` (#F7FAFA)
|
||
- `border-right: 1px solid var(--border)` (#D4E0DE)
|
||
- `overflow-y: auto`, custom scrollbar (4px width, transparent track, border-colored thumb)
|
||
- `padding: 20px 16px`
|
||
- `display: flex`, `flex-direction: column`, `gap: 2px`
|
||
|
||
### PersonHeader Section
|
||
Bordered below: `border-bottom: 2px solid var(--accent)`, `padding-bottom: 16px`, `margin-bottom: 6px`
|
||
|
||
**Avatar:**
|
||
- 52px × 52px circle
|
||
- `background: linear-gradient(135deg, var(--accent), #0A8080)`
|
||
- White text "AC", 700 weight, 18px, centered
|
||
- `box-shadow: 0 2px 8px rgba(13,110,110,0.25)`
|
||
- `margin-bottom: 12px`
|
||
|
||
**Name:**
|
||
- "CHARLWOOD, Andrew"
|
||
- 15px, 700 weight, text-primary, `letter-spacing: -0.01em`
|
||
|
||
**Title:**
|
||
- "Pharmacy Data Technologist"
|
||
- 11.5px, mono font, 400 weight, text-secondary
|
||
- `margin-top: 2px`
|
||
|
||
**Status badge:**
|
||
- Inline-flex, gap 5px
|
||
- `margin-top: 8px`
|
||
- 11px, 500 weight, success color (#059669)
|
||
- `background: var(--success-light)`, `border: 1px solid var(--success-border)`
|
||
- `padding: 3px 9px`, `border-radius: 20px` (pill)
|
||
- Animated dot: 6px circle, success color, `animation: pulse 2s infinite` (opacity 1→0.4→1)
|
||
- Text: "Open to Opportunities"
|
||
|
||
**Details grid:**
|
||
- `display: grid`, `grid-template-columns: 1fr`, `gap: 6px`, `margin-top: 12px`
|
||
- Each row: `display: flex`, `justify-content: space-between`, `align-items: center`, 11.5px, `padding: 2px 0`
|
||
- Label: text-tertiary, 400 weight
|
||
- Value: text-primary, 500 weight, text-align right
|
||
- GPhC No. value: mono font, 11px, `letter-spacing: 0.12em` → "2211810"
|
||
- Education value: "MPharm 2.1 (Hons)"
|
||
- Location: "Norwich, Norfolk"
|
||
- Phone: link in accent color, `text-decoration: none`, underline on hover → "07795 553 088"
|
||
- Email: link → "andy@charlwood.xyz"
|
||
- Registered: "August 2016"
|
||
|
||
**Data source:** `src/data/patient.ts`
|
||
|
||
---
|
||
|
||
## Task 6: Sidebar — Tags + Alerts
|
||
|
||
### Section Title Component
|
||
Reusable within sidebar. Used for "Tags", "Alerts / Highlights", and any future sections.
|
||
|
||
- `font-size: 10px`, `font-weight: 600`, `text-transform: uppercase`, `letter-spacing: 0.08em`
|
||
- Color: text-tertiary
|
||
- `margin-bottom: 10px`
|
||
- Flex row with `::after` pseudo-element: `flex: 1`, `height: 1px`, `background: var(--border-light)`, `gap: 6px`
|
||
|
||
### Tags Section
|
||
- Container: `display: flex`, `flex-wrap: wrap`, `gap: 5px`
|
||
- Each tag: 10.5px, 500 weight, `padding: 3px 8px`, `border-radius: 4px`, inline-flex, `line-height: 1.3`
|
||
- **Color variants:**
|
||
- `teal`: `background: var(--accent-light)`, `color: var(--accent)`, `border: 1px solid var(--accent-border)`
|
||
- `amber`: `background: var(--amber-light)`, `color: var(--amber)`, `border: 1px solid var(--amber-border)`
|
||
- `green`: `background: var(--success-light)`, `color: var(--success)`, `border: 1px solid var(--success-border)`
|
||
- **Data source:** `src/data/tags.ts`
|
||
|
||
### Alerts / Highlights Section
|
||
- Container: `display: flex`, `flex-direction: column`, `gap: 6px`
|
||
- Each flag item: `display: flex`, `align-items: center`, `gap: 8px`
|
||
- 11px, 700 weight, `padding: 7px 10px`, `border-radius: var(--radius-sm)` (6px), `letter-spacing: 0.02em`
|
||
- **Alert variant** (red):
|
||
- `background: var(--alert-light)`, `color: var(--alert)`, `border: 1px solid var(--alert-border)`
|
||
- Icon: `AlertTriangle` from lucide-react (14px, 2.5 stroke-width)
|
||
- **Amber variant:**
|
||
- `background: var(--amber-light)`, `color: var(--amber)`, `border: 1px solid var(--amber-border)`
|
||
- Icon: `AlertCircle` from lucide-react (14px, 2.5 stroke-width)
|
||
- Icon container: 16px square, flex center, flex-shrink-0
|
||
- **Data source:** `src/data/alerts.ts`
|
||
|
||
### Section Padding
|
||
Each sidebar section: `padding: 14px 0 6px`
|