FirstLandingPageCommit #1
Conversation
src/routes/LandingPage.tsx
Outdated
| const NavBar: React.FC = () => | ||
| { | ||
| return( | ||
| <div style={{ position: 'fixed', top: 10, right: 0, padding: '10px' }}> | ||
| <ul style={{ listStyleType: 'none', margin: 0, padding: 10 }}> | ||
| <li style={{ display: 'inline', marginRight: '10px' }}><a href="/">Speakers</a></li> | ||
| <li style={{ display: 'inline', marginRight: '10px' }}><a href="/auth"> PuzleBang </a></li> | ||
| <li style={{ display: 'inline', marginRight: '10px' }}><a href="/contact">Login</a></li> | ||
| </ul> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Let's make this into its own component! So basically make a components folder, make a NavBar.tsx file in that folder, and then have that export a navbar component and import that here
There was a problem hiding this comment.
also Manya, Aydan will probably mention this in a moment but let's use this component!
There was a problem hiding this comment.
hey manya, this is a super good start! leaving some general conventions/feedback here (didn't cover this fully at the meeting, so that's my bad!)
-
since we're using chakra, we shouldn't be using html elements unless we absolutely have to (i.e. the tabs in the navbar can be a tab component, and the entire navbar could be a TabList! things like that would make it a lot easier to style and maintain in the future
-
since we want to standardize things, we shouldn't have inline css within tsx files - it makes small changes really messy, since you need to go through and edit all instances of a single component. instead, we should define custom components wherever we need to style them, and you can import those normally (see how Button is being imported in this and this).
-
since this is the first PR (WOOT WOOOT), we should add a grid-style layout to our pages! this involves creating a custom PageLayout component that takes in particular elements, and snaps them into positions. This way, we only need to worry about the "Main" content, as opposed to inserting the navbar at the top of every page.
also, i know this is a lot of text, so please please please take your time to go through it, and don't hesitate to ask questions if you need anything :))
👷 Deploy Preview for rp2024 processing.
|
✅ Deploy Preview for rp2024 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| <section className="slider"> | ||
| {slides.map((slide, index) => { | ||
| return ( | ||
| <div |
| key={index} | ||
| style={{ display: index === current ? 'block' : 'none' }} | ||
| > | ||
| <img |
No description provided.