fix: fix lighthouse error

hackerspace-ntnu · Oct 31, 2024 · 07a57ce · 07a57ce
1 parent 56147b3
commit 07a57ce
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 26 deletions.
diff --git a/src/app/[locale]/(default)/shift-schedule/loading.tsx b/src/app/[locale]/(default)/shift-schedule/loading.tsx
@@ -21,17 +21,12 @@ export default function ShiftScheduleLayout() {
     'thursday',
     'friday',
   ] as const;
-  const timeslots = [
-    'first',
-    'second',
-    'third',
-    'fourth',
-  ] as const;
+  const timeslots = ['first', 'second', 'third', 'fourth'] as const;
 
   function getDateTimeRange(timeslot: string) {
     let firstDate: Date;
     let secondDate: Date;
-  
+
     switch (timeslot) {
       case timeslots[0]:
         firstDate = new Date(0, 0, 0, 10, 15, 0, 0);
@@ -58,17 +53,11 @@ export default function ShiftScheduleLayout() {
         secondDate = new Date();
     }
 
-    return (
-      format.dateTimeRange(
-        firstDate,
-        secondDate,
-        {
-          hour: '2-digit',
-          minute: '2-digit',
-          hour12: false
-        }
-      )
-    )
+    return format.dateTimeRange(firstDate, secondDate, {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    });
   }
 
   return (
@@ -88,7 +77,9 @@ export default function ShiftScheduleLayout() {
             <TableBody>
               {timeslots.map((timeslot) => (
                 <TableRow key={timeslot}>
-                  <TableCell className='border-y'>{getDateTimeRange(timeslot)}</TableCell>
+                  <TableCell className='border-y'>
+                    {getDateTimeRange(timeslot)}
+                  </TableCell>
                   <TableCell key={day} className='h-20 min-w-52 border p-1.5'>
                     <Skeleton className='size-full' />
                   </TableCell>
@@ -117,7 +108,9 @@ export default function ShiftScheduleLayout() {
         <TableBody>
           {timeslots.map((timeslot) => (
             <TableRow key={timeslot}>
-              <TableCell className='min-w-32 border-y'>{getDateTimeRange(timeslot)}</TableCell>
+              <TableCell className='min-w-32 border-y'>
+                {getDateTimeRange(timeslot)}
+              </TableCell>
               {days.map((day) => (
                 <TableCell key={day} className='h-20 min-w-52 border p-1.5'>
                   <Skeleton className='size-full' />

diff --git a/src/components/shift-schedule/ScheduleCell.tsx b/src/components/shift-schedule/ScheduleCell.tsx
@@ -3,7 +3,7 @@ import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/Dialog';
 import { TableCell } from '@/components/ui/Table';
 import { cx } from '@/lib/utils';
 import { UserIcon, UsersIcon } from 'lucide-react';
-import { useFormatter, useTranslations } from 'next-intl';
+import { useTranslations } from 'next-intl';
 
 type ScheduleCellProps = {
   tDialog: {
@@ -22,9 +22,10 @@ function ScheduleCell({ tDialog, members }: ScheduleCellProps) {
     <TableCell className='h-20 min-w-52 border p-1.5'>
       <Dialog>
         <DialogTrigger asChild>
-          <div
+          <button
+            type='button'
             className={cx(
-              'flex size-full gap-2 rounded-md p-3',
+              'flex size-full gap-2 rounded-md p-3 text-left',
               members.length === 0
                 ? 'bg-accent/50 text-accent-foreground hover:bg-accent dark:bg-accent/40 dark:hover:bg-accent/60'
                 : 'bg-foreground/20 hover:bg-foreground/25',
@@ -38,17 +39,17 @@ function ScheduleCell({ tDialog, members }: ScheduleCellProps) {
             ) : (
               <></>
             )}
-            <div>
+            <div className='flex flex-col'>
               {/* Amount of people on shift */}
               <span>{t('onShift', { count: members.length })}</span>
               {/* Skill icons */}
               {members.length === 0 ? (
                 <></>
               ) : (
-                <section className='leading-7'>[skill icons total]</section>
+                <span className='leading-7'>[skill icons total]</span>
               )}
             </div>
-          </div>
+          </button>
         </DialogTrigger>
         <DialogContent className='w-1/3 min-w-80 p-3 lg:min-w-96'>
           <ScheduleCellDialog tDialog={tDialog} members={members} />