Add Events Page #122
Add Events Page #122
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| function CalendarIcon({ date, className }: { date: Date; className?: string }) { | ||
| return ( | ||
| <div | ||
| className={cn( | ||
| "relative flex flex-col items-center justify-center w-12 h-12 rounded border bg-background", | ||
| className | ||
| )} | ||
| > | ||
| <div className="text-[0.65rem] font-medium text-muted-foreground"> | ||
| {date.toLocaleString("default", { month: "short" })} | ||
| </div> | ||
| <div className="font-bold text-xl leading-none">{date.getDate()}</div> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Can we extract this to its own file? It helps keep separation of concerns and allows it to be reused. If you don't want it to be reused, you can keep it in the same directory.
There was a problem hiding this comment.
I may re-work this tomorrow following the conversation with Wale in Mattermost earlier. But yes, I agree that this could be used elsewhere in the future so it would make sense to separate it into its own component. Will do!
| ); | ||
| } | ||
|
|
||
| export default function Component() { |
There was a problem hiding this comment.
Can we rename Component to EventList so we don't cause confusion during debugging and stack traces?
| export default function Component() { | |
| export default function EventList() { |
| <Link | ||
| key={index} | ||
| href={event.link} | ||
| > |
There was a problem hiding this comment.
We should use passHref here so we don't have an extra DOM element.
| <Link | |
| key={index} | |
| href={event.link} | |
| > | |
| <Link | |
| key={index} | |
| href={event.link} | |
| passHref | |
| > |
| className="w-full mt-4" | ||
| onClick={() => setDisplayCount((prev) => prev + 10)} | ||
| > | ||
| Load More |
There was a problem hiding this comment.
Are we translating this? If so, it can be passed in as a prop. If not, then you can close this review comment.
This PR adds an events page at
/events.