You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
1. Icon usage
Currently, react-icons are used in the Banner component but not in the Card.
It would be great to provide a consistent icon strategy across components, or ideally, allow users to pass in their own icon component as a prop, especially since the component files come from the package and aren’t stored locally.
2. Utilizing existing Flowbite components
In some components (for example, the Drawer, it looks like parts of the UI are being built from scratch rather than reusing other existing flowbite-react components. Refactoring these to use internal components could help maintain visual and behavioral consistency and reduce duplicated code.
3. Using <a> and routing
In several components, <a> tags are used in many places. Even when we need routing with Next.js <Link> components. Since <Link> already renders an <a> element, wrapping another <a> inside it leads to invalid nested anchors.
A dedicated wrapper component may solve this and handle both standard links and client-side navigation safely.
4. Next.js-specific syntax in Navbar
The navbar examples use Next.js-specific behavior like prefetching, which may confuse users of React Router or other environments, since passing href doesn’t work there. It might be worth clarifying framework-specific examples or providing framework-agnostic alternatives.
Additionally, the active prop on NavbarLink currently needs to be set manually — it doesn’t react to the current route. Using something like active={location.pathname === "/"} in React Router makes it dynamic.
Summary
These points mainly focus on:
improving internal component reuse,
avoiding redundant HTML nesting,
clarifying framework-specific usage,
and providing a more flexible and consistent developer experience.
the text is actually enhanced by an ai, what i actually wrote is smth like this,
icons: react icons is being used in banner but not in card. another thing is giving user the access to choose whatever icon they want (if possible). as the component files are coming from the node packages and not storing locally.
utilizing components: in some of the components (e.g., drawer) it could have used another component from flowbite-react but instead it is created from scratch.
using a tags: afaik, if routing is tag is used (with routing) it already creates an tag. so, if we wrap an tag with it just duplicates tag and i have seen it used in lots of places including to make a button. i think, a special component should be used to handle this kind of scenario which we can use for both purposes.
nextjs specific syntax: in navbar component the routing it used is focused on nextjs prefetching, which may cause a bit confusion between react router users. because passing the path to href doesn't work. also the active key is currently manual it will not change the color based on which page we are currently on. i tried using something like active={location.pathname === "/"} which makes it dynamic.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
1. Icon usage
Currently, react-icons are used in the Banner component but not in the Card.
It would be great to provide a consistent icon strategy across components, or ideally, allow users to pass in their own icon component as a prop, especially since the component files come from the package and aren’t stored locally.
2. Utilizing existing Flowbite components
In some components (for example, the Drawer, it looks like parts of the UI are being built from scratch rather than reusing other existing flowbite-react components. Refactoring these to use internal components could help maintain visual and behavioral consistency and reduce duplicated code.
3. Using
<a>
and routingIn several components,
<a>
tags are used in many places. Even when we need routing with Next.js<Link>
components. Since<Link>
already renders an<a>
element, wrapping another<a>
inside it leads to invalid nested anchors.A dedicated wrapper component may solve this and handle both standard links and client-side navigation safely.
4. Next.js-specific syntax in Navbar
The navbar examples use Next.js-specific behavior like prefetching, which may confuse users of React Router or other environments, since passing
href
doesn’t work there. It might be worth clarifying framework-specific examples or providing framework-agnostic alternatives.Additionally, the
active
prop onNavbarLink
currently needs to be set manually — it doesn’t react to the current route. Using something likeactive={location.pathname === "/"}
in React Router makes it dynamic.Summary
These points mainly focus on:
the text is actually enhanced by an ai, what i actually wrote is smth like this,
icons: react icons is being used in banner but not in card. another thing is giving user the access to choose whatever icon they want (if possible). as the component files are coming from the node packages and not storing locally.
utilizing components: in some of the components (e.g., drawer) it could have used another component from flowbite-react but instead it is created from scratch.
using a tags: afaik, if routing is tag is used (with routing) it already creates an tag. so, if we wrap an tag with it just duplicates tag and i have seen it used in lots of places including to make a button. i think, a special component should be used to handle this kind of scenario which we can use for both purposes.
nextjs specific syntax: in navbar component the routing it used is focused on nextjs prefetching, which may cause a bit confusion between react router users. because passing the path to href doesn't work. also the active key is currently manual it will not change the color based on which page we are currently on. i tried using something like active={location.pathname === "/"} which makes it dynamic.
Beta Was this translation helpful? Give feedback.
All reactions