feat: Add random monkeyuser comic api

src/contributor/index.js

@@ -1,21 +1,22 @@
-import RandomFoxImage from "./random-fox-image";
-import RandomCatImage from "./random-cat-image";
-import RandomTechImages from "./random-tech-images";
-import RandomPokemonImage from "./random-pokemon-image";
-import RandomUnsplashImage from "./random-unsplash-image";
-import RandomPicsumImage from "./random-picsum-image";
-import RandomGrayscaleImage from "./random-grayscale-image";
-import RandomImageUnsplash from "./random-image-unsplash";
-import RandomLoremPixelImage from "./random-lorem-pixel-image";
-import RandomAnswerImage from "./random-answer-image";
-import RandomDogImage from "./random-dog-image";
-import RandomMemeImage from "./random-meme-image";
-import RandomUserProfile from "./random-user-profile";
-import RandomKanji from "./random-kanji";
-import RandomPixelMonstersImage from "./random-pixel-monsters-image";
-import RandomAiArtImage from "./random-ai-art";
-import RandomQuotesApi from "./random-quote";
-import RandomRobotImage from "./random-robot-image";
+import RandomFoxImage from './random-fox-image';
+import RandomCatImage from './random-cat-image';
+import RandomTechImages from './random-tech-images';
+import RandomPokemonImage from './random-pokemon-image';
+import RandomUnsplashImage from './random-unsplash-image';
+import RandomPicsumImage from './random-picsum-image';
+import RandomGrayscaleImage from './random-grayscale-image';
+import RandomImageUnsplash from './random-image-unsplash';
+import RandomLoremPixelImage from './random-lorem-pixel-image';
+import RandomAnswerImage from './random-answer-image';
+import RandomDogImage from './random-dog-image';
+import RandomMemeImage from './random-meme-image';
+import RandomUserProfile from './random-user-profile';
+import RandomKanji from './random-kanji';
+import RandomPixelMonstersImage from './random-pixel-monsters-image';
+import RandomAiArtImage from './random-ai-art';
+import RandomQuotesApi from './random-quote';
+import RandomRobotImage from './random-robot-image';
+import RandomMonkeyUserComic from './random-monkeyuser';
 
 export const data_contributor = [
   RandomFoxImage,
@@ -35,5 +36,6 @@ export const data_contributor = [
   RandomPixelMonstersImage,
   RandomAiArtImage,
   RandomQuotesApi,
-  RandomRobotImage
+  RandomRobotImage,
+  RandomMonkeyUserComic,
 ];

src/contributor/random-monkeyuser.js

@@ -0,0 +1,42 @@
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { Card } from '../components';
+
+const RandomMonkeyUserComic = () => {
+  const url = 'https://monkeyuser-api-ridvanaltun.vercel.app/api/comics/random';
+  const [image, setImage] = useState([]);
+  const [isLoading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    const fetchData = async () => {
+      const { data } = await axios.get(url);
+
+      setImage(data.image_url);
+      setLoading(false);
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <Card
+      data={{
+        username: 'arifwidianto08',
+        avatar: 'https://github.com/arifwidianto08.png',
+        apiUrl:
+          'https://monkeyuser-api-ridvanaltun.vercel.app/api/comics/random',
+        apiName: 'random-monkeyuser-api',
+        apiDescription: 'Random monkeyuser comic strip',
+      }}
+    >
+      {isLoading ? (
+        <p className='text-m my-3 text-center'>Loading...</p>
+      ) : (
+        <img className='rounded-sm pt-2' src={image} alt='techImage' />
+      )}
+    </Card>
+  );
+};
+
+export default RandomMonkeyUserComic;