Implement Mobile Device Hook for Media Query in Next.js Application

[CodeDiversity]

Describe the Feature / Enhancement

As a developer, I want to create a hook in my Next.js application that can be used throughout the codebase to identify when a user is accessing the application on a mobile device. This will allow me to conditionally render mobile-specific components or apply appropriate styles based on the user's device. Acceptance Criteria:

1. Create a custom hook, named "useMobileDevice", that detects when the user is on a mobile device.

   • The hook should utilize media queries or device detection techniques to accurately determine whether the user is using a mobile device.
   • The hook should be reusable and easily accessible from any component in the application.

2. The hook should provide a boolean value indicating whether the user is on a mobile device or not.

   • When the hook is used in a component, it should return a boolean value, "isMobile", that represents whether the user is on a mobile device (true) or not (false).
   • The value of "isMobile" should be dynamically updated based on the user's device and any changes in orientation.

Additional Details and Resources

No response

Correct Project Selected

• [X] This issue is linked to the appropriate project.

Correct Label Selected

• [X] This issue has appropriate labels.

Correct Milestone Selected

• [X] This issue has appropriate milestone.

[seidior]

Is there a reason we would need a React hook for this instead of using Tailwind's size classes? By default, Tailwind classes apply mobile-first, then you can use size classes to target medium, large, xl-size displays to render differently for those screen sizes. https://tailwindcss.com/docs/responsive-design

So the only reason why I'd expect we would have a hook for this is if there were some part of the frontend that depended on mobile device features with no fallback, such as device acceleration. Do you expect we will need these, or is it just the conditional styling for mobile that would drive this feature?

[seidior]

Closing this as not planned. @CodeDiversity is tackling this work in issue #30.