hloo

.firebase/hosting.cHVibGlj.cache

@@ -1,2 +1,2 @@
-vite.svg,1713955457734,59ec4b6085a0cb1bf712a5e48dd5f35b08e34830d49c2026c18241be04e05d5a
 index.html,1718465250528,8e66b0905c08b14c069e3f9b1b867fafd21e64ef3c62bb98da65a79adcd9e3d0
+vite.svg,1713955457734,59ec4b6085a0cb1bf712a5e48dd5f35b08e34830d49c2026c18241be04e05d5a

firestore.rules

@@ -1,10 +1,7 @@
-rules_version = '2';
-
 service cloud.firestore {
   match /databases/{database}/documents {
     match /{document=**} {
-      allow read, write: if true;
-      }
-
+      allow read, write: if request.auth != null;
+    }
   }
 }

src/components/Blogs.jsx

@@ -1,134 +1,93 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import { db } from "../firebase";
 import { onSnapshot, collection, doc, deleteDoc } from "firebase/firestore";
-import { useEffect, useState } from "react";
 import Navbar from "./Navbar";
-import { Link } from "react-router-dom";
 import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css' 
 
-import 'react-toastify/dist/ReactToastify.css';
 function Blogs() {
-  const handleDelete = async (id) => { 
-    const data = doc(db, 'blog', id);
-
-    toast.warn('Blog deleted successfully!', {
-      position: "top-center",
-      autoClose: 2000,
-      hideProgressBar: false,
-      closeOnClick: true,
-      pauseOnHover: true,
-      draggable: true,
-      progress: undefined,
-      theme: "dark",
-      });
-      setTimeout(async()=>{ 
-        await deleteDoc(data);
-      },2000)
-
-  };
-
   const [data, setData] = useState([]);
 
   useEffect(() => {
     const collectionRef = collection(db, "blog");
     const unsubscribe = onSnapshot(collectionRef, (snapshot) => {
-      setData(
-        snapshot.docs.map((doc) => ({
-          id: doc.id,
-          ...doc.data(),
-        }))
-      );
+      setData(snapshot.docs.map((doc) => ({
+        id: doc.id,
+        ...doc.data(),
+      })));
     });
-    
+
     return () => {
       unsubscribe();
     };
   }, []);
 
-  console.log(data);
+  const handleDelete = async (id) => {
+    const docRef = doc(db, 'blog', id);
+
+    toast.warn('Blog deleted successfully!', {
+      position: "top-center",
+      autoClose: 2000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+      theme: "dark",
+    });
+
+    setTimeout(async () => {
+      await deleteDoc(docRef);
+    }, 2000);
+  };
 
   return (
     <>
-    <ToastContainer
-position="top-center"
-autoClose={5000}
-hideProgressBar={false}
-newestOnTop={false}
-closeOnClick
-rtl={false}
-pauseOnFocusLoss
-draggable
-pauseOnHover
-theme="dark"
-
-/>
+      <ToastContainer />
       <Navbar />
-      {data.map((d) => {
-        return (
-          <div
-            className="container m-3 d-flex justify-content-center"
-            style={{ flexDirection: "column", alignItems: "center" }}
-            key={d.id}
-          >
-            <div className="con">
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "0.5rem",
-                  justifyContent: "center",
-                }}
-              >
-                <img
-                  src={d.authorimg}
-                  alt=""
-                  style={{
-                    height: "2.3vw",
-                    padding: "2px",
-                    borderRadius: "50%",
-                  }}
-                />
-                <h4 style={{ color: "white" }}>{d.authorname}</h4>
-              </div>
-            </div>
-            <div className="card mb-3 " style={{ width: "50%" }}>
-              <div className="row g-0 ">
-                <div className="col-md-4 bg-red">
+      <div className="container mt-4">
+        <div className="row">
+          {data.map((d) => (
+            <div className="col-12 col-md-6 col-lg-4 mb-4" key={d.id}>
+              <div className="card h-100 shadow-sm">
+                <div className="card-header d-flex align-items-center">
                   <img
-                    src={d.iurl}
-                    className="img-fluid rounded-start w-100vw"
-                    style={{
-                      height: "100%",
-                    }}
-                    alt="..."
+                    src={d.authorimg}
+                    alt=""
+                    className="rounded-circle me-2 author-img"
                   />
+                  <h5 className="mb-0 author-name">{d.authorname}</h5>
                 </div>
-                <div className="col-md-8">
-                  <div className="card-body">
-                    <h5 className="card-title">{d.title}</h5>
-                    <p className="card-text">{d.short}</p>
-                    <div
-                      className="d-flex justify-content-center"
-                      style={{ gap: "10%" }}
+                <img
+                  src={d.iurl}
+                  className="card-img-top"
+                  alt="Blog"
+                  style={{ height: "200px", objectFit: "cover" }}
+                />
+                <div className="card-body">
+                  <h5 className="card-title">{d.title}</h5>
+                  <p className="card-text">{d.short}</p>
+                  <div className="d-flex justify-content-between">
+                    <Link to={`/blogs/${d.id}`} className="btn btn-primary">
+                      View more
+                    </Link>
+                    <button
+                      className="btn btn-danger"
+                      onClick={() => handleDelete(d.id)}
                     >
-                      <Link to={`/blogs/${d.id}`} type="button" className="btn btn-primary">
-                        View more
-                      </Link>
-                      <button type="button" id={d.id} className="btn btn-danger" onClick={() => handleDelete(d.id)}>
-                        Delete
-                      </button>
-                    </div>
-                    <p className="card-text">
-                      <small className="text-body-secondary">
-                        Last updated 3 mins ago
-                      </small>
-                    </p>
+                      Delete
+                    </button>
                   </div>
                 </div>
+                <div className="card-footer text-muted">
+                  Last updated 3 mins ago
+                </div>
               </div>
             </div>
-          </div>
-        );
-      })}
+          ))}
+        </div>
+      </div>
     </>
   );
 }

src/components/Login.jsx

@@ -1,40 +1,77 @@
+
 import { useNavigate } from 'react-router-dom';
 import { signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
 import { auth } from '../firebase';
 
 function Login() { 
-  const navigate=useNavigate();
+  const navigate = useNavigate();
+
   const handleGoogle = async (e) => {
     e.preventDefault();  
     try {
       const provider = new GoogleAuthProvider();
       const result = await signInWithPopup(auth, provider);
       console.log(result); 
-      navigate('/blogs')
+      navigate('/blogs');
     } catch (error) {
       console.log(error);
     }
   }
 
   return (
-    <div className="text-center" style={{position:"relative",top:"30vh" ,left:"30vw"}}>
-    <button
-    className="d-flex align-items-center my-5 text-center" style={{backgroundColor:"white",width:"29%" ,justifyConten:"center", gap:"5%",alignItem:"center"}} 
-    onClick={handleGoogle}>
-    <div style={{width:"14%"}}>
-      <img
-        src="https://freelogopng.com/images/all_img/1657955079google-icon-png.png"
-        alt=""
-        style={{ width: "100%" }}
-      />
-    </div>
-    <div>
-      {" "}
-      <h2 style={{fontWeight:"bold",color:"linear-gradient(90deg, #0b131b, #010f1b)"}}>Login with Google</h2>
-    </div>
-  </button>
+    <div style={styles.container}>
+      <button onClick={handleGoogle} style={styles.button}>
+        <div style={styles.iconContainer}>
+          <img
+            src="https://freelogopng.com/images/all_img/1657955079google-icon-png.png"
+            alt="Google icon"
+            style={styles.icon}
+          />
+        </div>
+        <div style={styles.textContainer}>
+          <h2 style={styles.text}>Login with Google</h2>
+        </div>
+      </button>
     </div>
   );
 }
 
+const styles = {
+  container: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100vh',
+  },
+  button: {
+    display: 'flex',
+    alignItems: 'center',
+    backgroundColor: 'white',
+    padding: '10px 20px',
+    border: '2px solid #0b131b',
+    borderRadius: '8px',
+    cursor: 'pointer',
+    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+    transition: 'all 0.3s ease',
+  },
+  iconContainer: {
+    width: '30px',
+    marginRight: '10px',
+  },
+  icon: {
+    width: '100%',
+  },
+  textContainer: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  text: {
+    fontWeight: 'bold',
+    background: 'linear-gradient(90deg, #0b131b, #010f1b)',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+    margin: 0,
+  },
+};
+
 export default Login;

src/index.css

@@ -14,4 +14,61 @@ overflow-x: hidden;
 .navi .btn:hover{
 
 font-size: larger;
-}
+} 
+/* Blogs.css */
+.card-header {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.author-img {
+  height: 40px;
+  width: 40px;
+}
+
+.author-name {
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+.card-title {
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+.card-footer {
+  font-size: 0.875rem;
+}
+
+.card-body {
+  padding: 1rem;
+}
+
+.card-img-top {
+  height: 200px;
+  object-fit: cover;
+}
+
+.card {
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.btn-primary, .btn-danger {
+  flex-grow: 1;
+  margin: 0 0.25rem;
+}
+
+@media (max-width: 768px) {
+  .card-img-top {
+    height: 150px;
+  }
+
+  .card-title {
+    font-size: 1rem;
+  }
+
+  .card-footer {
+    font-size: 0.75rem;
+  }
+}