start on statuses table list thing

src/components/layout/status/list/index.tsx

@@ -0,0 +1,109 @@
+'use client';
+import Link from 'next/link';
+import { useState } from 'react';
+import {
+  type Preloaded,
+  usePreloadedQuery,
+} from 'convex/react';
+import { api } from '~/convex/_generated/api';
+import { useTVMode } from '@/components/providers';
+import {
+  BasedAvatar,
+  Button,
+  Card,
+  CardContent,
+  Drawer,
+  DrawerTrigger,
+  Input,
+  SubmitButton,
+} from '@/components/ui';
+import { toast } from 'sonner';
+import { ccn, formatTime, formatDate } from '@/lib/utils';
+import { RefreshCw, Clock, Calendar, CheckCircle2 } from 'lucide-react';
+
+type StatusListProps = {
+  preloadedUser: Preloaded<typeof api.auth.getUser>;
+  preloadedStatuses: Preloaded<typeof api.statuses.getCurrentForAll>;
+};
+
+export const StatusList = ({
+  preloadedUser,
+  preloadedStatuses,
+}: StatusListProps) => {
+  const user = usePreloadedQuery(preloadedUser);
+  const statuses = usePreloadedQuery(preloadedStatuses);
+  const { tvMode } = useTVMode();
+  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
+  const [selectAll, setSelectAll] = useState(false);
+  const [statusInput, setStatusInput] = useState('');
+
+  const handleSelectAllClick = () => {
+    if (selectAll) setSelectedUsers([]);
+    else setSelectedUsers([]);
+    setSelectAll(!selectAll);
+  };
+
+  const containerCn = ccn({
+    context: tvMode,
+    className: 'flex flex-col mx-auto items-center\
+      sm:w-5/6 md:w-3/4 lg:w-2/3 xl:w-1/2 min-w-[450px]',
+    on: 'mt-8',
+    off: 'px-10',
+  });
+
+  const headerCn = ccn({
+    context: tvMode,
+    className: 'w-full',
+    on: 'hidden',
+    off: 'flex mb-3 justify-between items-center',
+  });
+
+  const selectAllIconCn = ccn({
+    context: selectAll,
+    className: 'w-4 h-4',
+    on: '',
+    off: '',
+  })
+
+  const cardContainerCn = ccn({
+    context: tvMode,
+    className: 'w-full space-y-2',
+    on: 'text-primary',
+    off: '',
+  });
+
+  return (
+    <div className={containerCn}>
+      <div className={headerCn}>
+        <div className='flex items-center gap-4'>
+          <Button
+            onClick={handleSelectAllClick}
+            variant={'outline'}
+            size={'sm'}
+            className='flex items-center gap2'
+          >
+            <CheckCircle2
+              className={selectAllIconCn}
+            />
+            {selectAll ? 'Unselect All' : 'Select All'}
+          </Button>
+          {!tvMode && (
+            <div className='flex items-center gap-2 text-xs'>
+              <span className='text-muted-foreground'>Miss the old table?</span>
+              <Link
+                href='/table'
+                className='font-medium hover:underline'
+              >
+                Find it here!
+              </Link>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className={cardContainerCn}>
+      </div>
+
+    </div>
+  );
+};