diff --git a/src/components/NewUI/EventCreatorLink.tsx b/src/components/NewUI/EventCreatorLink.tsx new file mode 100644 index 0000000..790dc50 --- /dev/null +++ b/src/components/NewUI/EventCreatorLink.tsx @@ -0,0 +1,26 @@ +import { useCallback, useState } from 'react'; +import EventCreator from './EventCreator'; +import { IGroup } from './Group'; + +export default function EventCreatorLink({ group }: { group: IGroup }) { + const [open, setOpen] = useState(false); + const toggle = useCallback(() => { + setOpen((open) => !open); + }, []); + + return ( +
+
+ Create Event +
+ {open && } +
+ ); +} diff --git a/src/components/NewUI/EventStream.tsx b/src/components/NewUI/EventStream.tsx index 3c180a8..e910f1c 100644 --- a/src/components/NewUI/EventStream.tsx +++ b/src/components/NewUI/EventStream.tsx @@ -3,9 +3,13 @@ import Event, { IEvent } from './Event'; export default function EventStream({ events }: { events: IEvent[] }) { return (
- {events.map((event) => ( - - ))} + {events && events.length > 0 ? ( + events.map((event) => ) + ) : ( + + There are no events yet. Click 'create event' above to add one! + + )}
); } diff --git a/src/components/NewUI/Group.tsx b/src/components/NewUI/Group.tsx index a04a72f..da4382f 100644 --- a/src/components/NewUI/Group.tsx +++ b/src/components/NewUI/Group.tsx @@ -2,8 +2,9 @@ import { useEffect, useState } from 'react'; import { useParams } from 'react-router'; import { Link } from 'react-router-dom'; import { IEvent } from './Event'; -import EventCreator from './EventCreator'; +import EventCreatorLink from './EventCreatorLink'; import EventStream from './EventStream'; +import GroupSettingsLink from './GroupSettingsLink'; export type IGroup = { id: number; @@ -44,6 +45,8 @@ export default function Group() { const { name } = group; + console.log({ events }); + return (

{name}

- + +
); diff --git a/src/components/NewUI/GroupSettingsLink.tsx b/src/components/NewUI/GroupSettingsLink.tsx new file mode 100644 index 0000000..2fad6cf --- /dev/null +++ b/src/components/NewUI/GroupSettingsLink.tsx @@ -0,0 +1,30 @@ +import { useCallback, useState } from 'react'; +import { IGroup } from './Group'; +import UISecondaryBox from './UISecondaryBox'; + +export default function GroupSettingsLink({ group }: { group: IGroup }) { + const [open, setOpen] = useState(false); + const toggle = useCallback(() => { + setOpen((open) => !open); + }, []); + + return ( +
+
+ Settings +
+ {open && ( + +

Settings

+
+ )} +
+ ); +} diff --git a/src/components/NewUI/UILink.tsx b/src/components/NewUI/UILink.tsx new file mode 100644 index 0000000..cc0cf22 --- /dev/null +++ b/src/components/NewUI/UILink.tsx @@ -0,0 +1,28 @@ +import { CSSProperties, ReactNode, useMemo } from 'react'; +import { Link } from 'react-router-dom'; + +const baseStyle: CSSProperties = { + textDecoration: 'none', + cursor: 'pointer', + userSelect: 'none', +}; + +export default function UILink({ + href, + style, + children, +}: { + href: string; + style?: CSSProperties; + children: ReactNode; +}) { + const computedStyle = useMemo(() => { + return !style ? baseStyle : { ...baseStyle, ...style }; + }, [style]); + + return ( + + {children} + + ); +}