pena56

import { useState, useEffect } from 'react';

import './App.css';

import { auth, googleProvider, db } from './firebaseSetting';

function App() {
  const [user, setUser] = useState(null);
  const [todos, setTodos] = useState([]); //new

pena56

import firebase from 'firebase';

const firebaseConfig = {
  apiKey: 'AIzaSyDaOypQYRrifhfEQyLQLMkgcEyCA71W-hI',
  authDomain: 'fir-todo-b730a.firebaseapp.com',
  projectId: 'fir-todo-b730a',
  storageBucket: 'fir-todo-b730a.appspot.com',
  messagingSenderId: '592489376233',
  appId: '1:592489376233:web:b7e878055e78a290ab8378',
  measurementId: 'G-5V8B4JWDFY',

pena56

html {
  background: linear-gradient(
    90deg,
    rgba(2, 0, 36, 1) 18%,
    rgba(9, 9, 121, 1) 62%,
    rgba(0, 212, 255, 1) 100%
  );
}

.App {

pena56

export default function Home() {
  return (
    <div className="container p-3">
      <h3 className="text-center display-4">Welcome to Donator</h3>
      <div className="my-3 row">
        <img
          className="img-thumbnail col-md-5"
          alt="sasuke"
          src="/sasuke.jpg"
        />

pena56

export default function Success() {
  return (
    <div className="container p-3">
      <h3 className="display-5 text-center">
        Kakashi Appreciates your Donation
      </h3>
      <img className="fluid d-block mx-auto" alt="thanks" src="/thanks.gif" />
    </div>
  );
}

pena56

import axios from 'axios';

export const initializePayment = (email, name, amount) => {
  let promise = new Promise(function (resolve, reject) {
    axios({
      method: 'post',
      url: 'https://api.paystack.co/transaction/initialize',
      headers: {
        Authorization: `Bearer ${process.env.NEXT_PUBLIC_PAYSTACK_API_SECRET}`,
        'Content-Type': 'application/json',

pena56

import { useState, useEffect, useCallback } from 'react';

function useFetch(page) {
  const [loading, setLoading] = useState(false);
  const [photos, setPhotos] = useState([]);

  const getPhotos = useCallback(async () => {
    try {
      setLoading(true);
      const response = await fetch(

pena56

import { useState, useRef, useCallback, useEffect } from 'react';

function useInfiniteScroll() {
  const [page, setPage] = useState(1);
  const loadMoreRef = useRef(null);

  const handleObserver = useCallback((entries) => {
    const [target] = entries;
    if (target.isIntersecting) {
      setPage((prev) => prev + 1);

pena56

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  color: #ff6600;
  background-color: #121212;
}

pena56

import './Loader.module.css';

function Loader() {
  return (
    <div className="lds-ring">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>