Rules page #60
Rules page #60
Conversation
| @@ -0,0 +1,15 @@ | |||
| import { rulesMockdata } from '@/mock-data/rules'; | |||
|
|
|||
| export default function SubPage({ | |||
There was a problem hiding this comment.
Maybe RuleSubsetPage as the name?
| const page = rulesMockdata.find( | ||
| (rule) => rule.id === Number.parseInt(subset), | ||
| ); | ||
| if (!page) return null; |
There was a problem hiding this comment.
Instead of returning an empty page, please use notFound to return a 404 page instead
| return ( | ||
| <> | ||
| <div className='p-4 text-center'> | ||
| <h1>{t('title')}</h1> |
There was a problem hiding this comment.
Perhaps remove the border from the bottom, so it doesn't overlay with the ruleset button below
There was a problem hiding this comment.
I just looked at the code right now, but I also think the styling can be improved. Maybe look at some other websites or examples and try to get inspiration. Also you can look at more "fancy" components to add to learn about that and it can be fun to work on, like aceturnity etc
|
|
||
| export default function SubPage({ | ||
| params: { subset }, | ||
| }: { params: { subset: string } }) { |
There was a problem hiding this comment.
every single page and layout needs the unstable_setRequestLocale, including this one. It allows for static generation of pages
| }: RulesLayoutProps) { | ||
| unstable_setRequestLocale(locale); | ||
|
|
||
| return <>{children}</>; |
There was a problem hiding this comment.
The layout is not needed if it is empty and not doing anything. But it should be doing something. I would insert the title here and move the page into a route group. Also you need a loading.tsx for the rulesPage, that can then be inside this route group
|
|
||
| return ( | ||
| <> | ||
| <div className='p-4 text-center'> |
There was a problem hiding this comment.
why not put these classes on the h1 directly instead of on a div around it? Also mke sure the text has the same styles as on other pages for consistancy
| <div className='xs:w-full sm:w-full md:w-1/2'> | ||
| <h2 className='text-center'>{t('forEveryone')}</h2> | ||
| {notInternal.map((rule) => ( | ||
| <SubPages |
There was a problem hiding this comment.
This is just me being picky, but I think calling a component for something related to page is confusing when it isnt a page. maybe call it RuleCard or RuleLink etc... just suggestions
| function SubPages({ className, id, internal, title, photoUrl }: SubPagesProps) { | ||
| return ( | ||
| <Link | ||
| href={{ |
There was a problem hiding this comment.
When putting a link around something and it doesnt have text it needs an aria-label that explains what it does. I think, this may be wrong other places in the app too, maybe we should look into this
| params: { subset: id }, | ||
| }} | ||
| > | ||
| <div className='mx-auto mb-3 flex min-h-[3.18rem] min-w-[20rem] max-w-2xl transform rounded-xl border transition delay-150 duration-300 ease-in-out hover:scale-105 hover:shadow-lg'> |
There was a problem hiding this comment.
avoid using arbitrary values in the styling if not for a very good reasin. like the min-h and min-w here
| /> | ||
| ))} | ||
| </div> | ||
| <div className='xs:w-full sm:w-full md:w-1/2'> |
There was a problem hiding this comment.
here sm: style can be remove as it is covered by the xs prop before it
| /> | ||
| )} | ||
| </div> | ||
| <div className='flex w-3/4 items-center justify-center'> |
There was a problem hiding this comment.
is this div needed, i am not sure i thing an mx-auto could make it redundant
There was a problem hiding this comment.
Get rid of this file, it comes from doing npm install, but we only need the lock file from bun
First attempt at creating rules page, open for reviews and suggestions.
Created rules page, necessary mock-data and components, and routing to subpages,
Have only implemented a temporary 'design' of how I want the page to look. Don't think i used the proper approach to using components and/or creating components. Would therefore like suggestions on how i could improve or refractor the actual code, current design of the page, improper use of tailwind properties, or any other areas of improvements.
Closes #18.