-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1ea7a15
commit e0e7690
Showing
7 changed files
with
223 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import { | ||
| Image, | ||
| Box, | ||
| Skeleton, | ||
| Flex, | ||
| Text, | ||
| VStack, | ||
| } from "@chakra-ui/react"; | ||
|
|
||
| interface IEventPanel { | ||
| name: string; | ||
| date: Date; | ||
| location: string; | ||
| description: string; | ||
| image: string; | ||
| loading: boolean; | ||
| } | ||
|
|
||
| export default function EventPanel(props: IEventPanel) { | ||
| const {name, date, location, description, image, loading} = props; | ||
|
|
||
| return ( | ||
| <Flex | ||
| id='meeting-info' | ||
| height='450px' | ||
| direction='row' | ||
| width='80vw' | ||
| maxW='1500px' | ||
| bgGradient='linear(to-t, brand.mid_purple, brand.hot_pink)' | ||
| borderRadius='30px' | ||
| alignItems='center' | ||
| marginBottom='50px' | ||
| > | ||
| <Box width='30vw' maxW='500px'> | ||
| <Skeleton isLoaded={!loading}> | ||
| <Image | ||
| src={image} | ||
| alt={name} | ||
| height='350px' | ||
| width='350px' | ||
| marginLeft='50px' | ||
| borderRadius='15px' | ||
| objectFit='cover' | ||
| /> | ||
| </Skeleton> | ||
| </Box> | ||
| <VStack width='50vw' maxWidth='1000px'> | ||
| <Skeleton isLoaded={!loading} width='100%'> | ||
| <Box justifyContent='flex-start' width='100%'> | ||
| <Text fontSize='4xl' fontWeight='bold' color='white'> | ||
| {name} | ||
| </Text> | ||
| </Box> | ||
| </Skeleton> | ||
| <Skeleton isLoaded={!loading} width='100%'> | ||
| <Box justifyContent='flex-start' width='100%'> | ||
| <Text fontSize='xl' fontWeight='bold' color='white'> | ||
| {date.toLocaleDateString()} • {location} | ||
| </Text> | ||
| </Box> | ||
| </Skeleton> | ||
| <Skeleton isLoaded={!loading} width='100%' height='200px' marginTop='30px'> | ||
| <Box justifyContent='flex-start' width='100%'> | ||
| <Text fontSize='xl' color='white'> | ||
| {description} | ||
| </Text> | ||
| </Box> | ||
| </Skeleton> | ||
| </VStack> | ||
| </Flex> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import { Inter } from "@next/font/google"; | ||
| import { | ||
| Center, | ||
| VStack, | ||
| Text, | ||
| } from "@chakra-ui/react"; | ||
| // @ts-ignore | ||
| import { getAllEvents } from "@/utils/api"; | ||
| import { lazy, useEffect, useState } from "react"; | ||
| import { IEventInfo } from "utils/parsers"; | ||
| import EventPanel from "components/EventPanel"; | ||
|
|
||
| const Room = lazy(() => import("components/Room")); | ||
| const inter = Inter({ subsets: ["latin"] }); | ||
|
|
||
| function Title() { | ||
| return ( | ||
| <Center> | ||
| <Text | ||
| as='h2' | ||
| color='white' | ||
| fontSize='6xl' | ||
| fontWeight='semibold' | ||
| > | ||
| Events | ||
| </Text> | ||
| </Center> | ||
| ); | ||
| } | ||
|
|
||
|
|
||
| interface IDisplayProps { | ||
| events: IEventInfo[]; | ||
| loading: boolean; | ||
| } | ||
|
|
||
| function DisplayEvents(props: IDisplayProps) { | ||
| const { events, loading } = props; | ||
|
|
||
| return ( | ||
| <VStack> | ||
| {events.map((event: IEventInfo) => | ||
| <EventPanel | ||
| key={event.name} | ||
| name={event.name} | ||
| date={event.date} | ||
| location={event.location} | ||
| description={event.description} | ||
| image={event.image ?? "/HCPLogo.webp"} | ||
| loading={loading} | ||
| /> | ||
| )} | ||
| </VStack> | ||
| ); | ||
| } | ||
|
|
||
| export default function Events() { | ||
| // Scroll to top of page | ||
| useEffect(() => { | ||
| window.scrollTo(0, 0); | ||
| }, []); | ||
|
|
||
| const [events, setEvents] = useState<IEventInfo[]>([ | ||
| { | ||
| date: new Date("3/21/2023"), | ||
| name: "Default Event", | ||
| location: "Default Location", | ||
| description: "Long".repeat(100), | ||
| image: "", | ||
| }, | ||
| ]); | ||
| const [loading, setLoading] = useState<boolean>(true); | ||
|
|
||
| useEffect(() => { | ||
| const getData = (data: IEventInfo[]) => { | ||
| setEvents(data); | ||
| setLoading(false); | ||
| } | ||
| getAllEvents(getData, true); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <VStack spacing='40px'> | ||
| <Title /> | ||
| <DisplayEvents events={events} loading={loading}/> | ||
| </VStack> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters