https://github.com/abhinav0115/topup-component
Auto Top-up feature for your account. Never run out of credits. Setup Auto Top-up and we will auto-purchase credits for you.
https://github.com/abhinav0115/topup-component
javascript material-ui nextjs reactjs slider-component tailwind-css typescript
Last synced: 3 months ago
JSON representation
Auto Top-up feature for your account. Never run out of credits. Setup Auto Top-up and we will auto-purchase credits for you.
- Host: GitHub
- URL: https://github.com/abhinav0115/topup-component
- Owner: Abhinav0115
- Created: 2024-05-08T05:11:43.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-08T05:16:27.000Z (about 2 years ago)
- Last Synced: 2025-03-14T16:43:18.014Z (over 1 year ago)
- Topics: javascript, material-ui, nextjs, reactjs, slider-component, tailwind-css, typescript
- Language: TypeScript
- Homepage: https://topup-component.vercel.app/
- Size: 46.9 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## This is a Material-UI Auto Top-up Component
Auto Top-up feature for your account. Never run out of credits. Setup Auto Top-up and we will auto-purchase credits for you.
### Getting Started
First, run the development server:
```bash
npm install
npm start
# or
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
### How to Integration with React Application
- Copy the `Components/Top-up.tsx` file to the `Components` folder of the React Application.
- Copy the Material UI custom theme file `Components/theme/MUI-Theme.tsx` to the `theme` folder or file of the React Application.
- If your React Application already has a Material UI custom `theme` file, then, copy individual components from `Components/theme/MUI-Theme.tsx` to that file.
- Now, You can now utilize the Top-up component by directly importing `TopUp` from `Components/Top-up.tsx` in your React Application. Refer to **lines 5 and 13** of `App/page.tsx` for implementation guidance.