gh-activity-card v1.0.3

gh-activity-card

gh-activity-card is a React component that displays a user's recent GitHub activity in a card format. It's built with Next.js.

Features

• Recent Activity: Showcases the latest public events from a specified GitHub user from 01/01/2024 -- 26/12/2024.
• Responsive Design: Ensures compatibility across various device sizes.
• Customizable: Allows for styling adjustments to match your application's theme.

Installation

Install the package using npm:

npm install gh-activity-card

Or with yarn:

yarn add gh-activity-card

Usage

First, import the component into your React application:

import GhActivityCard from "gh-activity-card/components/gh-activity-card";

Then, use the component in your JSX:

function App() {
  return (
    <div>
      <GhActivityCard
        username="kashyap1ankit"
        colorScheme={{
          light: ["red", "red", "red", "red", "red"],
          dark: ["white", "white", "white", "white", "white"],
        }}
        colorTheme="light"
        errorClassName="text-red-500"
        className="border-2  mt-2"
      />
      <GhActivityCard username="kashyap1ankit" />
    </div>
  );
}

Replace "kashyap1ankit" with the GitHub username whose activity you want to display.

Props

Styling

The component uses Geist UI for styling. You can customize the appearance by overriding the default styles or by providing your own CSS classes.

Development

To contribute or modify the component, follow these steps:

1. Clone the repository:

   git clone https://github.com/Kashyap1ankit/gh-activity-card.git

2. Navigate to the project directory:

   cd gh-activity-card

3. Install dependencies:

   pnpm install

4. Run the development server:

   pnpm run dev

5. Open http://localhost:3000 to see the component in action.

License

This project is licensed under the MIT License.

Acknowledgements

• Next.js
• GitHub REST API

For any issues or feature requests, please open an issue on the GitHub repository.