regalijan/car-crushers-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fill items in accordion

Browse Source
This commit is contained in:
Regalijan 2024-10-04 15:31:18 -04:00
parent 5b9b8ad337
commit 258f84155c
Signed by: regalijan
GPG Key ID: 5D4196DA269EF520
1 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/routes/events-calendar.tsx
View File

@ -74,6 +74,15 @@ export default function () {
const data = useLoaderData<typeof loader>(); const data = useLoaderData<typeof loader>();
const [selectedDate, setDate] = useState(new Date()); const [selectedDate, setDate] = useState(new Date());
const eventsOfDay = () => {
return data.eventList.filter(
(e) =>
e.day === selectedDate.getUTCDate() &&
e.month === selectedDate.getUTCMonth() + 1 &&
e.year === selectedDate.getUTCFullYear(),
) as { [k: string]: any }[];
};
return ( return (
<Container maxW="container.lg" h="600px"> <Container maxW="container.lg" h="600px">
<Calendar <Calendar
@ -94,7 +103,10 @@ export default function () {
<AccordionIcon /> <AccordionIcon />
</AccordionButton> </AccordionButton>
</h2> </h2>
<AccordionPanel pb={4}></AccordionPanel> <AccordionPanel pb={4}>
{eventsOfDay().find((e) => e.type === "fotd")?.details || "None"}
<br />
</AccordionPanel>
</AccordionItem> </AccordionItem>
<AccordionItem> <AccordionItem>
<h2> <h2>
@ -105,7 +117,10 @@ export default function () {
<AccordionIcon /> <AccordionIcon />
</AccordionButton> </AccordionButton>
</h2> </h2>
<AccordionPanel pb={4}></AccordionPanel> <AccordionPanel pb={4}>
{eventsOfDay().find((e) => e.type === "gamenight")?.details ||
"None"}
</AccordionPanel>
</AccordionItem> </AccordionItem>
<AccordionItem> <AccordionItem>
<h2> <h2>
@ -115,7 +130,9 @@ export default function () {
</Box> </Box>
</AccordionButton> </AccordionButton>
</h2> </h2>
<AccordionPanel pb={4}></AccordionPanel> <AccordionPanel pb={4}>
{eventsOfDay().find((e) => e.type === "rotw")?.details || "None"}
</AccordionPanel>
</AccordionItem> </AccordionItem>
<AccordionItem> <AccordionItem>
<h2> <h2>
@ -125,7 +142,9 @@ export default function () {
</Box> </Box>
</AccordionButton> </AccordionButton>
</h2> </h2>
<AccordionPanel pb={4}></AccordionPanel> <AccordionPanel pb={4}>
{eventsOfDay().find((e) => e.type === "qotd")?.details || "None"}
</AccordionPanel>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
</Container> </Container>