├── .eslintrc.json
├── .gitignore
├── README.md
├── components
    ├── Banner.js
    ├── BlogCard.js
    ├── EditModal.js
    ├── Footer.js
    ├── Header.js
    └── Layout.js
├── context
    └── AuthContext.js
├── firebase.js
├── images
    ├── Blogify.png
    ├── Me_pic.jpg
    ├── glogo.png
    ├── robot.png
    ├── sample.jpg
    └── shape.png
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── _document.js
    ├── api
    │   └── hello.js
    ├── blog
    │   └── [blogId].js
    ├── create.js
    ├── index.js
    ├── login.js
    ├── userDashboard.js
    └── yourBlogs.js
├── postcss.config.js
├── public
    ├── favicon.ico
    └── vercel.svg
├── recoil
    └── modalAtom.js
├── styles
    └── globals.css
└── tailwind.config.js


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | ```
12 | 
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 | 
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 | 
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 | 
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 | 
21 | ## Learn More
22 | 
23 | To learn more about Next.js, take a look at the following resources:
24 | 
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 | 
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 | 
30 | ## Deploy on Vercel
31 | 
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 | 
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 | 


--------------------------------------------------------------------------------
/components/Banner.js:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import React from "react";
 3 | import { HiUserCircle } from "react-icons/hi";
 4 | import Link from "next/link";
 5 | import { userAuth } from "../context/AuthContext";
 6 | 
 7 | const Banner = () => {
 8 |   const { user } = userAuth();
 9 |   return (
10 |     <>
11 |       <main className="w-full flex items-center max-w-3xl">
12 |         <input
13 |           type="search"
14 |           name="search"
15 |           id="search"
16 |           placeholder="Search..."
17 |           className="border-b border-gray-400 w-full mr-5 outline-none"
18 |         />
19 |         {user ? (
20 |           <Link href="/userDashboard">
21 |             <Image
22 |               src={user?.photoURL}
23 |               width={35}
24 |               height={35}
25 |               alt="User Profile pic"
26 |               className="rounded-full"
27 |             />
28 |           </Link>
29 |         ) : (
30 |           <Link href="/login">
31 |             <HiUserCircle className="text-5xl text-gray-500" />
32 |           </Link>
33 |         )}
34 |       </main>
35 |     </>
36 |   );
37 | };
38 | 
39 | export default Banner;
40 | 


--------------------------------------------------------------------------------
/components/BlogCard.js:
--------------------------------------------------------------------------------
  1 | import { BsThreeDots } from "react-icons/bs";
  2 | import Image from "next/image";
  3 | import { useState } from "react";
  4 | import { userAuth } from "../context/AuthContext";
  5 | import { deleteDoc, doc } from "firebase/firestore";
  6 | import { db } from "../firebase";
  7 | import { useRouter } from "next/router";
  8 | import { useRecoilState } from "recoil";
  9 | import { modalState } from "../recoil/modalAtom";
 10 | 
 11 | const BlogCard = ({
 12 |   blogId,
 13 |   userId,
 14 |   username,
 15 |   content,
 16 |   image,
 17 |   profileImg,
 18 |   title,
 19 |   timestamp,
 20 | }) => {
 21 |   const { user } = userAuth();
 22 |   const [showOptions, setShowOptions] = useState(false);
 23 |   const router = useRouter();
 24 |   const [openModal, setOpenModal] = useRecoilState(modalState);
 25 | 
 26 |   async function deleteBlog() {
 27 |     try {
 28 |       await deleteDoc(doc(db, "blogs", blogId));
 29 |     } catch (error) {
 30 |       console.log(error);
 31 |     }
 32 |   }
 33 | 
 34 |   function handleClick() {
 35 |     router.push({
 36 |       pathname: `/blog/${blogId}`,
 37 |       query: {
 38 |         title,
 39 |         content,
 40 |         username,
 41 |         profileImg,
 42 |         image,
 43 |         timestamp,
 44 |       },
 45 |     });
 46 |   }
 47 | 
 48 |   return (
 49 |     <>
 50 |       <section className="bg-white flex flex-col my-5  mx-1 md:mx-0 max-w-3xl">
 51 |         {/* TOP SECTION */}
 52 |         <div className="flex items-center justify-between px-3 pl-0 py-2 ">
 53 |           <span className="flex space-x-3 items-center">
 54 |             <Image
 55 |               src={profileImg}
 56 |               width={30}
 57 |               height={30}
 58 |               alt="User Profile pic"
 59 |               className="rounded-full"
 60 |             />
 61 |             {/* TO BE REPLACED WITH USERNAME FROM USER OBJECT */}
 62 |             <span className="">{username}</span>
 63 |           </span>
 64 |           <div className="relative">
 65 |             {userId === user?.uid && (
 66 |               <BsThreeDots
 67 |                 className="text-2xl"
 68 |                 onClick={() => setShowOptions(!showOptions)}
 69 |               />
 70 |             )}
 71 |             {showOptions && (
 72 |               <div className="absolute right-0 top-10 bg-gray-100 flex flex-col space-y-2 p-2 rounded-md font-semibold text-gray-500">
 73 |                 <span
 74 |                   onClick={() => {
 75 |                     // console.log(blogId);
 76 |                     setOpenModal({ isOpen: true, blogId: blogId });
 77 |                   }}
 78 |                   className="flex items-center space-x-1 active:scale-105 transition transform duration-150 ease-in-out"
 79 |                 >
 80 |                   <i className="fa-solid fa-pencil duration-200"></i>
 81 |                   <span>Edit</span>
 82 |                 </span>
 83 |                 <span
 84 |                   onClick={deleteBlog}
 85 |                   className="flex items-center space-x-1 text-red-500 active:scale-105 transition transform duration-150 ease-in-out"
 86 |                 >
 87 |                   <i className="fa-solid fa-trash hover:scale-105 hover:animate-pulse"></i>
 88 |                   <span>Delete</span>
 89 |                 </span>
 90 |               </div>
 91 |             )}
 92 |           </div>
 93 |         </div>
 94 |         {/* IMAGES SECTION */}
 95 |         <div onClick={handleClick} className="">
 96 |           <div className="sm:h-[450px] sm:w-[650px] w-[400px] h-[300px]">
 97 |             <img
 98 |               src={image}
 99 |               className="object-cover w-full h-full rounded-lg"
100 |               alt="pic"
101 |             />
102 |           </div>
103 |           <div className="pl-1 py-2">
104 |             <div className="flex">
105 |               <span className="text-xl sm:text-md font-bold  w-[300px] sm:w-[600px] cursor-pointer truncate">
106 |                 {title}
107 |               </span>
108 |             </div>
109 |           </div>
110 |         </div>
111 |       </section>
112 |     </>
113 |   );
114 | };
115 | 
116 | export default BlogCard;
117 | 


--------------------------------------------------------------------------------
/components/EditModal.js:
--------------------------------------------------------------------------------
  1 | import { doc, getDoc, updateDoc, serverTimestamp } from "firebase/firestore";
  2 | import { getDownloadURL, ref, uploadString } from "firebase/storage";
  3 | import React, { useEffect, useRef, useState } from "react";
  4 | import { useRecoilState } from "recoil";
  5 | import { db, storage } from "../firebase";
  6 | import { modalState } from "../recoil/modalAtom";
  7 | import { AiFillCamera } from "react-icons/ai";
  8 | 
  9 | const EditModal = ({ blogId }) => {
 10 |   const [openModal, setOpenModal] = useRecoilState(modalState);
 11 |   const imagePickerRef = useRef(null);
 12 |   const [loading, setLoading] = useState(false);
 13 | 
 14 |   const [title, setTitle] = useState("");
 15 |   const [newTitle, setNewTitle] = useState("");
 16 | 
 17 |   const [content, setContent] = useState("");
 18 |   const [newContent, setNewContent] = useState("");
 19 | 
 20 |   const [selectedFile, setSelectedFile] = useState(null);
 21 |   const [newSelectedFile, setNewSelectedFile] = useState(null);
 22 | 
 23 |   const [message, setMessage] = useState("");
 24 |   const [showCancel, setShowCancel] = useState(false);
 25 | 
 26 |   const handleClose = (e) => {
 27 |     if (
 28 |       e.target.className ===
 29 |       "h-full fixed top-0 left-0 w-full flex flex-col items-center justify-center bg-black bg-opacity-50"
 30 |     ) {
 31 |       setOpenModal(false);
 32 |     }
 33 |   };
 34 | 
 35 |   // ! MAIN FUNCTION
 36 |   async function updatePost(e) {
 37 |     e.preventDefault();
 38 |     if (
 39 |       title === newTitle &&
 40 |       content === newContent &&
 41 |       selectedFile === newSelectedFile
 42 |     ) {
 43 |       setOpenModal(false);
 44 |       return;
 45 |     }
 46 |     try {
 47 |       setMessage("Updating Post");
 48 |       if (loading) return;
 49 |       setLoading(true);
 50 |       // * UPDATE BLOG IN FIREBASE
 51 |       await updateDoc(doc(db, "blogs", blogId), {
 52 |         title: newTitle
 53 |           .split(" ")
 54 |           .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
 55 |           .join(" "),
 56 |         content: newContent,
 57 |         timestamp: serverTimestamp(),
 58 |       });
 59 |       if (newSelectedFile !== selectedFile) {
 60 |         // * getting the image ref for the new image
 61 |         const imageRef = ref(storage, `blogs/${blogId}/image`);
 62 |         // * uploading new image to the imageRef
 63 |         await uploadString(imageRef, newSelectedFile, "data_url").then(
 64 |           async (snapshot) => {
 65 |             const downloadUrl = await getDownloadURL(imageRef);
 66 |             await updateDoc(doc(db, "blogs", blogId), {
 67 |               image: downloadUrl,
 68 |             });
 69 |           }
 70 |         );
 71 |       } else {
 72 |         await updateDoc(doc(db, "blogs", blogId), {
 73 |           image: selectedFile,
 74 |         });
 75 |       }
 76 |       setLoading(false);
 77 |       setNewSelectedFile(null);
 78 |       setNewTitle("");
 79 |       setNewContent("");
 80 |       setOpenModal(false);
 81 |     } catch (error) {
 82 |       console.log(error);
 83 |     }
 84 |   }
 85 | 
 86 |   const addImageToBlog = (e) => {
 87 |     const reader = new FileReader();
 88 |     if (e.target.files[0]) {
 89 |       reader.readAsDataURL(e.target.files[0]);
 90 |     }
 91 |     reader.onload = (readerEvent) => {
 92 |       setNewSelectedFile(readerEvent.target.result);
 93 |     };
 94 |   };
 95 | 
 96 |   useEffect(() => {
 97 |     async function getBlog() {
 98 |       const blogSnap = await getDoc(doc(db, "blogs", blogId));
 99 |       const data = blogSnap.data();
100 |       setTitle(data.title); // ? original data
101 |       setNewTitle(data.title);
102 |       setSelectedFile(data.image); // ? original data
103 |       setNewSelectedFile(data.image);
104 |       setContent(data.content); // ? original data
105 |       setNewContent(data.content);
106 |     }
107 |     getBlog();
108 |   }, []);
109 | 
110 |   return (
111 |     <>
112 |       <section
113 |         onClick={handleClose}
114 |         className="h-full fixed top-0 left-0 w-full flex flex-col items-center justify-center bg-black bg-opacity-50"
115 |       >
116 |         <main className="flex flex-col max-h-[700px] overflow-scroll scrollbar-thin scrollbar-thumb-gray-500 items-center  p-5 rounded-md bg-white">
117 |           <span className="text-3xl text-gray-500 mb-5">Edit Blog</span>
118 |           <form onSubmit={updatePost} className="flex flex-col space-y-10">
119 |             <textarea
120 |               name="title"
121 |               id="title"
122 |               placeholder="Title..."
123 |               value={title}
124 |               onChange={(e) => {
125 |                 setTitle(e.target.value);
126 |               }}
127 |               className="resize-none scrollbar-thin scrollbar-thumb-gray-400 w-full overflow-auto break-words border-b border-gray-400 h-10 outline-none"
128 |             ></textarea>
129 |             {newSelectedFile ? (
130 |               <div className="relative">
131 |                 <img
132 |                   src={newSelectedFile}
133 |                   className="w-[300px] object-contain cursor-pointer rounded-lg"
134 |                   alt="post image"
135 |                 />
136 |                 <span
137 |                   onClick={() => setNewSelectedFile(null)}
138 |                   className="bg-black bg-opacity-30 text-white text-center py-4 font-semibold absolute bottom-0 w-[300px]"
139 |                 >
140 |                   Select another one
141 |                 </span>
142 |               </div>
143 |             ) : (
144 |               <div
145 |                 className="flex items-center space-x-2 cursor-pointer"
146 |                 onClick={() => imagePickerRef.current.click()}
147 |               >
148 |                 <AiFillCamera className="text-3xl text-gray-500 active:scale-105 transition transform duration-200" />
149 |                 <span className="text-gray-600">Upload Pic</span>
150 |               </div>
151 |             )}
152 |             <input
153 |               ref={imagePickerRef}
154 |               type="file"
155 |               name="imageUpload"
156 |               id="imageUpload"
157 |               hidden
158 |               className="w-fit"
159 |               onChange={addImageToBlog}
160 |             />
161 |             <textarea
162 |               className="outline-none resize-none h-32 border-b border-gray-400 px-1"
163 |               name="content"
164 |               id="content"
165 |               cols="30"
166 |               rows="2"
167 |               placeholder="Write here..."
168 |               maxLength="1000"
169 |               spellCheck="false"
170 |               value={newContent}
171 |               onChange={(e) => {
172 |                 setNewContent(e.target.value);
173 |               }}
174 |             ></textarea>
175 |             <div className="flex items-center space-x-3">
176 |               <button
177 |                 type="submit"
178 |                 disabled={!newTitle || !newSelectedFile || !newContent}
179 |                 onClick={() => setShowCancel(!showCancel)}
180 |                 className={
181 |                   !newTitle || !newSelectedFile || !newContent
182 |                     ? "bg-opacity-40 w-fit bg-gray-400 px-2 py-1 rounded-md text-xl text-white transform transition active:scale-105 duration-150"
183 |                     : "w-fit bg-gray-400 px-2 py-1 rounded-md text-md text-white transform transition active:scale-105 duration-150"
184 |                 }
185 |               >
186 |                 Save Changes
187 |               </button>
188 |               {!showCancel && (
189 |                 <button
190 |                   onClick={() => setOpenModal(false)}
191 |                   className="w-fit px-2 py-1 rounded-md transform transition active:scale-105 duration-150 text-red-600 text-md bg-red-300 font-semibold"
192 |                 >
193 |                   Cancel
194 |                 </button>
195 |               )}
196 |               {loading && (
197 |                 <div className="flex items-center space-x-3">
198 |                   <i className="fa-solid fa-spinner animate-spin text-2xl"></i>
199 |                   {message && <div>{message}</div>}
200 |                 </div>
201 |               )}
202 |             </div>
203 |           </form>
204 |         </main>
205 |       </section>
206 |     </>
207 |   );
208 | };
209 | 
210 | export default EditModal;
211 | 


--------------------------------------------------------------------------------
/components/Footer.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import React from "react";
 3 | 
 4 | function Footer() {
 5 |   return (
 6 |     <main className="flex items-center mt-4 space-x-4 justify-center p-2 border-t border-[#dbdbdb]">
 7 |       <Link
 8 |         href="https://www.linkedin.com/in/ansh-pradhan-2a963818a/"
 9 |         target={"_blank"}
10 |       >
11 |         <i className="text-gray-500 fa-brands fa-linkedin"></i>{" "}
12 |       </Link>
13 |       <Link href="https://github.com/code-ansh-007" target={"_blank"}>
14 |         <i className="text-gray-500 fa-brands fa-github"></i>
15 |       </Link>
16 |       <Link href="https://www.instagram.com/slice_of_ansh/" target={"_blank"}>
17 |         <i className="text-gray-500 fa-brands fa-instagram"></i>{" "}
18 |       </Link>
19 |     </main>
20 |   );
21 | }
22 | 
23 | export default Footer;
24 | 


--------------------------------------------------------------------------------
/components/Header.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import brand from "../images/Blogify.png";
 3 | import Link from "next/link";
 4 | import Image from "next/image";
 5 | 
 6 | const Header = () => {
 7 |   return (
 8 |     <section className="my-3">
 9 |       <div className="flex items-center flex-col space-y-2">
10 |         <Link href="/">
11 |           <Image src={brand} width={250} />
12 |         </Link>
13 |         <div className="flex items-center space-x-12">
14 |           <Link
15 |             href="/"
16 |             className="transition transform duration-150 active:scale-105 ease-in-out"
17 |           >
18 |             <span>Home</span>
19 |           </Link>
20 |           <Link
21 |             href="/yourBlogs"
22 |             className="transition transform duration-150 active:scale-105 ease-in-out"
23 |           >
24 |             <span>Your Blogs</span>
25 |           </Link>
26 |           <Link
27 |             href="/create"
28 |             className="transition transform duration-150 active:scale-105 ease-in-out"
29 |           >
30 |             <span>Create</span>
31 |           </Link>
32 |         </div>
33 |       </div>
34 |     </section>
35 |   );
36 | };
37 | 
38 | export default Header;
39 | 


--------------------------------------------------------------------------------
/components/Layout.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Footer from "./Footer";
 3 | import Header from "./Header";
 4 | 
 5 | const Layout = ({ children }) => {
 6 |   return (
 7 |     <>
 8 |       <main className="flex flex-col h-screen">
 9 |         <Header />
10 |         <section className="flex-grow">{children}</section>
11 |         <Footer />
12 |       </main>
13 |     </>
14 |   );
15 | };
16 | export default Layout;
17 | 


--------------------------------------------------------------------------------
/context/AuthContext.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import { useContext, createContext } from "react";
 3 | import {
 4 |   GoogleAuthProvider,
 5 |   signInWithRedirect,
 6 |   signOut,
 7 |   onAuthStateChanged,
 8 | } from "firebase/auth"; // ? the logic for implementing login and signup feature is written in this context file
 9 | import { auth } from "../firebase";
10 | 
11 | const AuthContext = createContext();
12 | 
13 | export const AuthContextProvider = ({ children }) => {
14 |   const [user, setUser] = useState({});
15 | 
16 |   // ? checking the login state of user via useeffect and onAuthStateChanged
17 |   useEffect(() => {
18 |     const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
19 |       setUser(currentUser);
20 |     });
21 |     return unsubscribe;
22 |   }, []);
23 | 
24 |   // ? FUNCTION TO SIGN IN WITH GOOGLE
25 |   const signIn = async () => {
26 |     const provider = new GoogleAuthProvider();
27 |     await signInWithRedirect(auth, provider);
28 |   };
29 | 
30 |   // ? FUNCTION TO LOG OUT THE USER
31 |   const logOut = async () => {
32 |     await signOut(auth);
33 |   };
34 | 
35 |   return (
36 |     <AuthContext.Provider value={{ signIn, user, logOut }}>
37 |       {children}
38 |     </AuthContext.Provider>
39 |   );
40 | };
41 | 
42 | export const userAuth = () => {
43 |   return useContext(AuthContext);
44 | };
45 | 


--------------------------------------------------------------------------------
/firebase.js:
--------------------------------------------------------------------------------
 1 | // Import the functions you need from the SDKs you need
 2 | import { initializeApp } from "firebase/app";
 3 | import { getAuth } from "firebase/auth";
 4 | import { getFirestore } from "firebase/firestore";
 5 | import { getStorage } from "firebase/storage";
 6 | 
 7 | const firebaseConfig = {
 8 |   apiKey: process.env.NEXT_PUBLIC_APIKEY,
 9 |   authDomain: process.env.NEXT_PUBLIC_AUTHDOMAIN,
10 |   projectId: process.env.NEXT_PUBLIC_PROJECTID,
11 |   storageBucket: process.env.NEXT_PUBLIC_STORAGEBUCKET,
12 |   messagingSenderId: process.env.NEXT_PUBLIC_MESSAGINGSENDERID,
13 |   appId: process.env.NEXT_PUBLIC_APPID,
14 | };
15 | 
16 | // Initialize Firebase
17 | const app = initializeApp(firebaseConfig);
18 | export const auth = getAuth(app);
19 | // db
20 | export const db = getFirestore();
21 | export const storage = getStorage();
22 | 


--------------------------------------------------------------------------------
/images/Blogify.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-ansh-007/Blogify/5ef9e9e48f85e72de622ff5b09bef398d9538830/images/Blogify.png


--------------------------------------------------------------------------------
/images/Me_pic.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-ansh-007/Blogify/5ef9e9e48f85e72de622ff5b09bef398d9538830/images/Me_pic.jpg


--------------------------------------------------------------------------------
/images/glogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-ansh-007/Blogify/5ef9e9e48f85e72de622ff5b09bef398d9538830/images/glogo.png


--------------------------------------------------------------------------------
/images/robot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-ansh-007/Blogify/5ef9e9e48f85e72de622ff5b09bef398d9538830/images/robot.png


--------------------------------------------------------------------------------
/images/sample.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-ansh-007/Blogify/5ef9e9e48f85e72de622ff5b09bef398d9538830/images/sample.jpg


--------------------------------------------------------------------------------
/images/shape.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-ansh-007/Blogify/5ef9e9e48f85e72de622ff5b09bef398d9538830/images/shape.png


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   reactStrictMode: true,
 4 |   swcMinify: true,
 5 |   eslint: {
 6 |     ignoreDuringBuilds: true,
 7 |   },
 8 |   images: {
 9 |     domains: ["lh3.googleusercontent.com", "firebasestorage.googleapis.com"],
10 |   },
11 | };
12 | 
13 | module.exports = nextConfig;
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "blogify",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "firebase": "^9.17.1",
13 |     "next": "13.1.6",
14 |     "react": "18.2.0",
15 |     "react-dom": "18.2.0",
16 |     "react-icons": "^4.7.1",
17 |     "recoil": "^0.7.6"
18 |   },
19 |   "devDependencies": {
20 |     "autoprefixer": "^10.4.13",
21 |     "eslint": "8.34.0",
22 |     "eslint-config-next": "13.1.6",
23 |     "postcss": "^8.4.21",
24 |     "tailwind-scrollbar": "^2.1.0",
25 |     "tailwindcss": "^3.2.7"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import Layout from "../components/Layout";
 2 | import { AuthContextProvider } from "../context/AuthContext";
 3 | import "../styles/globals.css";
 4 | import { RecoilRoot } from "recoil";
 5 | 
 6 | function MyApp({ Component, pageProps }) {
 7 |   return (
 8 |     <AuthContextProvider>
 9 |       <RecoilRoot>
10 |         <Layout>
11 |           <Component {...pageProps} />
12 |         </Layout>
13 |       </RecoilRoot>
14 |     </AuthContextProvider>
15 |   );
16 | }
17 | 
18 | export default MyApp;
19 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import { Html, Head, Main, NextScript } from "next/document";
 2 | 
 3 | export default function Document() {
 4 |   return (
 5 |     <Html>
 6 |       <Head>
 7 |         <link rel="preconnect" href="https://fonts.googleapis.com" />
 8 |         <link
 9 |           rel="preconnect"
10 |           href="https://fonts.gstatic.com"
11 |           crossOrigin="true"
12 |         />
13 |         <link
14 |           href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;1,600&display=swap"
15 |           rel="stylesheet"
16 |         ></link>
17 |         {/* font awesome */}
18 |         <link
19 |           rel="stylesheet"
20 |           href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
21 |           integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
22 |           crossOrigin="anonymous"
23 |           referrerPolicy="no-referrer"
24 |         />
25 |       </Head>
26 |       <body>
27 |         <Main />
28 |         <NextScript />
29 |       </body>
30 |     </Html>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json({ name: 'John Doe' })
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/blog/[blogId].js:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import React from "react";
 3 | import { useRouter } from "next/router";
 4 | 
 5 | const BlogDetail = () => {
 6 |   const router = useRouter();
 7 |   const { title, content, username, profileImg, image, timestamp } =
 8 |     router.query;
 9 |   return (
10 |     <>
11 |       <main className="flex flex-col mt-10 items-start">
12 |         <span className="flex items-center space-x-1">
13 |           <Image
14 |             src={profileImg}
15 |             width={30}
16 |             height={30}
17 |             className="rounded-full "
18 |             alt="profile pic"
19 |           />
20 |           <span className="font-semibold">{username}</span>
21 |         </span>
22 |         <div className="mt-5 flex flex-col space-y-3">
23 |           <div className="w-[400px] h-[300px] sm:h-[300px] sm:w-[500px]">
24 |             <img
25 |               src={image}
26 |               className="object-cover w-full h-full rounded-lg"
27 |               alt="pic"
28 |             />
29 |           </div>
30 |           <div className="pl-3 flex flex-col items-start space-y-1">
31 |             <span className="text-2xl font-semibold text-gray-700">
32 |               {title}
33 |             </span>
34 |             <span className="md:max-w-3xl">{content}</span>
35 |           </div>
36 |         </div>
37 |       </main>
38 |     </>
39 |   );
40 | };
41 | 
42 | export default BlogDetail;
43 | 


--------------------------------------------------------------------------------
/pages/create.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   addDoc,
  3 |   collection,
  4 |   doc,
  5 |   serverTimestamp,
  6 |   updateDoc,
  7 | } from "firebase/firestore";
  8 | import { getDownloadURL, ref, uploadString } from "firebase/storage";
  9 | import Head from "next/head";
 10 | import { useRouter } from "next/router";
 11 | import React, { useEffect, useRef, useState } from "react";
 12 | import { AiFillCamera } from "react-icons/ai";
 13 | import { userAuth } from "../context/AuthContext";
 14 | import { db, storage } from "../firebase";
 15 | 
 16 | const create = () => {
 17 |   const router = useRouter();
 18 |   const imagePickerRef = useRef(null);
 19 |   const [loading, setLoading] = useState(false);
 20 |   const { user } = userAuth();
 21 |   const [title, setTitle] = useState("");
 22 |   const [content, setContent] = useState("");
 23 |   const [selectedFile, setSelectedFile] = useState(null);
 24 |   const [message, setMessage] = useState("");
 25 | 
 26 |   const uploadPost = async (e) => {
 27 |     e.preventDefault();
 28 |     try {
 29 |       setMessage("Uploading Post");
 30 |       if (loading) return;
 31 |       setLoading(true); // ? setting loading state to true the first time user clicks the post button
 32 |       // * create blog in firestore
 33 |       const docRef = await addDoc(collection(db, "blogs"), {
 34 |         uid: user.uid,
 35 |         username: user.displayName.toLowerCase().replace(/\s/g, ""),
 36 |         title: title
 37 |           .split(" ")
 38 |           .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
 39 |           .join(" "),
 40 |         content: content,
 41 |         profileImg: user.photoURL,
 42 |         timestamp: serverTimestamp(),
 43 |       });
 44 |       // * get the image ref from the storage by using firebase url
 45 |       const imageRef = ref(storage, `blogs/${docRef.id}/image`);
 46 |       // * 3) upload the image to the firebase storage with the blog id
 47 |       // * 4) get a download URL from the fb storage and update original blog with the image
 48 |       await uploadString(imageRef, selectedFile, "data_url").then(
 49 |         async (snapshot) => {
 50 |           const downloadUrl = await getDownloadURL(imageRef);
 51 |           await updateDoc(doc(db, "blogs", docRef.id), {
 52 |             image: downloadUrl,
 53 |           });
 54 |         }
 55 |       );
 56 |       setLoading(false);
 57 |       setSelectedFile(null);
 58 |       setTitle("");
 59 |       setContent("");
 60 |       setMessage("Post Uploaded Successfully");
 61 |     } catch (error) {
 62 |       console.log(error.message);
 63 |       setMessage("Post could not be uploaded!");
 64 |     }
 65 |   };
 66 | 
 67 |   const addImageToBlog = (e) => {
 68 |     const reader = new FileReader();
 69 |     if (e.target.files[0]) {
 70 |       reader.readAsDataURL(e.target.files[0]);
 71 |     }
 72 |     reader.onload = (readerEvent) => {
 73 |       setSelectedFile(readerEvent.target.result);
 74 |     };
 75 |   };
 76 | 
 77 |   useEffect(() => {
 78 |     let timeoutId;
 79 |     timeoutId = setTimeout(() => {
 80 |       setMessage("Slow Internet Detected!");
 81 |     }, 7000);
 82 |     return () => {
 83 |       clearTimeout(timeoutId);
 84 |     };
 85 |   }, [message]);
 86 | 
 87 |   useEffect(() => {
 88 |     if (user) {
 89 |       return;
 90 |     }
 91 |     router.push("/login");
 92 |   }, []);
 93 | 
 94 |   return (
 95 |     <>
 96 |       <Head>
 97 |         <title>Blogify - Create Blog</title>
 98 |       </Head>
 99 |       <main className="flex flex-col items-center justify-center h-full">
100 |         <span className="text-3xl text-gray-600 mb-5">Create Blog</span>
101 |         <form onSubmit={uploadPost} className="flex flex-col space-y-10">
102 |           <textarea
103 |             name="title"
104 |             id="title"
105 |             placeholder="Title..."
106 |             value={title}
107 |             onChange={(e) => {
108 |               setTitle(e.target.value);
109 |             }}
110 |             className="resize-none scrollbar-thin scrollbar-thumb-gray-400 w-full overflow-auto break-words border-b border-gray-400 h-10 outline-none"
111 |           ></textarea>
112 | 
113 |           {selectedFile ? (
114 |             <div className="relative flex">
115 |               <img
116 |                 src={selectedFile}
117 |                 className="w-[300px] object-contain cursor-pointer rounded-lg"
118 |                 alt="post image"
119 |               />
120 |               <span
121 |                 onClick={() => setSelectedFile(null)}
122 |                 className="bg-black bg-opacity-30 text-white text-center py-4 font-semibold absolute bottom-0 w-[298px] rounded-b-lg"
123 |               >
124 |                 Select another one
125 |               </span>
126 |             </div>
127 |           ) : (
128 |             <div
129 |               onClick={() => imagePickerRef.current.click()}
130 |               className="flex items-center space-x-2 cursor-pointer"
131 |             >
132 |               <AiFillCamera className="text-3xl text-gray-500 active:scale-105 transition transform duration-200" />
133 |               <span className="text-gray-600">Upload Pic</span>
134 |             </div>
135 |           )}
136 |           <input
137 |             ref={imagePickerRef}
138 |             type="file"
139 |             name="imageUpload"
140 |             id="imageUpload"
141 |             hidden
142 |             className="w-fit"
143 |             onChange={addImageToBlog}
144 |           />
145 |           <textarea
146 |             className="outline-none resize-none h-32 border-b border-gray-400 px-1"
147 |             name="content"
148 |             id="content"
149 |             cols="30"
150 |             rows="2"
151 |             placeholder="Write here..."
152 |             maxLength="1000"
153 |             spellCheck="false"
154 |             value={content}
155 |             onChange={(e) => {
156 |               setContent(e.target.value);
157 |             }}
158 |           ></textarea>
159 |           <div className="flex items-center space-x-3">
160 |             <button
161 |               type="submit"
162 |               disabled={!title || !selectedFile || !content}
163 |               className={
164 |                 !title || !selectedFile || !content
165 |                   ? "bg-opacity-40 w-fit bg-gray-400 px-2 py-1 rounded-md text-xl text-white transform transition active:scale-105 duration-150"
166 |                   : "w-fit bg-gray-400 px-2 py-1 rounded-md text-xl text-white transform transition active:scale-105 duration-150"
167 |               }
168 |             >
169 |               Post
170 |             </button>
171 |             {loading && (
172 |               <div className="flex items-center space-x-3">
173 |                 <i className="fa-solid fa-spinner animate-spin text-2xl"></i>
174 |                 {message && <div>{message}</div>}
175 |               </div>
176 |             )}
177 |           </div>
178 |         </form>
179 |       </main>
180 |     </>
181 |   );
182 | };
183 | 
184 | export default create;
185 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import { collection, onSnapshot, orderBy, query } from "firebase/firestore";
 2 | import Head from "next/head";
 3 | import { useEffect, useState } from "react";
 4 | import { useRecoilValue } from "recoil";
 5 | import Banner from "../components/Banner";
 6 | import BlogCard from "../components/BlogCard";
 7 | import EditModal from "../components/EditModal";
 8 | import { db } from "../firebase";
 9 | import { modalState } from "../recoil/modalAtom";
10 | 
11 | export default function Home() {
12 |   const [blogs, setBlogs] = useState([]);
13 |   const [loading, setLoading] = useState(false);
14 |   const { isOpen, blogId } = useRecoilValue(modalState);
15 | 
16 |   useEffect(() => {
17 |     setLoading(true);
18 |     const unsubscribe = onSnapshot(
19 |       query(collection(db, "blogs"), orderBy("timestamp", "desc")),
20 |       (snapshot) => {
21 |         setBlogs(snapshot.docs);
22 |         setLoading(false);
23 |       }
24 |     );
25 |     return unsubscribe;
26 |   }, [db]);
27 | 
28 |   return (
29 |     <>
30 |       <Head>
31 |         <title>Blogify</title>
32 |         <meta name="description" content="Generated by create next app" />
33 |         <link rel="icon" href="/favicon.ico" />
34 |       </Head>
35 |       <div className="flex items-center mt-3 justify-center">
36 |         <Banner />
37 |       </div>
38 |       <section
39 |         className={
40 |           loading
41 |             ? "flex flex-col h-full items-center justify-center"
42 |             : "flex flex-col items-center justify-center place-items-center md:grid grid-cols-2"
43 |         }
44 |       >
45 |         {loading ? (
46 |           <i className="fa-solid fa-spinner animate-spin text-7xl text-gray-600"></i>
47 |         ) : (
48 |           blogs?.map((blog) => {
49 |             return (
50 |               <BlogCard
51 |                 key={blog.id}
52 |                 id={blog.id}
53 |                 blogId={blog.id}
54 |                 username={blog.data().username}
55 |                 content={blog.data().content}
56 |                 title={blog.data().title}
57 |                 image={blog.data().image}
58 |                 profileImg={blog.data().profileImg}
59 |                 userId={blog.data().uid}
60 |                 timestamp={blog.data().timestamp}
61 |               />
62 |             );
63 |           })
64 |         )}
65 |       </section>
66 |       {isOpen && <EditModal blogId={blogId} />}
67 |     </>
68 |   );
69 | }
70 | 


--------------------------------------------------------------------------------
/pages/login.js:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | import Image from "next/image";
 3 | import { useRouter } from "next/router";
 4 | import brand from "../images/Blogify.png";
 5 | import glogo from "../images/glogo.png";
 6 | import { userAuth } from "../context/AuthContext";
 7 | 
 8 | function Login() {
 9 |   const router = useRouter();
10 |   const { signIn } = userAuth();
11 | 
12 |   const handleSignIn = async () => {
13 |     try {
14 |       await signIn();
15 |     } catch (error) {
16 |       console.log(error.message);
17 |     }
18 |   };
19 | 
20 |   const { user } = userAuth();
21 |   useEffect(() => {
22 |     if (user) {
23 |       router.push("/");
24 |     }
25 |   }, [user]);
26 | 
27 |   return (
28 |     <>
29 |       <div className="h-full flex items-center justify-center px-4">
30 |         <div className="flex flex-col items-center space-y-10">
31 |           <span onClick={() => router.push("/")}>
32 |             <Image src={brand} width={300} />
33 |           </span>
34 |           <div
35 |             onClick={handleSignIn}
36 |             className="flex items-center space-x-1 active:scale-105 transition transform duration-150"
37 |           >
38 |             <button className=" text-gray-500 border-b border-gray-400 font-semibold  outline-none p-2 py-1 m-2">
39 |               Sign In with Google
40 |             </button>
41 |             <Image src={glogo} width={30} />
42 |           </div>
43 |         </div>
44 |       </div>
45 |     </>
46 |   );
47 | }
48 | 
49 | export default Login;
50 | 


--------------------------------------------------------------------------------
/pages/userDashboard.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from "react";
 2 | import { userAuth } from "../context/AuthContext";
 3 | import { useRouter } from "next/router";
 4 | import shape from "../images/shape.png";
 5 | import Image from "next/image";
 6 | 
 7 | const UserDashboard = () => {
 8 |   const router = useRouter();
 9 |   const { logOut, user } = userAuth();
10 |   useEffect(() => {
11 |     if (user) {
12 |       return;
13 |     }
14 |     router.push("/");
15 |   }, [user]);
16 |   return (
17 |     <>
18 |       <main className="flex h-full w-full flex-col items-center justify-center space-y-4">
19 |         <div className="relative flex flex-col items-center">
20 |           <Image src={shape} width={300} />
21 |           <img
22 |             src={user?.photoURL}
23 |             alt="user pic"
24 |             className="rounded-full absolute top-[90px] right-[105px]"
25 |           />
26 |         </div>
27 |         <span>{user?.email}</span>
28 |         <button
29 |           onClick={logOut}
30 |           className="bg-gray-400 text-white px-2  py-1 active:scale-105 transition transform duration-150 rounded-md"
31 |         >
32 |           Logout
33 |         </button>
34 |       </main>
35 |     </>
36 |   );
37 | };
38 | 
39 | export default UserDashboard;
40 | 


--------------------------------------------------------------------------------
/pages/yourBlogs.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   collection,
 3 |   onSnapshot,
 4 |   orderBy,
 5 |   query,
 6 |   where,
 7 | } from "firebase/firestore";
 8 | import Head from "next/head";
 9 | import Image from "next/image";
10 | import { useRouter } from "next/router";
11 | import React, { useEffect, useState } from "react";
12 | import BlogCard from "../components/BlogCard";
13 | import { userAuth } from "../context/AuthContext";
14 | import { db } from "../firebase";
15 | import robot from "../images/robot.png";
16 | import EditModal from "../components/EditModal";
17 | import { useRecoilState, useRecoilValue } from "recoil";
18 | import { modalState } from "../recoil/modalAtom";
19 | 
20 | const YourBlogs = () => {
21 |   const { user } = userAuth();
22 |   const [blogs, setBlogs] = useState([]);
23 |   const [loading, setLoading] = useState(false);
24 |   const { isOpen, blogId } = useRecoilValue(modalState);
25 |   // ! authentication code
26 |   const router = useRouter();
27 |   useEffect(() => {
28 |     if (user) {
29 |       return;
30 |     }
31 |     router.push("/login");
32 |   }, []);
33 | 
34 |   useEffect(() => {
35 |     if (!user) {
36 |       return;
37 |     }
38 |     setLoading(true);
39 |     const unsubscribe = onSnapshot(
40 |       query(
41 |         collection(db, "blogs"),
42 |         where("uid", "==", user.uid || ""),
43 |         orderBy("timestamp", "desc")
44 |       ),
45 |       (snapshot) => {
46 |         setBlogs(snapshot.docs);
47 |         setLoading(false);
48 |       }
49 |     );
50 |     return unsubscribe;
51 |   }, [db, user]);
52 | 
53 |   return (
54 |     <>
55 |       <Head>
56 |         <title>Blogify - Your Blogs</title>
57 |       </Head>
58 |       <section
59 |         className={
60 |           blogs.length > 0
61 |             ? "flex flex-col items-center justify-center"
62 |             : "flex flex-col items-center justify-center h-full"
63 |         }
64 |       >
65 |         {blogs.length > 0 ? (
66 |           blogs.map((blog) => (
67 |             <BlogCard
68 |               key={blog.id}
69 |               id={blog.id}
70 |               username={blog.data().username}
71 |               content={blog.data().content}
72 |               title={blog.data().title}
73 |               image={blog.data().image}
74 |               profileImg={blog.data().profileImg}
75 |               userId={user.uid}
76 |               blogId={blog.id}
77 |             />
78 |           ))
79 |         ) : loading ? (
80 |           <i className="fa-solid fa-spinner animate-spin text-7xl text-gray-600"></i>
81 |         ) : (
82 |           <div className="flex flex-col items-center">
83 |             <Image src={robot} width={200} alt="confused robot image" />
84 |             <span className="text-2xl font-bold text-gray-500">
85 |               No Blogs Yet!
86 |             </span>
87 |           </div>
88 |         )}
89 |       </section>
90 |       {isOpen && <EditModal blogId={blogId} />}
91 |     </>
92 |   );
93 | };
94 | 
95 | export default YourBlogs;
96 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code-ansh-007/Blogify/5ef9e9e48f85e72de622ff5b09bef398d9538830/public/favicon.ico


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/recoil/modalAtom.js:
--------------------------------------------------------------------------------
 1 | import { atom } from "recoil";
 2 | 
 3 | export const modalState = atom({
 4 |   key: "modalState",
 5 |   default: {
 6 |     isOpen: false,
 7 |     blogId: "",
 8 |   },
 9 | });
10 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | body {
 6 |   font-family: "Montserrat", sans-serif;
 7 | }
 8 | 
 9 | * {
10 |   padding: 0 1px 0 1px;
11 | }
12 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./app/**/*.{js,ts,jsx,tsx}",
 5 |     "./pages/**/*.{js,ts,jsx,tsx}",
 6 |     "./components/**/*.{js,ts,jsx,tsx}",
 7 | 
 8 |     // Or if using `src` directory:
 9 |     "./src/**/*.{js,ts,jsx,tsx}",
10 |   ],
11 |   theme: {
12 |     extend: {},
13 |   },
14 |   plugins: [
15 |     // ...
16 |     require("tailwind-scrollbar"),
17 |   ],
18 | };
19 | 


--------------------------------------------------------------------------------