feature/add-404-not-found-page

[rohit3171999]

Description

This pull request introduces a new, reusable NotFound component. This component is designed to be a flexible and customizable way to display "not found" (e.g., 404) pages or other general error states to the user. It includes a title, a message, and a call-to-action button, all of which can be configured via props.

Type of Change

• New feature
• Bug fix
• Refactoring
• Documentation update
• Test addition/update

Changes Made

• Created the NotFound.tsx component file.
• Implemented a functional React component that accepts title, message, cardButtonLabel, and onButtonClick as props.
• Styled the component using Tailwind CSS for a centered, responsive layout.
• Added comprehensive JSDoc comments to document the component's purpose, props, and provide a clear usage example.

Testing Done

• All tests pass
• Added new tests
• Manual testing completed
  • Verified that the component renders correctly with different prop values.
  • Confirmed the onButtonClick handler is triggered when the button is clicked.
  • Checked the layout on different screen sizes to ensure it remains centered and responsive.

Screenshots (if applicable)

A screenshot of the NotFound component rendered in the browser.

Related Issues

Closes #issue_number (if applicable)

Checklist

• Code follows project style guidelines
• Self-review completed
• Comments added for complex logic
• Documentation updated
• No console.log or debugging code
• All tests passing

Summary by CodeRabbit

• New Features
  • Added a "Not Found" error page component with customizable title and message.
  • Optional action button can be shown with a custom label and triggers a provided action when clicked.

[coderabbitai]

Walkthrough

A new NotFound React component and its props interface were added; the component renders a centered title, message, and an optional CTA button that calls a provided click handler.

Changes

Cohort / File(s)	Summary
NotFound component & props src/components/NotFound/NotFound.tsx, src/components/NotFound/NotFoundProps.ts	Added default-exported NotFound React component with signature export default function NotFound(props: NotFoundProps): JSX.Element. Added NotFoundProps interface with title: string, message: string, showButton: boolean, onButtonClick: () => void, and cardButtonLabel: string. Component conditionally renders a CTA button that calls onButtonClick when showButton is true.

Sequence Diagram(s)

sequenceDiagram
    participant U as User
    participant C as NotFound Component
    participant H as onButtonClick handler

    U->>C: Render with props (title,message,showButton,...)
    C->>U: Display title and message
    alt showButton == true
        U->>C: Click CTA button
        C->>H: Invoke onButtonClick()
        H-->>U: Handler action (e.g., navigate)
    else showButton == false
        note right of C #f0f4c3: No CTA rendered
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Areas to spot-check:
  • Prop types and defaulting/validation (if needed)
  • Button click wiring and event typing
  • JSX layout and accessibility attributes (e.g., button semantics, heading levels)

Poem

🐰 A NotFound sign sits neat and bright,
A title, a message, a button for flight.
Click if you dare, or gaze and then roam—
This little rabbit guides users back home. 🥕

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title 'feature/add-404-not-found-page' directly describes the main change in the changeset. The PR adds a reusable NotFound component designed for 404 error pages, which aligns precisely with the title. The title is concise, specific, and clearly communicates the primary objective of the changes.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/add-404-not-found-page

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b964c9d and 8c47661.

📒 Files selected for processing (2)

• src/components/NotFound/NotFound.tsx (1 hunks)
• src/components/NotFound/NotFoundProps.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• src/components/NotFound/NotFoundProps.ts
• src/components/NotFound/NotFound.tsx

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (3)

src/components/NotFound/NotFoundProps.ts (2)

1-1: Add space before opening brace.

The interface declaration is missing a space before the opening brace, which is inconsistent with standard TypeScript formatting conventions.

Apply this diff:

-export default interface NotFoundProps{
+export default interface NotFoundProps {

---

4-4: Add missing semicolon for consistency.

Line 4 is missing a semicolon, while all other property declarations in the interface have semicolons (lines 2, 3, 5, 6).

Apply this diff:

-    showButton: boolean
+    showButton: boolean;

src/components/NotFound/NotFound.tsx (1)

12-18: Update JSDoc example to include showButton prop.

The JSDoc example doesn't demonstrate the showButton prop, which may confuse developers about its purpose and usage.

Apply this diff to include the showButton prop in the example:

  * @example
  * <NotFound
  *   title="404 - Page Not Found"
  *   message="Sorry, the page you are looking for does not exist."
+ *   showButton={true}
  *   cardButtonLabel="Go to Homepage"
  *   onButtonClick={() => navigate('/')}
  * />

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c40bb0e and b964c9d.

📒 Files selected for processing (2)

• src/components/NotFound/NotFound.tsx (1 hunks)
• src/components/NotFound/NotFoundProps.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/NotFound/NotFound.tsx (1)

src/components/NotFound/NotFoundProps.ts (1)

• NotFoundProps (1-7)

[dbc2201]

Fix the issues caught by CodeRabbit (AI Code Reviewer)

• NotFoundProps.ts
  • -> Add space before opening brace.
    • export default interface NotFoundProps {
  • -> Add missing semicolon for consistency
    • showButton: boolean;
• NotFound.tsx
  • -> Implement conditional button rendering using showButton prop.

[dbc2201]

make changes suggested by CodeRabbit