Readyish for prod!

src/components/status/TechTable.tsx

@@ -15,15 +15,14 @@ import { toast } from 'sonner';
 import { HistoryDrawer } from '@/components/status';
 import type { Profile } from '@/utils/supabase';
 import type { RealtimeChannel } from '@supabase/supabase-js';
+import { makeConditionalClassName } from '@/lib/utils';
 
 type TechTableProps = {
   initialStatuses: UserWithStatus[];
-  className?: string;
 };
 
 export const TechTable = ({
   initialStatuses = [],
-  className = 'w-full max-w-7xl mx-auto px-4',
 }: TechTableProps) => {
   const { isAuthenticated } = useAuth();
   const { tvMode } = useTVMode();
@@ -116,15 +115,8 @@ export const TechTable = ({
 
   useEffect(() => {
     if (!isAuthenticated) return;
-    //if (channelRef.current) {
-      //const supabase = createClient();
-      //supabase.removeChannel(channelRef.current).catch((error) => {
-        //console.error(`Error unsubscribing from status updates: ${error}`);
-      //});
-      //channelRef.current = null;
-    //}
-    const supabase = createClient();
 
+    const supabase = createClient();
     const channel = supabase
       .channel('status_updates', {
         config: { broadcast: { self: true }}
@@ -197,34 +189,54 @@ export const TechTable = ({
     );
   }
 
+  const containerClassName = makeConditionalClassName({
+    context: tvMode,
+    defaultClassName: 'mx-auto',
+    on: 'lg:w-11/12 w-full mt-15',
+    off: 'w-5/6',
+  });
+  const thClassName = makeConditionalClassName({
+    context: tvMode,
+    defaultClassName: 'py-3 px-4 border font-semibold',
+    on: 'lg:text-6xl',
+    off: 'lg:text-5xl',
+  });
+  const tdClassName = makeConditionalClassName({
+    context: tvMode,
+    defaultClassName: 'py-3 px-4 border',
+    on: 'lg:text-5xl',
+    off: 'lg:text-4xl',
+  });
+  const tCheckboxClassName = `py-3 px-4 border`;
+  const checkBoxClassName = `lg:scale-200 cursor-pointer`;
+
   return (
-    <div className={className}>
-      <table
-        className={`w-full text-center border-collapse \
-          ${tvMode ? 'text-4xl lg:text-5xl' : 'text-base lg:text-lg'}`}
-      >
+    <div className={containerClassName}>
+      <table className='w-full text-center rounded-md'>
         <thead>
           <tr className='bg-muted'>
             {!tvMode && (
-              <th className='py-3 px-3 border'>
+              <th className={tCheckboxClassName}>
                 <input
                   type='checkbox'
-                  className='scale-125 cursor-pointer'
+                  className={checkBoxClassName}
                   checked={selectAll}
                   onChange={handleSelectAllChange}
                 />
               </th>
             )}
-            <th className='py-3 px-4 border font-semibold'>Name</th>
-            <th className='py-3 px-4 border font-semibold'>
+            <th className={thClassName}>Name</th>
+            <th className={thClassName}>
               <Drawer>
-                <DrawerTrigger className='hover:underline'>
+                <DrawerTrigger
+                  className='hover:text-foreground/60 cursor-pointer'
+                >
                   Status
                 </DrawerTrigger>
                 <HistoryDrawer />
               </Drawer>
             </th>
-            <th className='py-3 px-4 border font-semibold'>Updated At</th>
+            <th className={thClassName}>Updated At</th>
           </tr>
         </thead>
         <tbody>
@@ -237,10 +249,10 @@ export const TechTable = ({
               `}
             >
               {!tvMode && (
-                <td className='py-2 px-3 border'>
+                <td className={tCheckboxClassName}>
                   <input
                     type='checkbox'
-                    className='scale-125 cursor-pointer'
+                    className={checkBoxClassName}
                     checked={selectedIds.includes(userWithStatus.user.id)}
                     onChange={() =>
                       handleCheckboxChange(userWithStatus.user.id)
@@ -248,13 +260,13 @@ export const TechTable = ({
                   />
                 </td>
               )}
-              <td className='py-3 px-4 border font-medium'>
+              <td className={tdClassName}>
                 {userWithStatus.user.full_name ?? 'Unknown User'}
               </td>
-              <td className='py-3 px-4 border'>
+              <td className={tdClassName}>
                 <Drawer>
                   <DrawerTrigger
-                    className='text-left w-full p-2 rounded hover:bg-muted transition-colors'
+                    className='text-center w-full p-2 rounded-md hover:bg-muted transition-colors'
                     onClick={() => setSelectedHistoryUser(userWithStatus.user)}
                   >
                     {userWithStatus.status}
@@ -264,7 +276,7 @@ export const TechTable = ({
                   )}
                 </Drawer>
               </td>
-              <td className='py-3 px-4 border text-muted-foreground'>
+              <td className={tdClassName}>
                 {formatTime(userWithStatus.created_at)}
               </td>
             </tr>

src/lib/utils.ts

@@ -4,3 +4,17 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export const makeConditionalClassName = ({
+  context,
+  defaultClassName,
+  on = '',
+  off = '',
+}: {
+  context: boolean;
+  defaultClassName: string;
+  on?: string;
+  off?: string;
+}) => {
+  return defaultClassName + ' ' + (context ? on : off);
+};