feat: create header, categoryBar, and categoryButton components #9

gurtatiLND · 2024-11-27T14:53:10Z

What type of PR is this? (check all applicable)

Description

1. Header Component

Adds a Header component with:
- An app name (<h1>) and a question mark button on the left (reserved for future functionality).
- An image on the right side.
- Full integration of the reusable ImageComponent into the Header.
- Ensuring compatibility with the latest next/image API.
- Adding explicit parent dimensions for proper fill behavior.

2. Styling Improvements

Refactors long Tailwind class strings into reusable variables for cleaner and more maintainable styling.

3. Create and then Delete CategoryButton Component

4. CategoryBar Component

Implements a CategoryBar component that uses the Button component to render a list of category buttons dynamically and now they can be chosen

5. Global CSS Updates

Adds a reusable header class in global.css with:
- background: Defines the header background styling.
- border-bottom: Adds a bottom border to the header for visual separation.

6. Create ImageComponent:

Refactored to align with the updated next/image API:
- Replaced legacy properties like objectFit with style={{ objectFit: 'cover' }}.
- Added support for the sizes prop to enhance image loading efficiency.
Implemented conditional styling for rounded images via the rounded prop.

Screenshots

UI accessibility checklist

If your PR includes UI changes, please utilize this checklist:

Semantic HTML implemented?
Checked with axe DevTools and addressed Critical and Serious issues?
Color contrast tested?

Added/updated tests?

Please aim to keep the code coverage percentage at 80% and above.

Yes
No, and this is why: I still don't have(don't know how) any test in my code
I need help with writing tests

What gif best describes this PR or how it makes you feel?

maxitect

Suggest a few minor changes and discussion points

src/ui/CategoryBar/CategoryButtons.tsx

src/ui/layout/Header.tsx

maxitect · 2024-11-27T15:38:14Z

src/ui/CategoryBar/CategoryBar.tsx

+  overflow-x-auto bg-[#1b192e] border-b 
+  border-gray-700 sm:gap-6 sm:px-6`;
+
+const CategoryBar: React.FC = () => {


Suggested change

const CategoryBar: React.FC = () => {

const CategoryBar = () => {

I believe React.FC types are no longer required (meaning you don't need to import React either)

@gurtatiLND can you make a decision to commit this or not commit with a comment explaining why please :)

src/ui/layout/Header.tsx

maxitect

Sorry a few more changes, I think there are a few instances of redundant comments, I've marked them up and you can commit them directly from github if you agree. Also there is a merge conflict that needs to be resolved, as soon as those are all addressed I can approve and merge! :)

maxitect · 2024-11-27T17:59:29Z

src/ui/CategoryBar/CategoryBar.tsx

+  overflow-x-auto bg-[#1b192e] border-b 
+  border-gray-700 sm:gap-6 sm:px-6`;
+
+const CategoryBar: React.FC = () => {


@gurtatiLND can you make a decision to commit this or not commit with a comment explaining why please :)

maxitect · 2024-11-27T18:02:38Z

src/ui/CategoryBar/CategoryBar.tsx

+    // Toggle category selection
+    if (category === 'All') {
+      setSelectedCategories(['All']); // Reset to "All"
+    } else {
+      setSelectedCategories(
+        (prev) =>
+          prev.includes(category)
+            ? prev.filter((c) => c !== category) // Remove if already selected
+            : [...prev.filter((c) => c !== 'All'), category] // Add new category, deselect "All"


Do we need these comments? Suggest removing as they seem redundant

Suggested change

// Toggle category selection

if (category === 'All') {

setSelectedCategories(['All']); // Reset to "All"

} else {

setSelectedCategories(

(prev) =>

prev.includes(category)

? prev.filter((c) => c !== category) // Remove if already selected

: [...prev.filter((c) => c !== 'All'), category] // Add new category, deselect "All"

if (category === 'All') {

setSelectedCategories(['All']);

} else {

setSelectedCategories(

(prev) =>

prev.includes(category)

? prev.filter((c) => c !== category)

: [...prev.filter((c) => c !== 'All'), category]

maxitect · 2024-11-27T18:03:10Z

src/ui/layout/Header.tsx

+          Things We Do
+        </h1>
+        <Button
+          label="?" // The button text


Suggested change

label="?" // The button text

label="?"

redundant comment

maxitect · 2024-11-27T18:03:37Z

src/ui/layout/Header.tsx

+      </div>
+
+      {/* Right side: Image */}
+      <div className="relative w-10 h-10 sm:w-12 sm:h-12"> {/* Explicit dimensions */}


Suggested change

<div className="relative w-10 h-10 sm:w-12 sm:h-12"> {/* Explicit dimensions */}

<div className="relative w-10 h-10 sm:w-12 sm:h-12">

redundant comment

maxitect · 2024-11-27T18:04:09Z

src/ui/layout/Header.tsx

+          src="/icons/dummy_img.png"
+          alt="Logo"
+          sizes="(max-width: 768px) 100vw, 50vw"
+          rounded={false} // Set to true for rounded images


Suggested change

rounded={false} // Set to true for rounded images

rounded={false}

redundant comment (the parameter is already called "rounded")

maxitect · 2024-11-27T18:04:57Z

src/ui/shared/Button.tsx

+    label: string; // The text displayed on the button
+    onClick?: () => void; // Optional: Click handler
+    className?: string; // Optional: Additional Tailwind or custom classes
+    ariaPressed?: boolean; // Optional: For accessibility


Suggested change

label: string; // The text displayed on the button

onClick?: () => void; // Optional: Click handler

className?: string; // Optional: Additional Tailwind or custom classes

ariaPressed?: boolean; // Optional: For accessibility

label: string;

onClick?: () => void;

className?: string;

ariaPressed?: boolean;

redundant comments - these parameters are well named and self-explanatory :)

maxitect · 2024-11-27T18:05:37Z

src/ui/shared/Image.tsx

+        fill // Makes the image responsive
+        sizes={sizes}
+        style={{ objectFit: 'cover' }} // Ensures proper scaling


Suggested change

fill // Makes the image responsive

sizes={sizes}

style={{ objectFit: 'cover' }} // Ensures proper scaling

fill

sizes={sizes}

style={{ objectFit: 'cover' }}

possibly redundant comments

feat: create header, categoryBar, and categoryButton components

75a1e9b

gurtatiLND requested review from maxitect and jackcasstlesjones as code owners November 27, 2024 14:53

maxitect requested changes Nov 27, 2024

View reviewed changes

feat: create button, image components and change categoryBar

0e332ee

gurtatiLND requested a review from maxitect November 27, 2024 17:50

maxitect requested changes Nov 27, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: create header, categoryBar, and categoryButton components #9

feat: create header, categoryBar, and categoryButton components #9

gurtatiLND commented Nov 27, 2024 •

edited

Loading

maxitect left a comment

maxitect Nov 27, 2024

maxitect Nov 27, 2024

maxitect left a comment

maxitect Nov 27, 2024

maxitect Nov 27, 2024

maxitect Nov 27, 2024

maxitect Nov 27, 2024

maxitect Nov 27, 2024

maxitect Nov 27, 2024

maxitect Nov 27, 2024

	const CategoryBar: React.FC = () => {
	const CategoryBar = () => {

	<div className="relative w-10 h-10 sm:w-12 sm:h-12"> {/* Explicit dimensions */}
	<div className="relative w-10 h-10 sm:w-12 sm:h-12">

	rounded={false} // Set to true for rounded images
	rounded={false}

feat: create header, categoryBar, and categoryButton components #9

Are you sure you want to change the base?

feat: create header, categoryBar, and categoryButton components #9

Conversation

gurtatiLND commented Nov 27, 2024 • edited Loading

What type of PR is this? (check all applicable)

Description

1. Header Component

2. Styling Improvements

3. Create and then Delete CategoryButton Component

4. CategoryBar Component

5. Global CSS Updates

6. Create ImageComponent:

Screenshots

UI accessibility checklist

Added/updated tests?

What gif best describes this PR or how it makes you feel?

maxitect left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maxitect left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gurtatiLND commented Nov 27, 2024 •

edited

Loading