Base next js project with project structure setup #15
Conversation
postcss.config.js
Outdated
| module.exports = { | ||
| // Add your installed PostCSS plugins here: | ||
| plugins: [ | ||
| // require('autoprefixer'), |
There was a problem hiding this comment.
Remove commented lines throughout the code
|
|
||
| This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). | ||
|
|
||
| ## Available Scripts |
There was a problem hiding this comment.
Don’t remove these until you’ve replaced them all with working components
Header component & NextJS Project setup
tolicodes
left a comment
tolicodes
left a comment
There was a problem hiding this comment.
a few minor changes, but looks good
components/home/Header/index.tsx
Outdated
| <Container> | ||
| <NavWrapper> | ||
| <Logo> | ||
| <h1> |
There was a problem hiding this comment.
the H1 should be part of the logo component. Actually I'm thinking the lgoo should be a png
components/home/Header/index.tsx
Outdated
| <SocialMediaLinks> | ||
| <a href={"https://linkedin.com"} target={"_blank"} rel={"noreferrer"}> | ||
| <Image | ||
| src={"/icons/linkedin.svg"} |
components/home/Header/index.tsx
Outdated
| src={"/icons/github.svg"} | ||
| alt={"GitHub"} | ||
| width={"22px"} | ||
| height={"22px"} |
There was a problem hiding this comment.
make a common component SocialIcon with these shared/standard props
components/home/Header/index.tsx
Outdated
| </NavWrapper> | ||
| <WatchMyStory> | ||
| <h1>Watch My Story</h1> | ||
| <iframe |
There was a problem hiding this comment.
use a youtube react lib so that we can control the video
components/home/Header/styled.tsx
Outdated
| font-family: "PT Mono", monospace; | ||
| text-align: center; | ||
|
|
||
| h1 { |
There was a problem hiding this comment.
Do you mean I should create separate component for this, instead of nested tag based styling?
| width: 820px; | ||
| height: 40px; | ||
|
|
||
| ul { |
| text-align: center; | ||
| width: 100%; | ||
|
|
||
| h1 { |
components/home/Header/styled.tsx
Outdated
|
|
||
| interface ContainerProps {} | ||
| export const Container = styled.div<ContainerProps>` | ||
| display: flex; |
There was a problem hiding this comment.
We can use Chakra for common components like flex boxes. Goal is to write as little code as possible
There was a problem hiding this comment.
Sure, got it.
| height: 100%; | ||
| margin: 0; | ||
|
|
||
| li { |
There was a problem hiding this comment.
Please clarify, do you mean I write separate styled component instead of styling nested tags?
There was a problem hiding this comment.
each DOM element (div, li, etc) should be a styled component, so that we can use and see it in isolation
There was a problem hiding this comment.
Got it.
No description provided.