pena56

.image-card {
  display: inline-block;
  margin: 1em 1em 1em;
  width: 100%;
  background-color: #1e1e1e;
  border-radius: 20px;
}

img {
  width: 100%;

pena56

import './PhotoCard.module.css';

function index({ photo }) {
  return (
    <div className="image-card">
      <img alt={photo.author} src={photo.download_url} />
      <p>{photo.author}</p>
    </div>
  );
}

pena56

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;

pena56

import './Loader.module.css';

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

pena56

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

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

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

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 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

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

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"
        />