refactor: centralise detail panel inline styles into detail-styles.ts

Extract 5 shared style constants (detailRootStyle, sectionHeadingStyle, bulletListStyle, bodyTextStyle, paragraphStyle) used across 5 of 6 detail components. Replaces ~30 inline style object definitions with imports. Net reduction: 274 lines across detail panel components.
2026-02-17 02:09:26 +00:00
parent 7528935d2b
commit 49c9e0cecf
6 changed files with 83 additions and 352 deletions
@@ -1,4 +1,5 @@
 import type { Consultation } from '@/types/pmr'
+import { detailRootStyle, sectionHeadingStyle, bulletListStyle, bodyTextStyle, paragraphStyle } from './detail-styles'

 interface ConsultationDetailProps {
  consultation: Consultation
@@ -6,14 +7,7 @@ interface ConsultationDetailProps {

 export function ConsultationDetail({ consultation }: ConsultationDetailProps) {
  return (
-    <div
-      style={{
-        fontFamily: 'var(--font-ui)',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '24px',
-      }}
-    >
+    <div style={detailRootStyle}>
      {/* Role header */}
      <div>
        <div
@@ -69,26 +63,8 @@ export function ConsultationDetail({ consultation }: ConsultationDetailProps) {

      {/* History (presenting complaint) */}
      <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          History
-        </h3>
-        <p
-          style={{
-            fontSize: '14px',
-            lineHeight: '1.6',
-            color: 'var(--text-primary)',
-            margin: 0,
-          }}
-        >
+        <h3 style={sectionHeadingStyle}>History</h3>
+        <p style={paragraphStyle}>
          {consultation.history}
        </p>
      </div>
@@ -96,36 +72,10 @@ export function ConsultationDetail({ consultation }: ConsultationDetailProps) {
      {/* Examination (achievements) */}
      {consultation.examination && consultation.examination.length > 0 && (
        <div>
-          <h3
-            style={{
-              fontSize: '12px',
-              fontWeight: 600,
-              color: 'var(--text-secondary)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.05em',
-              marginBottom: '8px',
-            }}
-          >
-            Key Achievements
-          </h3>
-          <ul
-            style={{
-              margin: 0,
-              paddingLeft: '20px',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '8px',
-            }}
-          >
+          <h3 style={sectionHeadingStyle}>Key Achievements</h3>
+          <ul style={bulletListStyle}>
            {consultation.examination.map((item, index) => (
-              <li
-                key={index}
-                style={{
-                  fontSize: '14px',
-                  lineHeight: '1.6',
-                  color: 'var(--text-primary)',
-                }}
-              >
+              <li key={index} style={bodyTextStyle}>
                {item}
              </li>
            ))}
@@ -136,36 +86,10 @@ export function ConsultationDetail({ consultation }: ConsultationDetailProps) {
      {/* Plan (outcomes) */}
      {consultation.plan && consultation.plan.length > 0 && (
        <div>
-          <h3
-            style={{
-              fontSize: '12px',
-              fontWeight: 600,
-              color: 'var(--text-secondary)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.05em',
-              marginBottom: '8px',
-            }}
-          >
-            Outcomes & Impact
-          </h3>
-          <ul
-            style={{
-              margin: 0,
-              paddingLeft: '20px',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '8px',
-            }}
-          >
+          <h3 style={sectionHeadingStyle}>Outcomes & Impact</h3>
+          <ul style={bulletListStyle}>
            {consultation.plan.map((item, index) => (
-              <li
-                key={index}
-                style={{
-                  fontSize: '14px',
-                  lineHeight: '1.6',
-                  color: 'var(--text-primary)',
-                }}
-              >
+              <li key={index} style={bodyTextStyle}>
                {item}
              </li>
            ))}
@@ -176,18 +100,7 @@ export function ConsultationDetail({ consultation }: ConsultationDetailProps) {
      {/* Coded entries (technical environment / tags) */}
      {consultation.codedEntries && consultation.codedEntries.length > 0 && (
        <div>
-          <h3
-            style={{
-              fontSize: '12px',
-              fontWeight: 600,
-              color: 'var(--text-secondary)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.05em',
-              marginBottom: '8px',
-            }}
-          >
-            Coded Entries
-          </h3>
+          <h3 style={sectionHeadingStyle}>Coded Entries</h3>
          <div
            style={{
              display: 'flex',
@@ -1,20 +1,12 @@
 import { GraduationCap, Award, BookOpen, FlaskConical, type LucideIcon } from 'lucide-react'
 import type { Document } from '@/types/pmr'
 import { educationExtras } from '@/data/educationExtras'
+import { detailRootStyle, sectionHeadingStyle, bulletListStyle, bodyTextStyle, paragraphStyle } from './detail-styles'

 interface EducationDetailProps {
  document: Document
 }

-const sectionHeaderStyle: React.CSSProperties = {
-  fontSize: '12px',
-  fontWeight: 600,
-  color: 'var(--text-secondary)',
-  textTransform: 'uppercase',
-  letterSpacing: '0.05em',
-  marginBottom: '8px',
-}
-
 const typeIconMap: Record<string, LucideIcon> = {
  Certificate: GraduationCap,
  Registration: Award,
@@ -27,14 +19,7 @@ export function EducationDetail({ document }: EducationDetailProps) {
  const Icon = typeIconMap[document.type] || GraduationCap

  return (
-    <div
-      style={{
-        fontFamily: 'var(--font-ui)',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '24px',
-      }}
-    >
+    <div style={detailRootStyle}>
      {/* Header */}
      <div>
        <div
@@ -117,15 +102,8 @@ export function EducationDetail({ document }: EducationDetailProps) {
      {/* Research project (MPharm) */}
      {extra?.researchDescription && (
        <div>
-          <h3 style={sectionHeaderStyle}>Research Project</h3>
-          <p
-            style={{
-              fontSize: '14px',
-              lineHeight: '1.6',
-              color: 'var(--text-primary)',
-              margin: 0,
-            }}
-          >
+          <h3 style={sectionHeadingStyle}>Research Project</h3>
+          <p style={paragraphStyle}>
            {extra.researchDescription}
          </p>
        </div>
@@ -134,7 +112,7 @@ export function EducationDetail({ document }: EducationDetailProps) {
      {/* OSCE score (MPharm) */}
      {extra?.osceScore && (
        <div>
-          <h3 style={sectionHeaderStyle}>OSCE Performance</h3>
+          <h3 style={sectionHeadingStyle}>OSCE Performance</h3>
          <div
            style={{
              display: 'inline-flex',
@@ -170,25 +148,10 @@ export function EducationDetail({ document }: EducationDetailProps) {
      {/* Extracurricular activities (MPharm) */}
      {extra?.extracurriculars && extra.extracurriculars.length > 0 && (
        <div>
-          <h3 style={sectionHeaderStyle}>Extracurricular Activities</h3>
-          <ul
-            style={{
-              margin: 0,
-              paddingLeft: '20px',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '8px',
-            }}
-          >
+          <h3 style={sectionHeadingStyle}>Extracurricular Activities</h3>
+          <ul style={bulletListStyle}>
            {extra.extracurriculars.map((activity, index) => (
-              <li
-                key={index}
-                style={{
-                  fontSize: '14px',
-                  lineHeight: '1.6',
-                  color: 'var(--text-primary)',
-                }}
-              >
+              <li key={index} style={bodyTextStyle}>
                {activity}
              </li>
            ))}
@@ -199,15 +162,8 @@ export function EducationDetail({ document }: EducationDetailProps) {
      {/* Programme detail (Mary Seacole) */}
      {extra?.programmeDetail && (
        <div>
-          <h3 style={sectionHeaderStyle}>Programme Overview</h3>
-          <p
-            style={{
-              fontSize: '14px',
-              lineHeight: '1.6',
-              color: 'var(--text-primary)',
-              margin: 0,
-            }}
-          >
+          <h3 style={sectionHeadingStyle}>Programme Overview</h3>
+          <p style={paragraphStyle}>
            {extra.programmeDetail}
          </p>
        </div>
@@ -216,13 +172,11 @@ export function EducationDetail({ document }: EducationDetailProps) {
      {/* Notes */}
      {document.notes && (
        <div>
-          <h3 style={sectionHeaderStyle}>Notes</h3>
+          <h3 style={sectionHeadingStyle}>Notes</h3>
          <p
            style={{
-              fontSize: '14px',
-              lineHeight: '1.6',
+              ...paragraphStyle,
              color: 'var(--text-secondary)',
-              margin: 0,
              fontStyle: 'italic',
            }}
          >
@@ -1,5 +1,6 @@
 import type { KPI } from '@/types/pmr'
 import { KPI_COLORS } from '@/lib/theme-colors'
+import { detailRootStyle, sectionHeadingStyle, bulletListStyle, bodyTextStyle, paragraphStyle } from './detail-styles'

 interface KPIDetailProps {
  kpi: KPI
@@ -35,14 +36,7 @@ export function KPIDetail({ kpi }: KPIDetailProps) {
  const { context, role, outcomes, period } = kpi.story

  return (
-    <div
-      style={{
-        fontFamily: 'var(--font-ui)',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '24px',
-      }}
-    >
+    <div style={detailRootStyle}>
      {/* Headline number */}
      <div>
        <div
@@ -98,88 +92,22 @@ export function KPIDetail({ kpi }: KPIDetailProps) {

      {/* Context paragraph */}
      <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          Context
-        </h3>
-        <p
-          style={{
-            fontSize: '14px',
-            lineHeight: '1.6',
-            color: 'var(--text-primary)',
-            margin: 0,
-          }}
-        >
-          {context}
-        </p>
+        <h3 style={sectionHeadingStyle}>Context</h3>
+        <p style={paragraphStyle}>{context}</p>
      </div>

      {/* Your role paragraph */}
      <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          Your Role
-        </h3>
-        <p
-          style={{
-            fontSize: '14px',
-            lineHeight: '1.6',
-            color: 'var(--text-primary)',
-            margin: 0,
-          }}
-        >
-          {role}
-        </p>
+        <h3 style={sectionHeadingStyle}>Your Role</h3>
+        <p style={paragraphStyle}>{role}</p>
      </div>

      {/* Outcome bullets */}
      <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          Key Outcomes
-        </h3>
-        <ul
-          style={{
-            margin: 0,
-            paddingLeft: '20px',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '8px',
-          }}
-        >
+        <h3 style={sectionHeadingStyle}>Key Outcomes</h3>
+        <ul style={bulletListStyle}>
          {outcomes.map((outcome, index) => (
-            <li
-              key={index}
-              style={{
-                fontSize: '14px',
-                lineHeight: '1.6',
-                color: 'var(--text-primary)',
-              }}
-            >
+            <li key={index} style={bodyTextStyle}>
              {outcome}
            </li>
          ))}
@@ -1,6 +1,7 @@
 import { ExternalLink } from 'lucide-react'
 import type { Investigation } from '@/types/pmr'
 import { PROJECT_STATUS_COLORS } from '@/lib/theme-colors'
+import { detailRootStyle, sectionHeadingStyle, bulletListStyle, bodyTextStyle, paragraphStyle } from './detail-styles'

 interface ProjectDetailProps {
  investigation: Investigation
@@ -17,14 +18,7 @@ export function ProjectDetail({ investigation }: ProjectDetailProps) {
  const statusBg = statusBgMap[investigation.status]

  return (
-    <div
-      style={{
-        fontFamily: 'var(--font-ui)',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '24px',
-      }}
-    >
+    <div style={detailRootStyle}>
      {/* Header: name + year + status */}
      <div>
        <div
@@ -72,44 +66,13 @@ export function ProjectDetail({ investigation }: ProjectDetailProps) {

      {/* Methodology */}
      <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          Methodology
-        </h3>
-        <p
-          style={{
-            fontSize: '14px',
-            lineHeight: '1.6',
-            color: 'var(--text-primary)',
-            margin: 0,
-          }}
-        >
-          {investigation.methodology}
-        </p>
+        <h3 style={sectionHeadingStyle}>Methodology</h3>
+        <p style={paragraphStyle}>{investigation.methodology}</p>
      </div>

      {/* Tech stack tags */}
      <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          Tech Stack
-        </h3>
+        <h3 style={sectionHeadingStyle}>Tech Stack</h3>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
          {investigation.techStack.map((tech) => (
            <span
@@ -133,36 +96,10 @@ export function ProjectDetail({ investigation }: ProjectDetailProps) {

      {/* Results */}
      <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          Results
-        </h3>
-        <ul
-          style={{
-            margin: 0,
-            paddingLeft: '20px',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '8px',
-          }}
-        >
+        <h3 style={sectionHeadingStyle}>Results</h3>
+        <ul style={bulletListStyle}>
          {investigation.results.map((result, index) => (
-            <li
-              key={index}
-              style={{
-                fontSize: '14px',
-                lineHeight: '1.6',
-                color: 'var(--text-primary)',
-              }}
-            >
+            <li key={index} style={bodyTextStyle}>
              {result}
            </li>
          ))}
@@ -1,5 +1,6 @@
 import type { SkillMedication } from '@/types/pmr'
 import { roleSkillMappings, constellationNodes } from '@/data/constellation'
+import { detailRootStyle, sectionHeadingStyle } from './detail-styles'

 interface SkillDetailProps {
  skill: SkillMedication
@@ -32,14 +33,7 @@ export function SkillDetail({ skill }: SkillDetailProps) {
    .sort((a, b) => (a!.startYear ?? 0) - (b!.startYear ?? 0))

  return (
-    <div
-      style={{
-        fontFamily: 'var(--font-ui)',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '24px',
-      }}
-    >
+    <div style={detailRootStyle}>
      {/* Skill header */}
      <div>
        <div
@@ -104,18 +98,7 @@ export function SkillDetail({ skill }: SkillDetailProps) {

      {/* Proficiency bar */}
      <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          Proficiency
-        </h3>
+        <h3 style={sectionHeadingStyle}>Proficiency</h3>
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <div
            style={{
@@ -153,18 +136,7 @@ export function SkillDetail({ skill }: SkillDetailProps) {

      {/* Years of experience */}
      <div>
-        <h3
-          style={{
-            fontSize: '12px',
-            fontWeight: 600,
-            color: 'var(--text-secondary)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '8px',
-          }}
-        >
-          Experience
-        </h3>
+        <h3 style={sectionHeadingStyle}>Experience</h3>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: '6px' }}>
          <span
            style={{
@@ -200,18 +172,7 @@ export function SkillDetail({ skill }: SkillDetailProps) {
      {/* Used in roles */}
      {usedInRoles.length > 0 && (
        <div>
-          <h3
-            style={{
-              fontSize: '12px',
-              fontWeight: 600,
-              color: 'var(--text-secondary)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.05em',
-              marginBottom: '10px',
-            }}
-          >
-            Used In
-          </h3>
+          <h3 style={{ ...sectionHeadingStyle, marginBottom: '10px' }}>Used In</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
            {usedInRoles.map((node) => (
              <div
@@ -0,0 +1,38 @@
+import type { CSSProperties } from 'react'
+
+export const detailRootStyle: CSSProperties = {
+  fontFamily: 'var(--font-ui)',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '24px',
+}
+
+export const sectionHeadingStyle: CSSProperties = {
+  fontSize: '12px',
+  fontWeight: 600,
+  color: 'var(--text-secondary)',
+  textTransform: 'uppercase',
+  letterSpacing: '0.05em',
+  marginBottom: '8px',
+}
+
+export const bulletListStyle: CSSProperties = {
+  margin: 0,
+  paddingLeft: '20px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '8px',
+}
+
+export const bodyTextStyle: CSSProperties = {
+  fontSize: '14px',
+  lineHeight: '1.6',
+  color: 'var(--text-primary)',
+}
+
+export const paragraphStyle: CSSProperties = {
+  fontSize: '14px',
+  lineHeight: '1.6',
+  color: 'var(--text-primary)',
+  margin: 0,
+}