feat: add react components #40
Conversation
app/src/components/Title.tsx
Outdated
| <div className="bg-blue-950 w-10 h-0.5 mr-2" /> | ||
| <h1 className="uppercase font-mono font-bold text-blue-950"> | ||
| {text ? text : "Default title"} | ||
| </h1> | ||
| <div className="bg-blue-950 w-10 h-0.5 ml-2" /> |
There was a problem hiding this comment.
I think we should have the possibility to change the color and text size from the props
There was a problem hiding this comment.
Tailwinds doesn't allow to build dynamic class names (https://tailwindcss.com/docs/content-configuration#dynamic-class-names) but maybe we can use a set of defined colors (like dark or bright theme for example) instead and switching between them according to the value of the props
There was a problem hiding this comment.
Good to know, thank you 👍 however I think the way you wrote it now makes more sense IMO, which allows the consumer to override the className itself, though it is not type-checked. Maybe there is an enum we can use from Tailwind?
app/src/components/Title.tsx
Outdated
There was a problem hiding this comment.
I think we should use kebab-case file naming convention to be consistent with NextJS
There was a problem hiding this comment.
Actually I think that the best practice for React components specifically is the filename being PascalCase, which should match the component name. Though I agree, conventions in the JS world are a mess 🤮 Let's discuss this next time we meet and write our conventions somewhere (even better if we setup eslint rules or similar)
app/package-lock.json
Outdated
| "lockfileVersion": 3, | ||
| "lockfileVersion": 1, |
There was a problem hiding this comment.
It seems your npm is not up-to-date. Are you using the devcontainer or your local Node environment?
There was a problem hiding this comment.
Nope 👀 sorry haha, will do
app/src/components/title.tsx
Outdated
|
|
||
| return ( | ||
| <div className="flex items-center"> | ||
| <div className={linesClassNames} /> |
There was a problem hiding this comment.
Info: what does this div do? I see that they are both before and after the h1.
There was a problem hiding this comment.
Only for visual, as in the figma component for titles.
package-lock.json
Outdated
| "lockfileVersion": 3, | ||
| "requires": true, | ||
| "packages": { | ||
| "": { | ||
| "devDependencies": { | ||
| "@commitlint/cli": "^17.4.4", | ||
| "@commitlint/config-conventional": "^17.4.4", | ||
| "@trivago/prettier-plugin-sort-imports": "^4.1.0", | ||
| "husky": "^8.0.0", | ||
| "prettier": "2.8.4" | ||
| } | ||
| }, | ||
| "node_modules/@babel/code-frame": { | ||
| "version": "7.18.6", | ||
| "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", | ||
| "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==", | ||
| "dev": true, | ||
| "dependencies": { | ||
| "@babel/highlight": "^7.18.6" | ||
| }, | ||
| "engines": { | ||
| "node": ">=6.9.0" | ||
| "lockfileVersion": 1, | ||
| "dependencies": { |
There was a problem hiding this comment.
Same comment regarding the npm version. With a set of changes that does not change the dependencies (i.e. package.json), the package-lock normally shouldn't change. Let's investigate together next time we meet 👍
|
By the way @NoeTerrier @Thechi2000 @SidonieBouthors have a look at: I was reluctant about setting up this additional tool since it's a bit of overhead for newcomers, but I think the work is actually minimal and we will be able to visualize the changes much faster. I already assigned myself since I'm familiar with it, but we can discuss this next time we meet. |
Thechi2000
force-pushed
the
32-add-react-components
branch
from
ee307fb
to
841335a
Compare
|
The commits I pushed are using the Strapi schema from #42 |
NoeTerrier
force-pushed
the
32-add-react-components
branch
from
a0fd172
to
c6d588b
Compare
close #32
Create first simple nextjs component of the app