Tailwind-React-PixabayAPI

Author: siddhartha0110

.env

@@ -0,0 +1 @@
+REACT_APP_PIXABAYAPI_KEY=16675527-de3deee79ae2af51c97e941bd

package-lock.json

@@ -8,13 +8,16 @@
  "@testing-library/user-event": "^7.2.1",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
+ "react-loading-skeleton": "^2.0.1",
  "react-scripts": "3.4.1"
  },
  "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start": "npm run watch:css && react-scripts start",
+ "build": "npm run build:css && react-scripts build",
  "test": "react-scripts test",
- "eject": "react-scripts eject"
+ "eject": "react-scripts eject",
+ "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
+ "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },
  "eslintConfig": {
  "extends": "react-app"
@@ -30,5 +33,10 @@
  "last 1 firefox version",
  "last 1 safari version"
  ]
+ },
+ "devDependencies": {
+ "autoprefixer": "^9.8.0",
+ "postcss-cli": "^7.1.1",
+ "tailwindcss": "^1.4.6"
  }
 }

package.json

@@ -0,0 +1,8 @@
+const tailwindcss = require('tailwindcss');
+
+module.exports = {
+ plugins: [
+ tailwindcss('./tailwind.js'),
+ require('autoprefixer')
+ ]
+}

postcss.config.js

@@ -1,24 +1,32 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
+import React, { useState, useEffect } from 'react';
+import ImageCard from './components/ImageCard';
+import Skeleton from 'react-loading-skeleton';
+import ImageSearch from './components/ImageSearch';
 function App() {
+ const [images, setImages] = useState([]);
+ const [isLoading, setisLoading] = useState(true);
+ const [term, setTerm] = useState('');
+
+ useEffect(() => {
+ fetch(`https://pixabay.com/api/?key=${process.env.REACT_APP_PIXABAYAPI_KEY}&q=${term}&image_type=photo&pretty=true`)
+ .then(response => response.json())
+ .then(data => {
+ setImages(data.hits);
+ setisLoading(false);
+ })
+ .catch(error => console.log(error))
+ }, [term]);
+
  return (
- <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.js</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
+ <div className="container mx-auto">
+ <ImageSearch textSearch={(text) => setTerm(text)} />
+ {!isLoading && images.length === 0 && <h1 className="text-center text-6xl mx-auto mt-32">No Images Found</h1>}
+ {isLoading ? <Skeleton color="#202020" highlightColor="#444" count={5} />
+ : <div className="grid grid-cols-3 gap-4">
+ {images.map(image => (
+ <ImageCard key={image.id} image={image} />
+ ))}
+ </div>}
  </div>
  );
 }