Skip to content

Feat: Added MetricCard component and updated routes #145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
md-jasim123 wants to merge 1 commit into from
Closed

Feat: Added MetricCard component and updated routes #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import MetricCard from "./components/MetricCard";
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Remove unused import.

The MetricCard component is imported but never used in this file. Since it's properly utilized in the Metrics page component, this import should be removed.

-import MetricCard from "./components/MetricCard";
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import MetricCard from "./components/MetricCard";
🤖 Prompt for AI Agents 
In src/App.tsx at line 1, the MetricCard component is imported but not used
anywhere in the file. Remove the import statement for MetricCard to clean up
unused code and avoid unnecessary imports.

import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import ScrollProgressBar from './components/ScrollProgressBar';
Expand Down
5 changes: 5 additions & 0 deletions src/Routes/Router.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@

import Metrics from "../components/MetricCard.tsx";
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix incorrect import path for Metrics component.

The import is trying to import Metrics from the MetricCard.tsx file, which will cause a runtime error. It should import from the actual Metrics page component.

-import Metrics from "../components/MetricCard.tsx";
+import Metrics from "../page/Metrics/Metrics";
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import Metrics from "../components/MetricCard.tsx";
-import Metrics from "../components/MetricCard.tsx";
+import Metrics from "../page/Metrics/Metrics";
🤖 Prompt for AI Agents 
In src/Routes/Router.tsx at line 2, the import statement incorrectly imports
Metrics from "../components/MetricCard.tsx". Update the import path to point to
the correct Metrics page component file instead of MetricCard.tsx to prevent
runtime errors.

import { Navigate, Route, Routes } from "react-router-dom";

import Home from "../pages/Home/Home"; // Import the Home component
Expand All @@ -7,6 +9,7 @@ import Contributors from "../pages/Contributors/Contributors";
import Signup from "../pages/Signup/Signup.tsx";
import Login from "../pages/Login/Login.tsx";
import UserProfile from "../pages/UserProfile/UserProfile.tsx";
import MetricCard from "../components/MetricCard.tsx";
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Remove unused MetricCard import.

The MetricCard component is imported but not used in the routing configuration since it's used within the Metrics page component.

-import MetricCard from "../components/MetricCard.tsx";
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import MetricCard from "../components/MetricCard.tsx";
// src/Routes/Router.tsx
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Dashboard from "../pages/Dashboard.tsx";
import Metrics from "../pages/Metrics.tsx";
import Settings from "../pages/Settings.tsx";
import Profile from "../pages/Profile.tsx";
// import MetricCard from "../components/MetricCard.tsx"; ← removed unused import
🤖 Prompt for AI Agents 
In src/Routes/Router.tsx at line 12, the MetricCard component is imported but
not used anywhere in this file. Remove the import statement for MetricCard to
clean up unused imports and avoid unnecessary code inclusion.


const Router = () => {
return (
Expand All @@ -20,6 +23,8 @@ const Router = () => {
<Route path="/home" element={<Home />} />
<Route path="/contributors" element={<Contributors />} />
<Route path="/user/:username" element={<UserProfile />} />

<Route path="/metrics" element={<Metrics />} />
</Routes>
);
};
Expand Down
26 changes: 26 additions & 0 deletions src/components/MetricCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@

import React from "react";

function MetricCard({ username="md-jasim123" }) {
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add TypeScript interface for component props.

The component is missing TypeScript type definitions for its props, which reduces type safety and IDE support.

+interface MetricCardProps {
+  username?: string;
+}
+
-function MetricCard({ username="md-jasim123" }) {
+function MetricCard({ username = "md-jasim123" }: MetricCardProps) {
🤖 Prompt for AI Agents 
In src/components/MetricCard.tsx at line 4, the MetricCard component lacks
TypeScript type definitions for its props. Define a TypeScript interface
specifying the expected prop types, including username as a string, and update
the component's parameter to use this interface for better type safety and IDE
support.

const ProfileUrl = `https://metrics.lecoq.io/${username}`;
return (
<div className="flex justify-center mt-10">
<div className="bg-white shadow-md p-8 rounded-lg text-center">
<h2 className="text-2xl font-semibold mb-4">GitHub Metric</h2>
<p className="mb-4">
Click the button below to view the Github metrics of <strong>{username}</strong>
</p>
<a
href={ProfileUrl}
target="_blank"
rel="noopener noreferrer"
className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
View Metrics
</a>
</div>
</div>
)
}

export default MetricCard;
14 changes: 14 additions & 0 deletions src/page/Metrics/Metrics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from "react";

import MetricCard from "../../components/MetricCard";

const Metrics: React.FC = () => {
return (
<div className="mt-10 flex justify-center">
<MetricCard />
</div>
);

};

export default Metrics;