@@ -2,7 +2,7 @@ import { StatusChip } from '@/components/status-chip';
22import { Button } from '@/components/ui/button' ;
33import { Empty , EmptyContent , EmptyDescription , EmptyHeader , EmptyMedia , EmptyTitle } from '@/components/ui/empty' ;
44import { Table , TableBody , TableCell , TableHead , TableHeader , TableRow } from '@/components/ui/table' ;
5- import { useProjects } from '@/hooks/use-projects' ;
5+
66import { useServices } from '@/hooks/use-services' ;
77import AppLayout from '@/layouts/app-layout' ;
88import { getRuntimeIcon } from '@/lib/runtime-icon' ;
@@ -120,44 +120,44 @@ export default function Services() {
120120 < TableBody >
121121 { ! isLoading
122122 ? paginatedServices ! . map ( ( service ) => (
123- < TableRow key = { service . id } className = "h-16" >
124- < TableCell className = "h-16 align-middle font-medium" > { service . name } </ TableCell >
125- < TableCell className = "h-16 align-middle" >
126- < StatusChip status = { service . status } />
127- </ TableCell >
128- < TableCell className = "h-16 align-middle" >
129- < div className = "flex items-center gap-2" >
130- { getRuntimeIcon ( service . runtime ) }
131- < span > { service . runtime } </ span >
132- </ div >
133- </ TableCell >
134- < TableCell className = "h-16 align-middle" > { service . region } </ TableCell >
135- < TableCell className = "h-16 w-[200px] text-right align-middle" >
136- { service . last_deployed instanceof Date
137- ? service . last_deployed . toLocaleString ( )
138- : service . last_deployed }
139- </ TableCell >
140- </ TableRow >
141- ) )
123+ < TableRow key = { service . id } className = "h-16" >
124+ < TableCell className = "h-16 align-middle font-medium" > { service . name } </ TableCell >
125+ < TableCell className = "h-16 align-middle" >
126+ < StatusChip status = { service . status } />
127+ </ TableCell >
128+ < TableCell className = "h-16 align-middle" >
129+ < div className = "flex items-center gap-2" >
130+ { getRuntimeIcon ( service . runtime ) }
131+ < span > { service . runtime } </ span >
132+ </ div >
133+ </ TableCell >
134+ < TableCell className = "h-16 align-middle" > { service . region } </ TableCell >
135+ < TableCell className = "h-16 w-[200px] text-right align-middle" >
136+ { service . last_deployed instanceof Date
137+ ? service . last_deployed . toLocaleString ( )
138+ : service . last_deployed }
139+ </ TableCell >
140+ </ TableRow >
141+ ) )
142142 : Array . from ( { length : 3 } ) . map ( ( _ , idx ) => (
143- < TableRow key = { `skeleton-${ idx } ` } className = "h-16" >
144- < TableCell className = "h-16 max-w-[240px] overflow-hidden align-middle font-medium" >
145- < div className = "h-4 w-32 animate-pulse rounded bg-muted" />
146- </ TableCell >
147- < TableCell className = "h-16 align-middle" >
148- < div className = "h-4 w-16 animate-pulse rounded bg-muted" />
149- </ TableCell >
150- < TableCell className = "h-16 align-middle" >
151- < div className = "h-4 w-20 animate-pulse rounded bg-muted" />
152- </ TableCell >
153- < TableCell className = "h-16 max-w-[320px] overflow-hidden align-middle" >
154- < div className = "h-4 w-40 animate-pulse rounded bg-muted" />
155- </ TableCell >
156- < TableCell className = "h-16 w-[200px] overflow-hidden text-right align-middle" >
157- < div className = "ml-auto h-4 w-24 animate-pulse rounded bg-muted" />
158- </ TableCell >
159- </ TableRow >
160- ) ) }
143+ < TableRow key = { `skeleton-${ idx } ` } className = "h-16" >
144+ < TableCell className = "h-16 max-w-[240px] overflow-hidden align-middle font-medium" >
145+ < div className = "h-4 w-32 animate-pulse rounded bg-muted" />
146+ </ TableCell >
147+ < TableCell className = "h-16 align-middle" >
148+ < div className = "h-4 w-16 animate-pulse rounded bg-muted" />
149+ </ TableCell >
150+ < TableCell className = "h-16 align-middle" >
151+ < div className = "h-4 w-20 animate-pulse rounded bg-muted" />
152+ </ TableCell >
153+ < TableCell className = "h-16 max-w-[320px] overflow-hidden align-middle" >
154+ < div className = "h-4 w-40 animate-pulse rounded bg-muted" />
155+ </ TableCell >
156+ < TableCell className = "h-16 w-[200px] overflow-hidden text-right align-middle" >
157+ < div className = "ml-auto h-4 w-24 animate-pulse rounded bg-muted" />
158+ </ TableCell >
159+ </ TableRow >
160+ ) ) }
161161 </ TableBody >
162162 </ Table >
163163
@@ -166,8 +166,8 @@ export default function Services() {
166166 { ( services ?? [ ] ) . length === 0
167167 ? 'No services found'
168168 : services ! . length === 1
169- ? 'Showing 1 of 1 service'
170- : `Showing ${ startIndex + 1 } to ${ Math . min ( endIndex , services ?. length ?? 0 ) } of ${ services ?. length ?? 0 } services` } { ' ' }
169+ ? 'Showing 1 of 1 service'
170+ : `Showing ${ startIndex + 1 } to ${ Math . min ( endIndex , services ?. length ?? 0 ) } of ${ services ?. length ?? 0 } services` } { ' ' }
171171 </ div >
172172 < div className = "flex items-center space-x-2" >
173173 < Button
0 commit comments