Update home page

src/components/GridList.tsx

@@ -1,17 +1,27 @@
+import classNames from 'classnames';
+
 interface GridListProps<T> {
   items: T[];
   colNum: number;
+  className?: string;
+  addItemLabel?: string;
   onAddItem?: () => void;
   itemComponent: React.ComponentType<{ item: T }>;
 }
 
-const AddItemButton = ({ onAddItem }: { onAddItem: () => void }) => {
+const AddItemButton = ({
+  label,
+  onAddItem,
+}: {
+  label: string;
+  onAddItem: () => void;
+}) => {
   return (
     <div
       onClick={onAddItem}
       className="flex cursor-pointer items-center justify-center rounded-md border-2 border-dashed border-gray-400 hover:border-gray-600"
     >
-      <span className="text-gray-500">+ Add Item</span>
+      <span className="text-gray-500">{label}</span>
     </div>
   );
 };
@@ -19,17 +29,23 @@ const AddItemButton = ({ onAddItem }: { onAddItem: () => void }) => {
 const GridList = <T,>({
   items,
   colNum,
+  className,
+  addItemLabel = '+ Add Item',
   onAddItem,
   itemComponent: ItemComponent,
 }: GridListProps<T>) => {
+  const containerClassName = classNames('grid gap-4', className);
+
   return (
     <div
-      className={`grid gap-4`}
+      className={containerClassName}
       style={{
         gridTemplateColumns: `repeat(${colNum}, minmax(0, 1fr))`,
       }}
     >
-      {onAddItem && <AddItemButton onAddItem={onAddItem} />}
+      {onAddItem && (
+        <AddItemButton label={addItemLabel} onAddItem={onAddItem} />
+      )}
 
       {items.map((item, index) => (
         <ItemComponent key={index} item={item} />

src/components/Header.tsx

@@ -45,6 +45,7 @@ const Header = () => {
               <Link
                 className="block px-4 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-gray-100 dark:hover:bg-nero-700"
                 to="/profile"
+                onClick={() => setIsDropdownOpen(false)}
               >
                 Profile
               </Link>

src/pages/Home.tsx

@@ -1,5 +1,4 @@
-import { getRouteApi, Link } from '@tanstack/react-router';
-import { useUser } from '../lib/context/user';
+import { getRouteApi } from '@tanstack/react-router';
 import { useEstimationsList } from '../lib/context/estimationsList';
 import {
   Card,
@@ -12,48 +11,38 @@ import { useState } from 'react';
 const route = getRouteApi('/_authenticated/');
 
 function Home() {
-  const user = useUser();
   const navigate = route.useNavigate();
   const estimationsList = useEstimationsList();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
   return (
-    <>
-      <h1 className="text-3xl font-bold underline">Scrummie-Poker</h1>
+    <div className="p-6">
+      <h1 className="text-3xl font-bold">Estimation sessions</h1>
 
-      <ul>
-        <li>
-          <Link to="/login">Login</Link>
-        </li>
-      </ul>
-      <pre>User Id: {user.current?.$id}</pre>
-
-      <div>
-        <p>Estimation sessions</p>
-        <GridList
-          colNum={2}
-          items={estimationsList?.current ?? []}
-          itemComponent={({ item }) => (
-            <Card
-              key={item.id}
-              title={item.name}
-              description={item.id}
-              onClick={() => {
-                navigate({
-                  to: '/estimate/session/$sessionId',
-                  params: { sessionId: item.id },
-                });
-              }}
-            />
-          )}
-          onAddItem={() => setIsDrawerOpen(true)}
-        />
-      </div>
+      <GridList
+        colNum={2}
+        className="my-3"
+        items={estimationsList?.current ?? []}
+        itemComponent={({ item }) => (
+          <Card
+            key={item.id}
+            title={item.name}
+            onClick={() => {
+              navigate({
+                to: '/estimate/session/$sessionId',
+                params: { sessionId: item.id },
+              });
+            }}
+          />
+        )}
+        addItemLabel="+ Create Estimation Session"
+        onAddItem={() => setIsDrawerOpen(true)}
+      />
 
       <Drawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
         <CreateEstimationSessionForm onCreated={() => setIsDrawerOpen(false)} />
       </Drawer>
-    </>
+    </div>
   );
 }