@@ -72,79 +72,81 @@ const People = () => {
7272
7373 return (
7474 < PageBody >
75- < div className = { lineupClasses . pageHeader } >
76- < PageTitle subheading = { t `Speakers, artists and hosts you can add to any of this organizer's events. Edit a profile once and every event shows the change.` } >
77- { t `People` }
78- </ PageTitle >
79- { canCreate && (
80- < CreateButton leftSection = { < IconPlus size = { 16 } /> } onClick = { ( ) => setDrawer ( 'new' ) } data-testid = "people-create-button" >
81- { t `New profile` }
82- </ CreateButton >
83- ) }
84- </ div >
85-
86- < div className = { lineupClasses . stats } >
87- { stats . map ( stat => (
88- < button
89- key = { stat . key }
90- type = "button"
91- className = { `${ lineupClasses . stat } ${ classes . statButton } }
92- data-active = { filter === stat . key || undefined }
93- onClick = { ( ) => setFilter ( stat . key ) }
94- >
95- < span className = { lineupClasses . statLabel } > { stat . label } </ span >
96- < span className = { lineupClasses . statValue } > { isLoading ? '–' : stat . value } </ span >
97- < span className = { lineupClasses . statHint } data-warn = { stat . warn || undefined } > { stat . hint } </ span >
98- </ button >
99- ) ) }
100- </ div >
75+ < div className = { lineupClasses . page } >
76+ < div className = { lineupClasses . pageHeader } >
77+ < PageTitle subheading = { t `Speakers, artists and hosts you can add to any of this organizer's events. Edit a profile once and every event shows the change.` } >
78+ { t `People` }
79+ </ PageTitle >
80+ { canCreate && (
81+ < CreateButton leftSection = { < IconPlus size = { 16 } /> } onClick = { ( ) => setDrawer ( 'new' ) } data-testid = "people-create-button" >
82+ { t `New profile` }
83+ </ CreateButton >
84+ ) }
85+ </ div >
10186
102- < div className = { classes . toolbar } >
103- < TextInput
104- className = { classes . search }
105- leftSection = { < IconSearch size = { 16 } /> }
106- placeholder = { t `Search by name or tagline` }
107- value = { search }
108- onChange = { event => setSearch ( event . currentTarget . value ) }
109- />
110- </ div >
87+ < div className = { lineupClasses . stats } >
88+ { stats . map ( stat => (
89+ < button
90+ key = { stat . key }
91+ type = "button"
92+ className = { `${ lineupClasses . stat } ${ classes . statButton } }
93+ data-active = { filter === stat . key || undefined }
94+ onClick = { ( ) => setFilter ( stat . key ) }
95+ >
96+ < span className = { lineupClasses . statLabel } > { stat . label } </ span >
97+ < span className = { lineupClasses . statValue } > { isLoading ? '–' : stat . value } </ span >
98+ < span className = { lineupClasses . statHint } data-warn = { stat . warn || undefined } > { stat . hint } </ span >
99+ </ button >
100+ ) ) }
101+ </ div >
111102
112- < div className = { classes . table } >
113- < div className = { classes . tableHead } >
114- < span > { t `Name` } </ span >
115- < span > { t `Appears on` } </ span >
116- < span > { t `Links` } </ span >
117- < span />
103+ < div className = { classes . toolbar } >
104+ < TextInput
105+ className = { classes . search }
106+ leftSection = { < IconSearch size = { 16 } /> }
107+ placeholder = { t `Search by name or tagline` }
108+ value = { search }
109+ onChange = { event => setSearch ( event . currentTarget . value ) }
110+ />
118111 </ div >
119112
120- { isLoading && Array . from ( { length : 5 } ) . map ( ( _ , index ) => (
121- < div key = { index } className = { classes . row } > < Skeleton height = { 36 } radius = "md" /> </ div >
122- ) ) }
113+ < div className = { classes . table } >
114+ < div className = { classes . tableHead } >
115+ < span > { t `Name` } </ span >
116+ < span > { t `Appears on` } </ span >
117+ < span > { t `Links` } </ span >
118+ < span />
119+ </ div >
123120
124- { ! isLoading && filtered . map ( profile => (
125- < PersonRow key = { profile . id } profile = { profile } onOpen = { ( ) => setDrawer ( { profileId : profile . id } ) } />
126- ) ) }
121+ { isLoading && Array . from ( { length : 5 } ) . map ( ( _ , index ) => (
122+ < div key = { index } className = { classes . row } > < Skeleton height = { 36 } radius = "md" /> </ div >
123+ ) ) }
124+
125+ { ! isLoading && filtered . map ( profile => (
126+ < PersonRow key = { profile . id } profile = { profile } onOpen = { ( ) => setDrawer ( { profileId : profile . id } ) } />
127+ ) ) }
128+
129+ { ! isLoading && filtered . length === 0 && (
130+ < div className = { lineupClasses . panelEmpty } >
131+ < IconMicrophone2 size = { 22 } stroke = { 1.5 } />
132+ < p >
133+ { counts . all === 0
134+ ? t `No profiles yet. Create one here, or add people straight from an event's Lineup & Schedule page.`
135+ : t `Nobody matches these filters.` }
136+ </ p >
137+ </ div >
138+ ) }
139+ </ div >
127140
128- { ! isLoading && filtered . length === 0 && (
129- < div className = { lineupClasses . panelEmpty } >
130- < IconMicrophone2 size = { 22 } stroke = { 1.5 } />
131- < p >
132- { counts . all === 0
133- ? t `No profiles yet. Create one here, or add people straight from an event's Lineup & Schedule page.`
134- : t `Nobody matches these filters.` }
135- </ p >
136- </ div >
141+ { drawer && ( drawer === 'new' || drawerProfile ) && (
142+ < ProfileDrawer
143+ organizerId = { organizerId ! }
144+ profile = { drawerProfile }
145+ onCreated = { profile => setDrawer ( { profileId : profile . id } ) }
146+ onClose = { ( ) => setDrawer ( null ) }
147+ />
137148 ) }
138149 </ div >
139-
140- { drawer && ( drawer === 'new' || drawerProfile ) && (
141- < ProfileDrawer
142- organizerId = { organizerId ! }
143- profile = { drawerProfile }
144- onCreated = { profile => setDrawer ( { profileId : profile . id } ) }
145- onClose = { ( ) => setDrawer ( null ) }
146- />
147- ) }
148150 </ PageBody >
149151 ) ;
150152} ;
0 commit comments