-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* initial commit * rest of schedule page * ui and logic addons * final animations * removed unused imports * mobile view changes * some time fixes * spacing fix * stop ending anim after feb 3 * some minor fixes * removed commented code * time display equal * spelling and dates * styling issues
- Loading branch information
1 parent
7551320
commit e8030ea
Showing
20 changed files
with
1,032 additions
and
362 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
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
124 changes: 83 additions & 41 deletions
124
apps/site/src/app/(main)/schedule/components/EventCard.tsx
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 |
|---|---|---|
| @@ -1,53 +1,95 @@ | ||
| import EventRegular from "./EventRegular"; | ||
| import EventAnnouncement from "./EventAnnouncement"; | ||
| import EventMiscellaneous from "./EventMiscellaneous"; | ||
| /* eslint-disable no-mixed-spaces-and-tabs */ | ||
| import { SwordsIcon } from "lucide-react"; | ||
| import { motion } from "framer-motion"; | ||
|
|
||
| import EventProps from "../EventProps"; | ||
| import getTimeAndDates from "@/lib/utils/getTimeAndDates"; | ||
|
|
||
| interface EventCardProps extends EventProps { | ||
| isHappening: boolean; | ||
| } | ||
|
|
||
| export default function EventCard({ | ||
| now, | ||
| title, | ||
| eventType, | ||
| location, | ||
| virtual, | ||
| startTime, | ||
| endTime, | ||
| organization, | ||
| hosts, | ||
| description, | ||
| }: EventProps) { | ||
| if (eventType === "Announcement") { | ||
| // description is used as the prop as opposed to title because description is a Portable Text object | ||
| // that can reflect all text formats put in Sanity | ||
| return ( | ||
| <EventAnnouncement | ||
| description={description} | ||
| startTime={startTime} | ||
| endTime={endTime} | ||
| /> | ||
| ); | ||
| } else if (eventType === "Miscellaneous") { | ||
| return ( | ||
| <EventMiscellaneous | ||
| title={title} | ||
| startTime={startTime} | ||
| endTime={endTime} | ||
| description={description} | ||
| /> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <EventRegular | ||
| now={now} | ||
| title={title} | ||
| eventType={eventType} | ||
| location={location} | ||
| virtual={virtual} | ||
| startTime={startTime} | ||
| endTime={endTime} | ||
| organization={organization} | ||
| hosts={hosts} | ||
| description={description} | ||
| /> | ||
| ); | ||
| } | ||
| isHappening, | ||
| }: EventCardProps) { | ||
| console.log(title, startTime.getTime() === endTime.getTime()); | ||
| return ( | ||
| <div | ||
| className={`w-[90%] min-w-[200px] h-full bg-black border-4 border-white relative p-16 font-display max-lg:w-full ${ | ||
| isHappening && | ||
| "max-lg:bg-blue-100 max-lg:border-blue-900 max-lg:text-blue-950 max-lg:top-[-8px] max-lg:left-[-8px]" | ||
| }`} | ||
| > | ||
| {title ? ( | ||
| <> | ||
| <div> | ||
| <div className="flex justify-between gap-5 max-lg:flex-col"> | ||
| <div className="h-fit w-full flex justify-between items-center"> | ||
| <h1 className="text-4xl max-w-[80%] max-sm:text-3xl"> | ||
| {title} | ||
| </h1> | ||
| {isHappening && ( | ||
| <motion.div | ||
| className="min-w-[50px] max-[400px]:hidden" | ||
| animate={{ y: ["0%", "-10%", "0%"] }} | ||
| transition={{ | ||
| repeat: Infinity, | ||
| duration: 2, | ||
| ease: "easeInOut", | ||
| }} | ||
| > | ||
| <SwordsIcon width={50} height={50} color="rgb(23 37 84)" /> | ||
| </motion.div> | ||
| )} | ||
| </div> | ||
| <p className="text-2xl">{getTimeAndDates(startTime).day}</p> | ||
| </div> | ||
| <div className="pt-5"> | ||
| <div className="w-full flex justify-between gap-5 max-lg:flex-col "> | ||
| <p className="text-2xl"> | ||
| <span>Location: </span> | ||
| {virtual ? <a>Zoom</a> : location} | ||
| </p> | ||
| {organization && <p className="text-xl">By: {organization}</p>} | ||
| </div> | ||
| <p className="text-xl">{`Time: ${ | ||
| startTime.getTime() === endTime.getTime() | ||
| ? `${getTimeAndDates(endTime).compositeTimeHourMinute} ${ | ||
| getTimeAndDates(endTime).amPm | ||
| }` | ||
| : `${getTimeAndDates(startTime).compositeTimeHourMinute} - ${ | ||
| getTimeAndDates(endTime).compositeTimeHourMinute | ||
| } ${getTimeAndDates(endTime).amPm}` | ||
| }`}</p> | ||
| </div> | ||
| </div> | ||
| <div | ||
| className={`w-full h-[2px] ${ | ||
| isHappening ? "bg-blue-900" : "bg-white" | ||
| } mt-4 mb-4`} | ||
| /> | ||
| <div> | ||
| {hosts && ( | ||
| <div className="text-2xl">{`Hosted By: ${hosts?.join( | ||
| ", ", | ||
| )}`}</div> | ||
| )} | ||
| <div className="text-xl pt-5">{description}</div> | ||
| </div> | ||
| </> | ||
| ) : ( | ||
| <div className="text-4xl w-full h-full flex justify-center items-center"> | ||
| No Event Selected... | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
7 changes: 7 additions & 0 deletions
7
apps/site/src/app/(main)/schedule/components/EventPlaque.module.scss
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,7 @@ | ||
| .plaqueHover { | ||
| transform: translate(-3px, -3px); | ||
| } | ||
|
|
||
| .decorHover { | ||
| transform: translate(4px, 4px); | ||
| } |
90 changes: 90 additions & 0 deletions
90
apps/site/src/app/(main)/schedule/components/EventPlaque.tsx
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,90 @@ | ||
| /* eslint-disable no-mixed-spaces-and-tabs */ | ||
| "use client"; | ||
|
|
||
| import { useState } from "react"; | ||
| import { forwardRef } from "react"; | ||
| import { SwordsIcon } from "lucide-react"; | ||
| import { motion } from "framer-motion"; | ||
|
|
||
| import getTimeAndDates from "@/lib/utils/getTimeAndDates"; | ||
|
|
||
| import styles from "./EventPlaque.module.scss"; | ||
|
|
||
| interface EventPlaqueProps { | ||
| title: string; | ||
| startTime: Date; | ||
| endTime: Date; | ||
| isHappening: boolean; | ||
| onClick: (title: string) => void; | ||
| } | ||
|
|
||
| export default forwardRef(function EventPlaque( | ||
| { title, startTime, endTime, isHappening, onClick }: EventPlaqueProps, | ||
| ref: React.LegacyRef<HTMLDivElement>, | ||
| ) { | ||
| const [hovered, setHovered] = useState(false); | ||
|
|
||
| const start = getTimeAndDates(startTime); | ||
| const end = getTimeAndDates(endTime); | ||
|
|
||
| return ( | ||
| <div | ||
| className="duration-500 relative min-w-[200px] h-fit cursor-pointer" | ||
| onMouseEnter={() => setHovered(true)} | ||
| onMouseLeave={() => setHovered(false)} | ||
| ref={ref} | ||
| onClick={() => onClick(title)} | ||
| > | ||
| <div | ||
| className={ | ||
| isHappening | ||
| ? "duration-500 font-display p-5 w-full h-fit border-4 bg-blue-100 border-blue-900 text-blue-950 top-[-8px] left-[-8px]" | ||
| : `duration-500 font-display p-5 w-full h-fit border-4 top-0 left-0 ${ | ||
| hovered | ||
| ? `bg-white border-black text-black top-[-5px] left-[-5px] ${styles.plaqueHover}` | ||
| : "bg-black border-white" | ||
| }` | ||
| } | ||
| > | ||
| <div | ||
| className={ | ||
| isHappening | ||
| ? "text-2xl flex justify-between min-h-[50px] gap-5 items-center" | ||
| : `text-2xl` | ||
| } | ||
| > | ||
| <span>{title}</span> | ||
| {isHappening && ( | ||
| <motion.div | ||
| className="min-w-[50px]" | ||
| animate={{ y: ["0%", "-10%", "0%"] }} | ||
| transition={{ | ||
| repeat: Infinity, | ||
| duration: 2, | ||
| ease: "easeInOut", | ||
| }} | ||
| > | ||
| <SwordsIcon width={50} height={50} color="rgb(23 37 84)" /> | ||
| </motion.div> | ||
| )} | ||
| </div> | ||
| <div className="text-lg"> | ||
| <div> | ||
| {startTime.getTime() === endTime.getTime() | ||
| ? `${end.compositeTimeHourMinute} ${end.amPm}` | ||
| : `${start.compositeTimeHourMinute} - ${end.compositeTimeHourMinute} ${end.amPm}`} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div | ||
| className={ | ||
| isHappening | ||
| ? "absolute w-full h-full top-[9px] left-[9px] z-[-1] duration-500 bg-blue-100" | ||
| : `absolute w-full h-full top-0 left-0 z-[-1] duration-500 bg-white ${ | ||
| hovered && styles.decorHover | ||
| }` | ||
| } | ||
| /> | ||
| </div> | ||
| ); | ||
| }); |
Oops, something went wrong.