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

Replace day events card with accordion

Browse Source
This commit is contained in:
Regalijan 2024-09-30 15:10:13 -04:00
parent b9bff92477
commit 0a8c9598b8
Signed by: regalijan
GPG Key ID: 5D4196DA269EF520
2 changed files with 64 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,25 @@
import calendarStyles from "react-big-calendar/lib/css/react-big-calendar.css"; import calendarStyles from "react-big-calendar/lib/css/react-big-calendar.css";
import eventStyles from "../styles/events-team.css";
import { Calendar, dayjsLocalizer } from "react-big-calendar"; import { Calendar, dayjsLocalizer } from "react-big-calendar";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { type LinksFunction } from "@remix-run/cloudflare"; import { type LinksFunction } from "@remix-run/cloudflare";
import { Card, CardHeader, Container, Heading } from "@chakra-ui/react"; import {
Accordion,
AccordionButton,
AccordionIcon,
AccordionItem,
AccordionPanel,
Box,
Container,
} from "@chakra-ui/react";
import { useLoaderData } from "@remix-run/react"; import { useLoaderData } from "@remix-run/react";
import { useState } from "react"; import { useState } from "react";
export const links: LinksFunction = () => { export const links: LinksFunction = () => {
return [{ href: calendarStyles, rel: "stylesheet" }]; return [
{ href: calendarStyles, rel: "stylesheet" },
{ href: eventStyles, rel: "stylesheet" },
];
}; };
export async function loader({ context }: { context: RequestContext }) { export async function loader({ context }: { context: RequestContext }) {
@ -72,11 +84,50 @@ export default function () {
}} }}
style={{ height: 500 }} style={{ height: 500 }}
/> />
<Card id="event-extra-details"> <Accordion id="events-accordion" mt="16px">
<CardHeader> <AccordionItem>
<Heading size="sm">Events</Heading> <h2>
</CardHeader> <AccordionButton>
</Card> <Box as="span" flex="1" textAlign="left">
Fact of the Day
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}></AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Box as="span" flex="1" textAlign="left">
Gamenight
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}></AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Box as="span" flex="1" textAlign="left">
Riddle of the Week
</Box>
</AccordionButton>
</h2>
<AccordionPanel pb={4}></AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Box as="span" flex="1" textAlign="left">
Question of the Day
</Box>
</AccordionButton>
</h2>
<AccordionPanel pb={4}></AccordionPanel>
</AccordionItem>
</Accordion>
</Container> </Container>
); );
} }

6
app/styles/events-team.css
View File

@ -6,3 +6,9 @@
margin-right: 0; margin-right: 0;
width: 32px; width: 32px;
} }
@media(min-width: 501px) {
.events-accordion {
display: none;
}
}