shimmer-ui

om-priya · Feb 9, 2024 · db862a0 · db862a0
1 parent 374d66d
commit db862a0
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 7 deletions.
diff --git a/LLD/app/src/App.js b/LLD/app/src/App.js
@@ -1,5 +1,12 @@
+import Body from "./components/Body";
+
 function App() {
-  return <div className="text-2xl font-bold">Hello World</div>;
+  return (
+    <div>
+      <div className="text-2xl font-bold">Hello World</div>
+      <Body />
+    </div>
+  );
 }
 
 export default App;
diff --git a/LLD/app/src/components/Body.js b/LLD/app/src/components/Body.js
@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import { MemeCard } from "./MemeCard";
+import Shimmer from "./Shimmer";
+
+const Body = () => {
+  const [memes, setMemes] = useState(null);
+
+  useEffect(() => {
+    fetchMemes();
+  }, []);
+
+  const fetchMemes = async () => {
+    const data = await fetch("https://meme-api.com/gimme/20");
+    const json = await data.json();
+    setMemes(json.memes);
+  };
+
+  return (
+    <div className="flex flex-wrap">
+      {!memes ? (
+        <Shimmer />
+      ) : (
+        memes.map((meme, i) => <MemeCard key={i} data={meme} />)
+      )}
+    </div>
+  );
+};
+export default Body;
diff --git a/LLD/app/src/components/MemeCard.js b/LLD/app/src/components/MemeCard.js
@@ -0,0 +1,10 @@
+export const MemeCard = ({ data }) => {
+  const { url, title, author } = data;
+
+  return (
+    <div className="p-5 m-5 border border-black rounded-lg">
+      <img className="w-64 h-64" alt="meme" src={url} />
+      <p>{author}</p>
+    </div>
+  );
+};
diff --git a/LLD/app/src/components/Shimmer.js b/LLD/app/src/components/Shimmer.js
@@ -0,0 +1,10 @@
+const Shimmer = () => {
+  return Array(15)
+    .fill(0)
+    .map((n, i) => (
+      <div key={i} className="p-5 m-5 border border-black rounded-lg">
+        <div className="w-64 h-64 bg-gray-200"></div>
+      </div>
+    ));
+};
+export default Shimmer;
diff --git a/LLD/app/src/index.js b/LLD/app/src/index.js
@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />