diff --git a/src/components/GridList.tsx b/src/components/GridList.tsx index 7ac55f0..21ba295 100644 --- a/src/components/GridList.tsx +++ b/src/components/GridList.tsx @@ -1,17 +1,27 @@ +import classNames from 'classnames'; + interface GridListProps { 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 (
- + Add Item + {label}
); }; @@ -19,17 +29,23 @@ const AddItemButton = ({ onAddItem }: { onAddItem: () => void }) => { const GridList = ({ items, colNum, + className, + addItemLabel = '+ Add Item', onAddItem, itemComponent: ItemComponent, }: GridListProps) => { + const containerClassName = classNames('grid gap-4', className); + return (
- {onAddItem && } + {onAddItem && ( + + )} {items.map((item, index) => ( diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 9a6f6e7..41dbff9 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -45,6 +45,7 @@ const Header = () => { setIsDropdownOpen(false)} > Profile diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 4dcf6ae..70df86f 100644 --- a/src/pages/Home.tsx +++ b/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 ( - <> -

Scrummie-Poker

+
+

Estimation sessions

-
    -
  • - Login -
  • -
-
User Id: {user.current?.$id}
- -
-

Estimation sessions

- ( - { - navigate({ - to: '/estimate/session/$sessionId', - params: { sessionId: item.id }, - }); - }} - /> - )} - onAddItem={() => setIsDrawerOpen(true)} - /> -
+ ( + { + navigate({ + to: '/estimate/session/$sessionId', + params: { sessionId: item.id }, + }); + }} + /> + )} + addItemLabel="+ Create Estimation Session" + onAddItem={() => setIsDrawerOpen(true)} + /> setIsDrawerOpen(false)}> setIsDrawerOpen(false)} /> - +
); }