feat: add shadcn/ui; create navbar; implement calendar #17
Conversation
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
d4vidsha
changed the title
|
Most changes in latest commit follows this pattern: |
Both the x-axis (dates) and y-axis (times) now reflect the current calendar by default. It uses the date-fns library to get "today" and any surrounding days. Do note that days with less than 24 hours (e.g. from daylight savings) have not been tested yet and is an edge case that has been ignored for the time-being.
Given an id, title, start time and duration, the calendar events will be displayed on the calendar page. As of now, the calendar events are mocked to be scheduled on the current day of the week. In future, this can easily be modified. Additionally, the mobile view now reflects the current week.
|
@ichirodev I saw your message from the stream, this is the current working branch which you can check out! |
We replace the Menu from Tailwind's Headless UI with Radix UI equivalent using our own components taken from shadcn/ui. This commit adds state for the different views (i.e. day, week, month and year views).
Creating this component follows best practices of TypeScript React. This is technically considered my first ever conscious commit with passing down props to a React component. I have ensured to use the correct types in the associated `ViewMenuProps` interface.
https://tailwindcss.com/docs/content-configuration#dynamic-class-names As per the link above, dynamic classnames during previous implementation was flawed and failed to generate those css classes. To remedy this, we use a new columnPosition array that contains all the iterable classnames, such as col-start-1, col-start-2, etc.
This is a very rudimentary approach taken. It can work for most cases but edge cases have not been considered. For example, the day of the month may sometimes be correct and other times incorrect. We can implement that a little later down the line. In this commit, we also minify the three-dot dropdown menu using shadcn/ui components and removing our dependence on Tailwind's Headless UI and Heroicons.
The brand icon was updated to the first calendar icon found online. In future, if things take off we can change this to something that's better. Additionally, we now have new sections in README.md: "Repository Activity", "Star History", and login credentials for the demo. There is also a new table of contents and motive for the app.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes