\r\n 
\r\n setModel(false)} />\r\n
\r\n\r\n \r\n {data.map((item, index) => {\r\n return (\r\n getImg(item.imgSrc)}\r\n >\r\n 
\r\n
\r\n )\r\n })}\r\n \r\n \r\n )\r\n}\r\n\r\nexport default Gallery\r\n","import logo from './logo.svg'\nimport './App.css'\nimport Gallery from './Gallery'\n\nfunction App() {\n return (\n \n
\n )\n}\n\nexport default App\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n Image Gallery
\n
+
+
+
+
+
+ )
+}
+
+export default AddPainting
diff --git a/arts-gallery/client/src/components/addPainting/addPainting.css b/arts-gallery/client/src/components/addPainting/addPainting.css
new file mode 100644
index 0000000..e69de29
diff --git a/arts-gallery/client/src/components/editPainting/editPainting.css b/arts-gallery/client/src/components/editPainting/editPainting.css
new file mode 100644
index 0000000..9b6752a
--- /dev/null
+++ b/arts-gallery/client/src/components/editPainting/editPainting.css
@@ -0,0 +1,30 @@
+.create {
+ max-width: 400px;
+ margin: 0 auto;
+ text-align: center;
+}
+.create label {
+ text-align: left;
+ display: block;
+}
+.create h2 {
+ font-size: 20px;
+ color: #f1356d;
+ margin-bottom: 30px;
+}
+.create input {
+ width: 100%;
+ padding: 6px 10px;
+ margin: 10px 0;
+ border: 1px solid #ddd;
+ box-sizing: border-box;
+ display: block;
+}
+.create button {
+ background: #f1356d;
+ color: #fff;
+ border: 0;
+ padding: 8px;
+ border-radius: 8px;
+ cursor: pointer;
+}
diff --git a/arts-gallery/client/src/components/editPainting/editPainting.js b/arts-gallery/client/src/components/editPainting/editPainting.js
new file mode 100644
index 0000000..93fa70f
--- /dev/null
+++ b/arts-gallery/client/src/components/editPainting/editPainting.js
@@ -0,0 +1,92 @@
+import { useEffect, useState } from 'react'
+import { useHistory, useParams } from 'react-router-dom'
+import './editPainting.css'
+const EditPainting = () => {
+ const { id } = useParams()
+ console.log(id)
+ const history = useHistory()
+ const [data, setData] = useState({
+ name: '',
+ artist: '',
+ year: '',
+ paintingImg: '',
+ })
+
+ useEffect(() => {
+ fetch(`http://localhost:8000/api/v1/painting/${id}`)
+ .then((res) => res.json())
+ .then((data) => setData(data))
+ }, [])
+
+ const handleChange = (name, artist, year) => (e) => {
+ const value = name === 'paintingImg' ? e.target.files[0] : e.target.value
+ setData({ ...data, [name]: value, [artist]: value, [year]: value })
+ }
+
+ const handleSubmit = async () => {
+ try {
+ let formData = new FormData()
+ formData.append('paintingImg', data.paintingImg)
+ formData.append('name', data.name)
+ formData.append('artist', data.artist)
+ formData.append('year', data.year)
+
+ const res = await fetch(`http://localhost:8000/api/v1/painting/${id}`, {
+ method: 'PUT',
+ body: formData,
+ })
+ if (res.ok) {
+ setData({ name: '', paintingImg: '', artist: '', year: '' })
+ history.replace('/')
+ }
+ } catch (error) {
+ console.log(error)
+ }
+ }
+
+ return (
+ Add New Painting
+ + + + + + + + + + + +
+
+ )
+}
+
+export default EditPainting
diff --git a/arts-gallery/client/src/components/gallery/Gallery.css b/arts-gallery/client/src/components/gallery/Gallery.css
new file mode 100644
index 0000000..3ea5667
--- /dev/null
+++ b/arts-gallery/client/src/components/gallery/Gallery.css
@@ -0,0 +1,110 @@
+.gallery {
+ /* -webkit-column-count: 3;
+ -moz-column-count: 3; */
+ /* column-count: 3; */
+ /* -webkit-column-width: 33%;
+ -moz-column-width: 33%;
+ column-width: 33%; */
+ padding: 12px;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-evenly;
+}
+
+.title {
+ text-align: center;
+}
+.gallery .image-wrapper {
+ width: 300px;
+ overflow: hidden;
+ box-shadow: 0px 0px 15px -5px;
+ /* padding: 12px; */
+ margin: 20px;
+ text-align: center;
+}
+
+.pics {
+ -webkit-transition: all 350ms ease;
+ transition: all 350ms ease;
+ cursor: pointer;
+ margin-bottom: 12px;
+ overflow: hidden;
+ width: 300px;
+ height: 100%;
+}
+
+.gallery .pics:hover {
+ filter: opacity(0.8);
+}
+
+/* @media (max-width: 991px) {
+ .gallery {
+ -webkit-column-count: 2;
+ -moz-column-count: 2;
+ column-count: 2;
+ }
+}
+
+@media (max-width: 480px) {
+ .gallery {
+ -webkit-column-count: 1;
+ -moz-column-count: 1;
+ column-count: 1;
+ -webkit-column-width: 100%;
+ -moz-column-width: 100%;
+ column-width: 100%;
+ }
+} */
+
+/*model */
+
+.model {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #000000;
+ transition: opacity 0.4s ease, visibility 0.4s ease,
+ transform 0.5s ease-in-out;
+ visibility: hidden;
+ opacity: 0;
+ transform: scale(0);
+ overflow: hidden;
+ z-index: 999;
+}
+
+.model.open {
+ visibility: visible;
+ opacity: 1;
+ transform: scale(1);
+}
+
+.model img {
+ width: auto;
+ max-width: 100%;
+ max-height: 100%;
+ height: auto;
+ display: block;
+ line-height: 0;
+ box-sizing: border-box;
+ padding: 20px 0 20px;
+ margin: 0 auto;
+}
+
+.model.open svg {
+ position: fixed;
+ top: 10px;
+ right: 10px;
+ width: 2rem;
+ height: 2rem;
+ padding: 5px;
+ background-color: rgba(0, 0, 0, 0.4);
+ color: #ffffff;
+ cursor: pointer;
+}
diff --git a/arts-gallery/client/src/components/gallery/Gallery.js b/arts-gallery/client/src/components/gallery/Gallery.js
new file mode 100644
index 0000000..105680c
--- /dev/null
+++ b/arts-gallery/client/src/components/gallery/Gallery.js
@@ -0,0 +1,68 @@
+import { Link } from 'react-router-dom'
+import { useEffect, useState } from 'react'
+import './Gallery.css'
+import Modal from '../modal/Modal'
+
+const Gallery = () => {
+ const [paintings, setPaintings] = useState()
+
+ useEffect(() => {
+ const fetchPaintings = async () => {
+ const res = await fetch(`http://localhost:8000/api/v1/painting/`)
+ const data = await res.json()
+ setPaintings(data)
+ }
+ fetchPaintings()
+ }, [])
+
+ const handleDelete = async (id) => {
+ try {
+ const res = await fetch(`http://localhost:8000/api/v1/painting/${id}`, {
+ method: 'DELETE',
+ })
+ if (res.ok) {
+ const updatedPaintings = paintings.filter(
+ (painting) => painting._id !== id
+ )
+ setPaintings(updatedPaintings)
+ }
+ } catch (error) {
+ console.log(error)
+ }
+ }
+
+ return (
+ Edit a Painting
+ + + + + + + + + +
+ {paintings?.map((painting) => (
+
+
+ 
+
+ ))}
+ {painting.name}
+{painting.artist}
+{painting.year}
+
+
+ Edit
+
+
+
+
+
+ )}
+
+ )
+}
diff --git a/arts-gallery/client/src/components/navbar/Navbar.css b/arts-gallery/client/src/components/navbar/Navbar.css
new file mode 100644
index 0000000..2dc719c
--- /dev/null
+++ b/arts-gallery/client/src/components/navbar/Navbar.css
@@ -0,0 +1,21 @@
+.navbar {
+ margin: 20px 50px;
+ height: 20px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ font-family: 'Abril Fatface', cursive;
+}
+
+.homePage {
+ text-decoration: none;
+ color: black;
+ font-size: 36px;
+}
+
+.nav-link {
+ text-decoration: none;
+ color: black;
+ font-size: 20px;
+}
\ No newline at end of file
diff --git a/arts-gallery/client/src/components/navbar/Navbar.js b/arts-gallery/client/src/components/navbar/Navbar.js
new file mode 100644
index 0000000..82de82d
--- /dev/null
+++ b/arts-gallery/client/src/components/navbar/Navbar.js
@@ -0,0 +1,20 @@
+import { Link } from 'react-router-dom'
+import './Navbar.css'
+
+const Navbar = () => {
+ return (
+
+ )
+}
+
+export default Navbar
diff --git a/arts-gallery/client/src/index.css b/arts-gallery/client/src/index.css
new file mode 100644
index 0000000..ec2585e
--- /dev/null
+++ b/arts-gallery/client/src/index.css
@@ -0,0 +1,13 @@
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
diff --git a/arts-gallery/client/src/index.js b/arts-gallery/client/src/index.js
new file mode 100644
index 0000000..29964c9
--- /dev/null
+++ b/arts-gallery/client/src/index.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import reportWebVitals from './reportWebVitals'
+
+ReactDOM.render(
+
+
+