├── src
    ├── App.css
    ├── assets
    │   └── img
    │   │   ├── Loading.gif
    │   │   └── profile.jpg
    ├── Components
    │   ├── pages
    │   │   ├── Home
    │   │   │   ├── Home.jsx
    │   │   │   ├── Search.jsx
    │   │   │   └── Header
    │   │   │   │   ├── UserModal.jsx
    │   │   │   │   └── HomeHeader.jsx
    │   │   ├── Demo
    │   │   │   ├── Auth
    │   │   │   │   ├── Trending.jsx
    │   │   │   │   ├── Banner.jsx
    │   │   │   │   ├── Discover.jsx
    │   │   │   │   ├── SignIn.jsx
    │   │   │   │   ├── SignUp.jsx
    │   │   │   │   └── Auth.jsx
    │   │   │   ├── Demo.jsx
    │   │   │   └── DemoHeader.jsx
    │   │   └── Profile
    │   │   │   ├── Activites
    │   │   │       ├── ProfileList.jsx
    │   │   │       ├── ProfileAbout.jsx
    │   │   │       └── ProfileHome.jsx
    │   │   │   ├── Profile.jsx
    │   │   │   └── EditProfile.jsx
    │   ├── Loading
    │   │   └── Loading.jsx
    │   ├── common
    │   │   └── Posts
    │   │   │   └── Posts.jsx
    │   └── Context
    │   │   └── Context.jsx
    ├── utils
    │   ├── Modal.jsx
    │   ├── Input.jsx
    │   └── Helper.js
    ├── index.css
    ├── main.jsx
    ├── App.jsx
    ├── Firebase
    │   └── Firebase-config.js
    └── data.js
├── postcss.config.js
├── vite.config.js
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── tailwind.config.js
├── package.json
└── public
    └── vite.svg


/src/App.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/assets/img/Loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alirazaramejo/meduim-blog/HEAD/src/assets/img/Loading.gif


--------------------------------------------------------------------------------
/src/assets/img/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alirazaramejo/meduim-blog/HEAD/src/assets/img/profile.jpg


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


--------------------------------------------------------------------------------
/src/Components/pages/Home/Home.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | function Home() {
4 |   return (
5 |     <div>Home</div>
6 |   )
7 | }
8 | 
9 | export default Home


--------------------------------------------------------------------------------
/src/Components/pages/Demo/Auth/Trending.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | function Trending() {
4 |   return (
5 |     <div>Trending</div>
6 |   )
7 | }
8 | 
9 | export default Trending


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/src/Components/pages/Profile/Activites/ProfileList.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | function ProfileList() {
4 |   return (
5 |     <div>ProfileList</div>
6 |   )
7 | }
8 | 
9 | export default ProfileList


--------------------------------------------------------------------------------
/src/Components/Loading/Loading.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import loadingImg from "../../assets/img/Loading.gif";
 3 | 
 4 | function Loading() {
 5 |   return (
 6 |     <div className='fixed inset-0 grid place-items-center bg-white z-30'>
 7 |         <img src={loadingImg} alt="loading" />
 8 |     </div>
 9 |   );
10 | }
11 | 
12 | export default Loading;
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.jsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/utils/Modal.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Modal = ({ children, modal, setModal }) => {
 4 |   return (
 5 |     <>
 6 |       <div
 7 |         onClick={() => setModal(false)}
 8 |         className={`bg-white/50 fixed inset-0 z-10 
 9 |       ${
10 |         modal ? "visible opacity-100" : "invisible opacity-0"
11 |       } transition-all duration-500`}
12 |       />
13 |       {children}
14 |     </>
15 |   );
16 | };
17 | 
18 | export default Modal;
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 | 
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 | 
5 | Currently, two official plugins are available:
6 | 
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | *{
 6 |   @apply m-0 p-0 box-border;
 7 | }
 8 | body{
 9 |   @apply font-texts;
10 | }
11 | .size{
12 |   @apply w-[95%] md:w-[90%] mx-auto;
13 | }
14 | .shadows{
15 |   box-shadow:0px 0px 3px 0.3px rgb(182,182,182);
16 | }
17 | .btn{
18 |   @apply px-3 p-2 text-sm font-medium;
19 | }
20 | .center{
21 |   position: fixed;
22 |   top: 50%;
23 |   left: 50%;
24 |   transform: translate(-50%,-50%);
25 | }
26 | 


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App.jsx';
 4 | import './index.css';
 5 | import 'react-toastify/dist/ReactToastify.css';
 6 | import { BrowserRouter } from 'react-router-dom';
 7 | import Context from './Components/Context/Context.jsx';
 8 | 
 9 | ReactDOM.createRoot(document.getElementById('root')).render(
10 |   <React.StrictMode>
11 |     <BrowserRouter>
12 |       <Context>
13 |         <App />
14 |       </Context>
15 |     </BrowserRouter>
16 |   </React.StrictMode>
17 | );
18 | 


--------------------------------------------------------------------------------
/src/utils/Input.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function Input({ type, title, form, setForm }) {
 4 |   const handleChange = (e) => {
 5 |     setForm({ ...form, [e.target.name]: e.target.value });
 6 |   };
 7 | 
 8 |   return (
 9 |     <div className='flex flex-col gap-2'>
10 |       <label className='text-sm capitalize'>{title}</label>
11 |       <input
12 |         className='text-center border-b border-black outline-none'
13 |         type={type}
14 |         name={title}
15 |         onChange={handleChange}
16 |       />
17 |     </div>
18 |   );
19 | }
20 | 
21 | export default Input;
22 | 


--------------------------------------------------------------------------------
/src/Components/pages/Profile/Activites/ProfileAbout.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProfileAbout({getAllUsersData,setEditModal}) {
 4 |   return (
 5 |     <div className='w-full'>
 6 |       <p className='text-2xl first-letter:uppercase'>
 7 |         {getAllUsersData?.bio ? getAllUsersData.username : "Hasn't added a bio yet."}
 8 |       </p>
 9 |       <div className="text-right">
10 |         <button
11 |         onClick={() => setEditModal(true)}
12 |          className='border border-black py-2 px-5 rounded-full text-black mt-[3rem]'>Edit</button>
13 |       </div>
14 |     </div>
15 |   )
16 | }
17 | 
18 | export default ProfileAbout


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:react/recommended',
 7 |     'plugin:react/jsx-runtime',
 8 |     'plugin:react-hooks/recommended',
 9 |   ],
10 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
11 |   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 |   settings: { react: { version: '18.2' } },
13 |   plugins: ['react-refresh'],
14 |   rules: {
15 |     'react/jsx-no-target-blank': 'off',
16 |     'react-refresh/only-export-components': [
17 |       'warn',
18 |       { allowConstantExport: true },
19 |     ],
20 |   },
21 | }
22 | 


--------------------------------------------------------------------------------
/src/Components/pages/Demo/Demo.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Banner from './Auth/Banner';
 3 | import Trending from './Auth/Trending';
 4 | import Posts from '../../common/Posts/Posts';
 5 | import Discover from './Auth/Discover';
 6 | 
 7 | function Demo() {
 8 |   return (
 9 |     <>
10 |       <Banner />
11 |       <Trending />
12 |       <div className='size py-7 flex flex-col-reverse md:flex-row gap-[7rem]'>
13 |         <div className='flex-[1.5]'>
14 |           <Posts />
15 |         </div>
16 |         <div className='flex-[1] relative'>
17 |           <Discover />
18 |         </div>
19 |       </div>
20 |     </>
21 |   );
22 | }
23 | 
24 | export default Demo;
25 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | /** @type {import('tailwindcss').Config} */
 3 | export default {
 4 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
 5 |   theme: {
 6 |     extend: {
 7 |       colors: {
 8 |         black1: "rgba(0,0,0,0.8)",
 9 |         banner: "rgb(255, 192, 23)",
10 |       },
11 |       fontFamily: {
12 |         title: `gt-super, Georgia, Cambria,Times New Roman, Times, serif;`,
13 |         texts: `sohne, Helvetica Neue, Helvetica, Arial, sans-serif`,
14 |       },
15 |       gridTemplateColumns: {
16 |         card: "repeat(auto-fit, minmax(280px, 1fr))",
17 |       },
18 |     },
19 |   },
20 |   plugins: [],
21 | };


--------------------------------------------------------------------------------
/src/Components/pages/Demo/Auth/Banner.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import reactImg from '../../../../assets/react.svg';
 3 | 
 4 | function Banner() {
 5 |   return (
 6 |     <div className='bg-banner border-b border-black'>
 7 |       <div className='size py-[5rem] flex flex-col items-start gap-[1rem]'>
 8 |         {/* Main heading */}
 9 |         <h1 className='font-title text-[3rem] sm:text-[4rem] md:text-[6rem] font-normal'>Stay curious.</h1>
10 |         {/* Subheading */}
11 |         <p className='w-full md:w-[31rem] text-[1.3rem] md:text-[1.5rem] font-medium leading-7'>
12 |           Discover stories, thinking, and expertise from writers on any topic.
13 |         </p>
14 |         {/* Button */}
15 |         <button className='btn bg-black1 rounded-full text-white !text-[1.2rem] !px-6 !mt-[2.5rem]'>
16 |           Start Reading
17 |         </button>
18 |       </div>
19 |     </div>
20 |   );
21 | }
22 | 
23 | export default Banner;
24 | 


--------------------------------------------------------------------------------
/src/utils/Helper.js:
--------------------------------------------------------------------------------
 1 | export const secretEmail = (email) => {
 2 |     const [username, domain] = email.split("@");
 3 |     const secretUser = username.substring(0, 2) + "*".repeat(username.length - 2);
 4 |     return `${secretUser}@${domain}`;
 5 |   };
 6 |   
 7 |   export const readTime = (desc) => {
 8 |     const averageReading = 225;
 9 |   
10 |     const div = document.createElement("div");
11 |     div.innerHTML = desc.__html;
12 |   
13 |     const textContext = div.textContent || div.innerHTML;
14 |     const words = textContext.trim().split(/\s+/);
15 |     return Math.ceil(words.length / averageReading);
16 |   };
17 |   
18 |   export const formatNum = (num) => {
19 |     if (num >= 1e9) {
20 |       return (num / 1e9).toFixed(1) + "B";
21 |     } else if (num >= 1e6) {
22 |       return (num / 1e6).toFixed(1) + "M";
23 |     } else if (num >= 1e3) {
24 |       return (num / 1e3).toFixed(1) + "K";
25 |     } else {
26 |       return num.toString();
27 |     }
28 |   };
29 |   


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "medium",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "firebase": "^10.8.0",
14 |     "react": "^18.2.0",
15 |     "react-dom": "^18.2.0",
16 |     "react-icons": "^5.0.1",
17 |     "react-router-dom": "^6.22.0",
18 |     "react-toastify": "^10.0.4"
19 |   },
20 |   "devDependencies": {
21 |     "@types/react": "^18.2.55",
22 |     "@types/react-dom": "^18.2.19",
23 |     "@vitejs/plugin-react": "^4.2.1",
24 |     "autoprefixer": "^10.4.17",
25 |     "eslint": "^8.56.0",
26 |     "eslint-plugin-react": "^7.33.2",
27 |     "eslint-plugin-react-hooks": "^4.6.0",
28 |     "eslint-plugin-react-refresh": "^0.4.5",
29 |     "postcss": "^8.4.35",
30 |     "tailwindcss": "^3.4.1",
31 |     "vite": "^5.1.0"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Navigate, Route, Routes } from 'react-router-dom';
 3 | import Home from './Components/pages/Home/Home';
 4 | import Demo from './Components/pages/Demo/Demo';
 5 | import HomeHeader from './Components/pages/Home/Header/HomeHeader';
 6 | import DemoHeader from './Components/pages/Demo/DemoHeader';
 7 | import { ToastContainer } from 'react-toastify';
 8 | import { Blog } from './Components/Context/Context';
 9 | import Profile from './Components/pages/Profile/Profile';
10 | function App() {
11 |   const { currentUser } = Blog();
12 | 
13 |   return (
14 |     <>
15 |       {currentUser ? <HomeHeader /> : <DemoHeader />}
16 |       <ToastContainer />
17 |       <Routes>
18 |         {currentUser && <Route path="/" element={<Home />} />}
19 |         {!currentUser && <Route path="/Demo" element={<Demo />} />}
20 |         <Route path="/Profile/:userId" element={<Profile />} />
21 |         <Route path="*" element={<Navigate to={!currentUser ? '/demo' : '/'} />} />
22 |       </Routes>
23 |     </>
24 |   );
25 | }
26 | 
27 | export default App;
28 | 


--------------------------------------------------------------------------------
/src/Components/pages/Home/Search.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Modal from "../../../utils/Modal";
 3 | import { CiSearch } from "react-icons/ci";
 4 | function Search({ modal, setModal }) {
 5 |   return (
 6 |     <>
 7 |       <Modal modal={modal} setModal={setModal}>
 8 |         <div
 9 |           className={`absolute sm:relative right-4 left-4 top-[4rem] sm:left-0 sm:top-0 ${
10 |             modal
11 |               ? "visible opacity-100 "
12 |               : "invisible sm:visible opacity-100 opacity-0"
13 |           } transition-all duration-100`}
14 |         >
15 |           <div className="flex items-center gap-1 bg-gray-100 px-2 rounded-full relative z-10">
16 |             <span className="text-2xl text-gray-400">
17 |               <CiSearch />
18 |             </span>
19 |             <input
20 |               className="bg-transparent outline-none py-[0.7rem] text-sm w-full"
21 |               type="text"
22 |               placeholder="Search Medium"
23 |             />
24 |           </div>
25 |         </div>
26 |       </Modal>
27 |     </>
28 |   );
29 | }
30 | 
31 | export default Search;
32 | 


--------------------------------------------------------------------------------
/src/Firebase/Firebase-config.js:
--------------------------------------------------------------------------------
 1 | // Import the functions you need from the SDKs you need
 2 | import { initializeApp } from "firebase/app";
 3 | import { getAuth,GoogleAuthProvider } from "firebase/auth";
 4 | import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage"; // Import getDownloadURL
 5 | import { getFirestore, doc } from "firebase/firestore";
 6 | const firebaseConfig = {
 7 |   apiKey: "AIzaSyAQjlwhuwWYJ-OdhhPP4XRxEgWSfQ5d3-o",
 8 |   authDomain: "ali-raza-518df.firebaseapp.com",
 9 |   databaseURL: "https://ali-raza-518df-default-rtdb.firebaseio.com",
10 |   projectId: "ali-raza-518df",
11 |   storageBucket: "ali-raza-518df.appspot.com",
12 |   messagingSenderId: "308309137877",
13 |   appId: "1:308309137877:web:ac0be37dd3c2bb9544055c",
14 |   measurementId: "G-82NM2JZS9D"
15 | };
16 | 
17 | // Initialize Firebase
18 | const app = initializeApp(firebaseConfig);
19 | export const auth = getAuth();
20 | export const provider = new GoogleAuthProvider();
21 | export const storage = getStorage();
22 | export const db = getFirestore(app);
23 | export { doc };
24 | export { ref, uploadBytes, getDownloadURL };
25 | 


--------------------------------------------------------------------------------
/src/Components/pages/Profile/Activites/ProfileHome.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function ProfileHome() {
 4 |   return (
 5 |     <div>
 6 |       <p>aaa</p>
 7 |       <p>aaa</p>
 8 |       <p>aaa</p>
 9 |       <p>aaa</p>
10 |       <p>aaa</p>
11 |       <p>aaa</p>
12 |       <p>aaa</p>
13 |       <p>aaa</p>
14 |       <p>aaa</p>
15 |       <p>aaa</p>
16 |       <p>aaa</p>
17 |       <p>aaa</p>
18 |       <p>aaa</p>
19 |       <p>aaa</p>
20 |       <p>aaa</p>
21 |       <p>aaa</p>
22 |       <p>aaa</p>
23 |       <p>aaa</p>
24 |       <p>aaa</p>
25 |       <p>aaa</p>
26 |       <p>aaa</p>
27 |       <p>aaa</p>
28 |       <p>aaa</p>
29 |       <p>aaa</p>
30 |       <p>aaa</p>
31 |       <p>aaa</p>
32 |       <p>aaa</p>
33 |       <p>aaa</p>
34 |       <p>aaa</p>
35 |       <p>aaa</p>
36 |       <p>aaa</p>
37 |       <p>aaa</p>
38 |       <p>aaa</p>
39 |       <p>aaa</p>
40 |       <p>aaa</p>
41 |       <p>aaa</p>
42 |       <p>aaa</p>
43 |       <p>aaa</p>
44 |       <p>aaa</p>
45 |       <p>aaa</p>
46 |       <p>aaa</p>
47 |       <p>aaa</p>
48 |       <p>aaa</p>
49 |       <p>aaa</p>
50 |       <p>aaa</p>
51 |       <p>aaa</p>
52 |       <p>aaa</p>
53 |       <p>aaa</p>
54 |     </div>
55 |   )
56 | }
57 | 
58 | export default ProfileHome


--------------------------------------------------------------------------------
/src/Components/pages/Demo/Auth/Discover.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { discover, discoverActions } from '../../../../data';
 3 | 
 4 | function Discover() {
 5 |   return (
 6 |     <div className='sticky top-[6rem]'>
 7 |       {/* Discover topics section */}
 8 |       <div className='border-b border-gray-400 pd-7'>
 9 |         <h2 className='font-semibold'>Discover more of what matters to you</h2>
10 |         <div className='my-2 flex items-center gap-3 flex-wrap'>
11 |           {/* Mapping over discover topics */}
12 |           {discover.map((item, i) => (
13 |             <button key={i} className='bg-gray-200 py-2 px-3 text-sm rounded-full'>
14 |               {item}
15 |             </button>
16 |           ))}
17 |         </div>
18 |         {/* Button to see more topics */}
19 |         <button className='text-green-600 text-sm py-3 hover:text-black1'>See more topics</button>
20 |       </div>
21 |       {/* Discover actions section */}
22 |       <div className='flex items-center flex-wrap gap-3 leading-3 pt-8'>
23 |         {/* Mapping over discover actions */}
24 |         {discoverActions.map((item, i) => (
25 |           <button key={i} className='text-md text-black1'>{item}</button>
26 |         ))}
27 |       </div>
28 |     </div>
29 |   );
30 | }
31 | 
32 | export default Discover;
33 | 


--------------------------------------------------------------------------------
/src/Components/common/Posts/Posts.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Posts() {
 4 |   return (
 5 |     <div>
 6 |         <p>post</p>
 7 |         <p>post</p>
 8 |         <p>post</p>
 9 |         <p>post</p>
10 |         <p>post</p>
11 |         <p>post</p>
12 |         <p>post</p>
13 |         <p>post</p>
14 |         <p>post</p>
15 |         <p>post</p>
16 |         <p>post</p>
17 |         <p>post</p>
18 |         <p>post</p>
19 |         <p>post</p>
20 |         <p>post</p>
21 |         <p>post</p>
22 |         <p>post</p>
23 |         <p>post</p>
24 |         <p>post</p>
25 |         <p>post</p>
26 |         <p>post</p>
27 |         <p>post</p>
28 |         <p>post</p>
29 |         <p>post</p>
30 |         <p>post</p>
31 |         <p>post</p>
32 |         <p>post</p>
33 |         <p>post</p>
34 |         <p>post</p>
35 |         <p>post</p>
36 |         <p>post</p>
37 |         <p>post</p>
38 |         <p>post</p>
39 |         <p>post</p>
40 |         <p>post</p>
41 |         <p>post</p>
42 |         <p>post</p>
43 |         <p>post</p>
44 |         <p>post</p>
45 |         <p>post</p>
46 |         <p>post</p>
47 |         <p>post</p>
48 |         <p>post</p>
49 |         <p>post</p>
50 |         <p>post</p>
51 |         <p>post</p>
52 |         <p>post</p>
53 |         <p>post</p>
54 |         <p>post</p>
55 |         <p>post</p>
56 |         <p>post</p>
57 |         <p>post</p>
58 |     </div>
59 |   )
60 | }
61 | 
62 | export default Posts


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/Components/Context/Context.jsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useContext, useEffect, useState } from 'react';
 2 | import { auth, db } from '../../Firebase/Firebase-config'; // Assuming db is your Firestore instance
 3 | import LoadingIndicator from '../Loading/Loading';
 4 | import { onAuthStateChanged } from 'firebase/auth';
 5 | import { collection, query, onSnapshot } from 'firebase/firestore';
 6 | 
 7 | const BlogContext = createContext();
 8 | 
 9 | function Context({ children }) {
10 |   const [currentUser, setCurrentUser] = useState(null);
11 |   const [loading, setLoading] = useState(true);
12 |   const [allUsers, setAllUsers] = useState([]);
13 | const [userLoading, setUserLoading] = useState(true);
14 |   useEffect(() => {
15 |     const unsubscribe = onAuthStateChanged(auth, (user) => {
16 |       setCurrentUser(user);
17 |       setLoading(false);
18 |     });
19 | 
20 |     return unsubscribe; // return the unsubscribe function to clean up
21 |   }, []); // no need to include currentUser in dependencies
22 | 
23 |   useEffect(() => {
24 |     const getUsers = () => {
25 |       const usersRef = collection(db, 'users');
26 |       const q = query(usersRef);
27 |       
28 |       const unsubscribe = onSnapshot(q, (snapshot) => {
29 |         setAllUsers(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
30 |         setUserLoading(false);
31 |       });
32 | 
33 |       return unsubscribe; // return the unsubscribe function to clean up
34 |     };
35 | 
36 |     getUsers();
37 |   }, []); // empty dependency array to run only once when component mounts
38 | 
39 |   // console.log(allUsers);
40 | 
41 |   return (
42 |     <BlogContext.Provider value={{ currentUser, setCurrentUser,allUsers,userLoading }}>
43 |       {loading ? <LoadingIndicator /> : children}
44 |     </BlogContext.Provider>
45 |   );
46 | }
47 | 
48 | export default Context;
49 | 
50 | export const Blog = () => useContext(BlogContext);
51 | 


--------------------------------------------------------------------------------
/src/Components/pages/Demo/DemoHeader.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | import { nav } from "../../../data.js";
 4 | import Auth from './Auth/Auth.jsx';
 5 | 
 6 | function DemoHeader() {
 7 |   const [colorActive, setColorActive] = useState(false);
 8 |   const [modal, setModal] = useState(false);
 9 | 
10 |   useEffect(() => {
11 |     const scrollHandler = () => {
12 |       window.scrollY > 480 ? setColorActive(true) : setColorActive(false);
13 |     }
14 | 
15 |     window.addEventListener('scroll', scrollHandler);
16 | 
17 |     // Cleanup function
18 |     return () => {
19 |       window.removeEventListener('scroll', scrollHandler);
20 |     };
21 |   }, []);
22 | 
23 |   return (
24 |     <header className={`border-b border-black sticky top-0 z-50 ${colorActive ? "bg-white" : "bg-banner"} transition-all duration-500`}>
25 |       <div className='size h-[75px] flex items-center justify-between'>
26 |         <Link to={"/"}>
27 |           <img className='h-[2.5rem]' src="https://miro.medium.com/v2/resize:fit:8978/1*s986xIGqhfsN8U--09_AdA.png" alt='logo'/>
28 |         </Link>
29 |         <div className='flex items-center gap-5'>
30 |           <div className='hidden sm:flex items-center gap-5'>
31 |             {nav.map((link, i) => (
32 |               <Link key={i} to={link.path} className='text-sm'>{link.title}</Link>
33 |             ))}
34 |             <div className="relative">
35 |               <button onClick={()=> setModal(true)} className='hidden text-sm sm:flex items-center gap-5'>Sign in</button>
36 |               <Auth modal={modal} setModal={setModal}/>
37 |             </div>
38 |           </div>
39 |           <div>
40 |             <button className={`text-white rounded-full px-3 p-2 ${colorActive ? "bg-green-700" : "bg-black"}`}>Get Started</button>
41 |           </div>
42 |         </div>
43 |       </div>
44 |     </header>
45 |   );
46 | }
47 | 
48 | export default DemoHeader;
49 | 


--------------------------------------------------------------------------------
/src/Components/pages/Demo/Auth/SignIn.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import Input from "../../../../utils/Input";
 3 | import { toast } from "react-toastify";
 4 | import { MdKeyboardArrowLeft } from "react-icons/md";
 5 | import { signInWithEmailAndPassword } from "firebase/auth";
 6 | import { auth } from "../../../../Firebase/Firebase-config";
 7 | import { useNavigate } from "react-router-dom";
 8 | 
 9 | function SignIn({ setSignReq }) {
10 |   const Navigate = useNavigate();
11 |   const [form, setForm] = useState({
12 |     email: "",
13 |     password: "",
14 |   });
15 |   const [loading, setLoading] = useState(false);
16 | 
17 |   const handleSubmit = async (e) => {
18 |     e.preventDefault();
19 |     if (form.email === "" || form.password === "") {
20 |       toast.error("All fields are required!!");
21 |       return;
22 |     }
23 |     try {
24 |       setLoading(true);
25 |       await signInWithEmailAndPassword(auth, form.email, form.password);
26 |       Navigate("/");
27 |       toast.success("User has been logged in successfully");
28 |     } catch (error) {
29 |       toast.error(error.message);
30 |     } finally {
31 |       setLoading(false);
32 |     }
33 |   };
34 | 
35 |   return (
36 |     <div className="size mt-[6rem] text-center">
37 |       <h2 className="text-3xl">Sign In with email</h2>
38 |       <p className="w-full sm:w-[25rem] mx-auto py-[3rem]">
39 |         Enter the email address associated with your account, and we’ll send a
40 |         magic link to your inbox.
41 |       </p>
42 |       <form onSubmit={handleSubmit} className="flex flex-col gap-4">
43 |         <Input form={form} setForm={setForm} type="email" title="email" />
44 |         <Input form={form} setForm={setForm} type="password" title="password" />
45 |         <button
46 |           className={`px-4 py-1 text-sm rounded-full bg-green-700 hover:bg-green-800 text-white w-fit mx-auto ${loading ? "opacity-50 pointer-events-none" : ""}`}
47 |           disabled={loading}
48 |         >
49 |           {loading ? "Signing In..." : "Sign In"}
50 |         </button>
51 |       </form>
52 |       <button
53 |         onClick={() => setSignReq("")}
54 |         className="mt-5 text-sm text-green-600 hover:text-green-700 flex items-center mx-auto"
55 |       >
56 |         <MdKeyboardArrowLeft /> All Sign In Options
57 |       </button>
58 |     </div>
59 |   );
60 | }
61 | 
62 | export default SignIn;
63 | 


--------------------------------------------------------------------------------
/src/Components/pages/Home/Header/UserModal.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { LiaUserSolid } from "react-icons/lia";
 3 | import { MdLocalLibrary } from "react-icons/md"; // Changed from MdOutlineLocalLibrary
 4 | import { BiSpreadsheet } from "react-icons/bi";
 5 | import { HiOutlineChartBar } from "react-icons/hi";
 6 | import { LiaEditSolid } from "react-icons/lia";
 7 | import { Blog } from "../../../Context/Context";
 8 | import { Link } from "react-router-dom";
 9 | import { secretEmail } from "../../../../utils/Helper";
10 | import { signOut } from "firebase/auth";
11 | 
12 | import { toast } from "react-toastify";
13 | 
14 | function UserModal({ setModal }) {
15 |   const { currentUser } = Blog();
16 |   const userModal = [
17 |     {
18 |       title: "Profile",
19 |       icon: <LiaUserSolid />,
20 |       path: `/profile/${currentUser?.uid}`,
21 |     },
22 |     {
23 |       title: "Library",
24 |       icon: <MdLocalLibrary />, // Changed from MdOutlineLocalLibrary
25 |       path: "/library",
26 |     },
27 |     {
28 |       title: "Stories",
29 |       icon: <BiSpreadsheet />,
30 |       path: "/stories",
31 |     },
32 |     {
33 |       title: "Stats",
34 |       icon: <HiOutlineChartBar />,
35 |       path: "/stats",
36 |     },
37 |   ];
38 | 
39 |   const logout = () => {
40 |     signOut().then(() => {
41 |       toast.success("Logged out successfully!");
42 |       setModal(false);
43 |     }).catch(error => {
44 |       toast.error(error.message);
45 |     });
46 |   };
47 | 
48 |   return (
49 |     <section
50 |       className="absolute w-[18rem] p-6 bg-white right-0 top-[100%]
51 |     shadows rounded-md z-50 text-gray-500">
52 |       <Link
53 |         to="/write"
54 |         className="flex md:hidden items-center gap-1 text-gray-500">
55 |         <span className="text-3xl">
56 |           <LiaEditSolid />
57 |         </span>
58 |         <span className="text-sm mt-2">Write</span>
59 |       </Link>
60 |       <div className="flex flex-col gap-4 border-b border-gray-300 pb-5">
61 |         {userModal.map((link, i) => (
62 |           <Link
63 |             onClick={() => setModal(false)}
64 |             className="flex items-center gap-2 text-gray-500 hover:text-black/70"
65 |             key={i}
66 |             to={link.path}>
67 |             <span className="text-2xl">{link.icon}</span>
68 |             <h2 className="text-md">{link.title}</h2>
69 |           </Link>
70 |         ))}
71 |       </div>
72 |       <button
73 |         onClick={logout}
74 |         className="flex flex-col pt-5 cursor-pointer hover:text-black/70">
75 |         Sign Out
76 |         <span className="text-sm">{secretEmail(currentUser?.email)}</span>
77 |       </button>
78 |     </section>
79 |   );
80 | }
81 | 
82 | export default UserModal;
83 | 


--------------------------------------------------------------------------------
/src/Components/pages/Home/Header/HomeHeader.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import { BsMedium } from "react-icons/bs";
 3 | import { CiSearch } from "react-icons/ci";
 4 | import { RiEditCircleLine } from "react-icons/ri";
 5 | import { IoMdNotificationsOutline } from "react-icons/io";
 6 | import { MdKeyboardArrowDown } from "react-icons/md";
 7 | import { Link } from 'react-router-dom';
 8 | import Modal from "../../../../utils/Modal";
 9 | import Search from '../Search';
10 | import UserModal from './UserModal';
11 | import Profile from "../../../../assets/img/profile.jpg";
12 | import { Blog } from '../../../Context/Context';
13 | import Loading from '../../../Loading/Loading';
14 | 
15 | function HomeHeader() {
16 |   const { currentUser, allUsers, userLoading } = Blog(); // Destructuring Blog context
17 |   const [modal, setModal] = useState(false);
18 |   const [search, setSearch] = useState(false);
19 |   const [userData, setUserData] = useState(null);
20 | 
21 |   useEffect(() => {
22 |     if (!userLoading && currentUser && allUsers.length > 0) {
23 |       const getUserData = allUsers.find((user) => user.id === currentUser.uid);
24 |       setUserData(getUserData);
25 |     }
26 |   }, [userLoading, currentUser, allUsers]);
27 | 
28 |   return (
29 |     <header className='border-b border-gray-200'>
30 |       {userLoading && <Loading/>}
31 |       <div className='size h-[60px] flex items-center justify-between'>
32 |         {/* left side div */}
33 |         <div className="flex items-center gap-3">
34 |           <Link to={"/"}>
35 |             <span className='text-5xl'>
36 |               <BsMedium/>
37 |             </span>
38 |           </Link>
39 |           <Search modal={search} setModal={setSearch}/>
40 |         </div>
41 |         {/* right side div we make */}
42 |         <div className='flex items-center gap-3 sm:gap-7'>
43 |           <span onClick={()=> setSearch(true)} className='flex sm:hidden text-3xl text-gray-100 cursor-pointer'><CiSearch/></span>
44 |           <Link to={"/write"} className='hidden md:flex items-center gap-1 text-gray-500'>
45 |             <span className='text-3xl'><RiEditCircleLine/></span>
46 |             <span className='text-sm mt-2'>Write</span>
47 |           </Link>
48 |           <span className='text-3xl text-gray-500 cursor-pointer'><IoMdNotificationsOutline/></span>
49 |             
50 |           <div className='flex items-center relative'>
51 |             <img onClick={()=> setModal(true)} className='w-[2.3rem] h-[2.3rem] object-cover rounded-full cursor-pointer' src={userData?.userImg ? userData.userImg : Profile} alt="Profile Image" />
52 |             <span className='text-gray-500 cursor-pointer'>
53 |               <MdKeyboardArrowDown/>
54 |             </span>
55 |             <Modal modal={modal} setModal={setModal}>
56 |               <div className={`${modal ? "visible opacity-100%" : "invisible opacity-0"} transition-all duration-100`}>
57 |                 <UserModal setModal={setModal}/>
58 |               </div>
59 |             </Modal>
60 |           </div>
61 |         </div>
62 |       </div>
63 |     </header>
64 |   );
65 | }
66 | 
67 | export default HomeHeader;
68 | 


--------------------------------------------------------------------------------
/src/Components/pages/Demo/Auth/SignUp.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import Input from "../../../../utils/Input";
 3 | import { MdKeyboardArrowLeft } from "react-icons/md";
 4 | import { toast } from "react-toastify";
 5 | import { createUserWithEmailAndPassword } from "firebase/auth";
 6 | import { auth, db } from "../../../../Firebase/Firebase-config";
 7 | import { useNavigate } from "react-router-dom";
 8 | import { doc, getDoc, setDoc } from "firebase/firestore";
 9 | 
10 | const SignUp = ({ setSignReq, setModal }) => {
11 |   const navigate = useNavigate();
12 |   const [loading, setLoading] = useState(false);
13 |   const [form, setForm] = useState({
14 |     username: "",
15 |     email: "",
16 |     password: "",
17 |     rePassword: "",
18 |   });
19 | 
20 |   const handleSubmit = async (e) => {
21 |     e.preventDefault();
22 |     if (form[("username", "email", "password", "rePassword")] === "") {
23 |       toast.error("All fields are required");
24 |     } else if (form["password"] !== form["rePassword"]) {
25 |       toast.error("Your passwords are not matching!!");
26 |       return;
27 |     } else {
28 |       setLoading(true);
29 |       const { user } = await createUserWithEmailAndPassword(
30 |         auth,
31 |         form.email,
32 |         form.password
33 |       );
34 | 
35 |       const ref = doc(db, "users", user.uid);
36 |       const userDoc = await getDoc(ref);
37 | 
38 |       if (!userDoc.exists()) {
39 |         await setDoc(ref, {
40 |           userId: user.uid,
41 |           username: form.username,
42 |           email: form.email,
43 |           userImg: "",
44 |           bio: "",
45 |           created: Date.now(),
46 |         });
47 |         navigate("/");
48 |         toast.success("New Account has been Created");
49 |         setModal(false);
50 |         setLoading(false);
51 |       }
52 |     }
53 |   };
54 | 
55 |   return (
56 |     <div className="size mt-[6rem] text-center">
57 |       <h2 className="text-3xl">Sign up with email</h2>
58 |       <p className="w-full sm:w-[25rem] mx-auto py-[3rem]">
59 |         Enter the email address associated with your account, and we’ll send a
60 |         magic link to your inbox.
61 |       </p>
62 |       <form onSubmit={handleSubmit} className="flex flex-col gap-4">
63 |         <Input form={form} setForm={setForm} type="text" title="username" />
64 |         <Input form={form} setForm={setForm} type="email" title="email" />
65 |         <Input form={form} setForm={setForm} type="password" title="password" />
66 |         <Input
67 |           form={form}
68 |           setForm={setForm}
69 |           type="password"
70 |           title="rePassword"
71 |         />
72 |         <button
73 |           className={`first-letter:px-4 py-1 text-sm rounded-full bg-green-700
74 |         hover:bg-green-800 text-white w-fit mx-auto
75 |         ${loading ? "opacity-50 pointer-events-none" : ""}`}>
76 |           Sign Up
77 |         </button>
78 |       </form>
79 |       <button
80 |         onClick={() => setSignReq("")}
81 |         className="mt-5 text-sm text-green-600 hover:text-green-700
82 |       flex items-center mx-auto">
83 |         <MdKeyboardArrowLeft />
84 |         All sign Up Options
85 |       </button>
86 |     </div>
87 |   );
88 | };
89 | 
90 | export default SignUp;
91 | 


--------------------------------------------------------------------------------
/src/Components/pages/Profile/Profile.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import ProfileAbout from "./Activites/ProfileAbout";
  3 | import ProfileList from "./Activites/ProfileList";
  4 | import ProfileHome from "./Activites/ProfileHome";
  5 | import Modal from "../../../utils/Modal";
  6 | import { LiaTimesSolid } from "react-icons/lia";
  7 | import { IoSettingsSharp } from "react-icons/io5";
  8 | import profileImg from "../../../assets/img/profile.jpg";
  9 | import { discoverActions } from "../../../data";
 10 | 
 11 | import EditProfile from "./EditProfile";
 12 | import { Blog } from "../../Context/Context";
 13 | import { useParams } from "react-router-dom";
 14 | 
 15 | function Profile() {
 16 |   const {allUsers} = Blog();
 17 |   const {userId} = useParams();
 18 |   const activity = [
 19 |     { title: "Home", comp: ProfileHome },
 20 |     { title: "Lists", comp: ProfileList },
 21 |     { title: "About", comp: ProfileAbout },
 22 |   ];
 23 | 
 24 |   const [currentActive, setCurrentActive] = useState(activity[0]);
 25 |   const [modal, setModal] = useState(false);
 26 | 
 27 |   const [editModal, setEditModal] = useState(false);
 28 |   const getAllUsersData = allUsers.find((user) => user.id === userId);
 29 |   console.log("all data", getAllUsersData);
 30 |   return (
 31 |     <section className="size flex gap-[4rem] relative ">
 32 |       {/* User activity */}
 33 |       <div className="mt-[9rem] flex-[2]">
 34 |         <div className="flex items-end gap-4">
 35 |           <h2 className="text-3xl sm:text-5xl font-bold capitalize">
 36 |             {getAllUsersData?.username || "Ali Raza"}
 37 |           </h2>
 38 |           <p className="text-gray-500 text-xs sm:text-sm">Followers(2)</p>
 39 |           <p className="text-gray-500 text-xs sm:text-sm">Following(2)</p>
 40 |         </div>
 41 |         <div className="flex items-center gap-5 mt-[1rem] border-b border-gray-200 mb-[3rem]">
 42 |           {activity.map((item, index) => (
 43 |             <div
 44 |               key={index}
 45 |               className={`py-[0.5rem] ${
 46 |                 item.title === currentActive.title
 47 |                   ? "border-b border-gray-500"
 48 |                   : ""
 49 |               }`}
 50 |             >
 51 |               <button onClick={() => setCurrentActive(item)}>
 52 |                 {item.title}
 53 |               </button>
 54 |             </div>
 55 |           ))}
 56 |         </div>
 57 |         <currentActive.comp setEditModal={setEditModal} getAllUsersData={getAllUsersData} />
 58 |       </div>
 59 |       {/* btn add to close and open side bar */}
 60 |       <button
 61 |         onClick={() => setModal(true)}
 62 |         className="fixed top-[8rem] right-0 w-[2rem] h-[2rem] bg-black text-white grid place-items-center md:hidden"
 63 |       >
 64 |         <IoSettingsSharp />
 65 |       </button>
 66 |       {/* User Full details here */}
 67 |       <Modal modal={modal} setModal={setModal}>
 68 |         <div
 69 |           className={`flex-[1] border-l border-gray-300 p-[2rem] z-10
 70 |         fixed right-0 bottom-0 top-0 w-[18rem] bg-white md:sticky
 71 |         ${modal ? "translate-x-0" : "translate-x-[100%] md:translate-x-0"}
 72 |         transition-all duration-500`}
 73 |         >
 74 |           {/* Icons make to close the profile */}
 75 |           <div className="pb-4 text-right ">
 76 |             <button
 77 |               onClick={() => setModal(false)}
 78 |               className="inline-block md:hidden "
 79 |             >
 80 |               <LiaTimesSolid />
 81 |             </button>
 82 |           </div>
 83 |           {/* Profile details make */}
 84 |           <div className="sticky top-7 flex-col justify-between">
 85 |             <img
 86 |               className="w-[3.5rem] h-[3.5rem] object-cover rounded-full"
 87 |               src={getAllUsersData?.userImg || profileImg}
 88 |               alt="profile-Img"
 89 |             />
 90 |             <h2 className="py-2 font-bold capitalize">Ali Raza</h2>
 91 |             <p className="text-gray-500 first-letter:uppercase text-sm">
 92 |               I am Ali Raza
 93 |             </p>
 94 | 
 95 |             <button
 96 |               className="text-green-700 pt-6 text-sm w-fit"
 97 |               onClick={() => setEditModal(true)}
 98 |             >
 99 |               {" "}
100 |               Edit Profile
101 |             </button>
102 |             {/* Nav data from datajs file get */}
103 |             <div className="flex-[1] flex items-center flex-wrap gap-3 pt-8">
104 |               {discoverActions.map((item, index) => (
105 |                 <button key={index} className="text-xs text-sm text-black">
106 |                   {item}
107 |                 </button>
108 |               ))}
109 |             </div>
110 |           </div>
111 |         </div>
112 |       </Modal>
113 |       {editModal && (
114 |         <EditProfile getAllUsersData={getAllUsersData} editModal={editModal} setEditModal={setEditModal} />
115 |       )}
116 |     </section>
117 |   );
118 | }
119 | 
120 | export default Profile;
121 | 


--------------------------------------------------------------------------------
/src/Components/pages/Demo/Auth/Auth.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import { LiaTimesSolid } from "react-icons/lia";
  3 | import { FcGoogle } from "react-icons/fc";
  4 | import { MdFacebook } from "react-icons/md";
  5 | import { AiOutlineMail } from "react-icons/ai";
  6 | import { FaApple } from "react-icons/fa";
  7 | import { BsTwitterX } from "react-icons/bs";
  8 | import { signInWithPopup } from "firebase/auth";
  9 | import { doc, getDoc, setDoc } from "firebase/firestore";
 10 | import { toast } from "react-toastify";
 11 | import { Navigate } from "react-router-dom";
 12 | import SignUp from "../Auth/SignUp"
 13 | import SignIn from "../Auth/SignIn"
 14 | 
 15 | import Modal from "../../../../utils/Modal";
 16 | import { auth, db, provider } from "../../../../Firebase/Firebase-config";
 17 | 
 18 | function Auth({ modal, setModal }) {
 19 |   const [createUser, setCreateUser] = useState(false);
 20 |   const [signReq, setSignReq] = useState("");
 21 | 
 22 |   // Function to handle Google authentication
 23 |   const GoogleAuth = async () => {
 24 |     try {
 25 |       const userCredential = await signInWithPopup(auth, provider);
 26 |       const newUser = userCredential.user;
 27 |       const ref = doc(db, "users", newUser.uid);
 28 |       const userDoc = await getDoc(ref);
 29 |       if (!userDoc.exists()) {
 30 |         await setDoc(ref, {
 31 |           userId: newUser.uid,
 32 |           username: newUser.displayName,
 33 |           email: newUser.email,
 34 |           userImg: newUser.photoURL,
 35 |           bio: "",
 36 |         });
 37 |         Navigate("/"); // Redirect to home page
 38 |         setModal(false); // Close the modal
 39 |         toast.success("Sign in with Google successful");
 40 |       }
 41 |     } catch (error) {
 42 |       toast.error("Error signing in with Google: " + error.message);
 43 |     }
 44 |   };
 45 | 
 46 |   // CSS class to control visibility of the modal
 47 |   const hidden = modal ? "visible opacity-100" : "invisible opacity-0";
 48 | 
 49 |   return (
 50 |     <Modal modal={modal} setModal={setModal} hidden={hidden}>
 51 |       <section className={`z-50 fixed top-0 bottom-0 left-0 md:left-[10rem] overflow-auto right-0 md:right-[10rem] bg-white shadows transition-all duration-500 ${hidden}`}>
 52 |         <button onClick={() => setModal(false)} className="absolute top-8 right-8 text-2xl hover:opacity-50">
 53 |           <LiaTimesSolid />
 54 |         </button>
 55 |         <div className="flex flex-col justify-center items-center gap-[3rem]">
 56 |           {signReq === "" ? (
 57 |             // Show sign-in/sign-up options
 58 |             <>
 59 |               <h2 className="text-2xl p-[5rem]">{createUser ? "Join Medium" : "Welcome Back"}</h2>
 60 |               <div className="flex flex-col gap-2 w-fit mx-auto">
 61 |                 <Button click={GoogleAuth} icon={<FcGoogle className="text-xl" />} text={`${createUser ? "Sign Up " : "Sign In"} With Google`} />
 62 |                 <Button icon={<MdFacebook className="text-xl" />} text={`${createUser ? "Sign Up " : "Sign In"} With Facebook`} />
 63 |                 <Button click={() => setSignReq(createUser ? "sign-In" : "sign-up")} icon={<AiOutlineMail className="text-xl" />} text={`${createUser ? "Sign Up " : "Sign In"} With Email`} />
 64 |                 {!createUser && (
 65 |                   <div className="main">
 66 |                     <div>
 67 |                       <Button icon={<FaApple className="text-xl" />} text="Sign In With Apple" />
 68 |                     </div>
 69 |                     <div className="mt-2">
 70 |                       <Button icon={<BsTwitterX className="text-xl" />} text="Sign In With Twitter" />
 71 |                     </div>
 72 |                   </div>
 73 |                 )}
 74 |               </div>
 75 |               <p>
 76 |                 {createUser ? "Already have an account?" : "No Account?"}
 77 |                 <button className="text-green-600 hover:text-green-700 font-bold ml-1" onClick={() => setCreateUser(!createUser)}>
 78 |                   {createUser ? "Create One" : "Sign In"}
 79 |                 </button>
 80 |               </p>
 81 |             </>
 82 |           ) : signReq === "sign-In" ? (
 83 |             // Show sign-in form
 84 |             <SignIn setModal={setModal} setSignReq={setSignReq} />
 85 |           ) : signReq === "sign-up" ? (
 86 |             // Show sign-up form
 87 |             <SignUp setModal={setModal} setSignReq={setSignReq} />
 88 |           ) : null}
 89 |           {!createUser && (
 90 |             // Forgot password or sign-in trouble message
 91 |             <p>
 92 |               Forgot email or trouble signing in? <button className="underline">Get help.</button>
 93 |             </p>
 94 |           )}
 95 |           <p className="md:[30rem] mx-auto text-center text-sm md-[3rem]">
 96 |             {`Click ${createUser ? "Sign In" : "Sign Up"} to agree to Medium’s Terms of Service and acknowledge that Medium’s Privacy Policy applies to you.`}
 97 |           </p>
 98 |         </div>
 99 |       </section>
100 |     </Modal>
101 |   );
102 | }
103 | 
104 | // Button component
105 | const Button = ({ icon, text, click }) => {
106 |   return (
107 |     <button onClick={click} className="flex items-center gap-10 sm:w-[20rem] border border-black px-3 py-2 rounded-full">
108 |       {icon} {text}
109 |     </button>
110 |   );
111 | };
112 | 
113 | export default Auth;
114 | 


--------------------------------------------------------------------------------
/src/Components/pages/Profile/EditProfile.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useRef, useState, useEffect } from "react";
  2 | import Modal from "../../../utils/Modal";
  3 | import { FaTimes } from "react-icons/fa";
  4 | import profileImg from "../../../assets/img/profile.jpg";
  5 | import { storage, db, uploadBytes, getDownloadURL, ref, doc } from "../../../Firebase/Firebase-config.js";
  6 | import { toast } from "react-toastify";
  7 | import { updateDoc } from "firebase/firestore";
  8 | 
  9 | function EditProfile({ editModal, setEditModal, getAllUsersData }) {
 10 |   const imgReference = useRef(null);
 11 |   const [imgURL, setImgURL] = useState("");
 12 |   const [loading, setLoading] = useState(false);
 13 |   const [form, setForm] = useState({
 14 |     username: "",
 15 |     bio: "",
 16 |     userImg: ""
 17 |   });
 18 | 
 19 |   const openFile = () => {
 20 |     imgReference.current.click();
 21 |   };
 22 | 
 23 |   const buttonStyle = "border border-gray-600 py-2 px-5 rounded-full text-green-600";
 24 | 
 25 |   useEffect(() => {
 26 |     if (getAllUsersData) {
 27 |       setForm({
 28 |         username: getAllUsersData.username,
 29 |         bio: getAllUsersData.bio,
 30 |         userImg: getAllUsersData.userImg,
 31 |       });
 32 |     }
 33 |   }, [getAllUsersData]);
 34 | 
 35 |   const saveForm = async () => {
 36 |     if (form.username.length < 1 || form.bio.length < 1) {
 37 |       toast.error("Please fill all the fields");
 38 |       return;
 39 |     }
 40 |     setLoading(true);
 41 |     const storageRef = ref(storage, `usersImg/${form.username}`);
 42 |     await uploadBytes(storageRef, form?.userImg);
 43 |     const imageURL = await getDownloadURL(storageRef);
 44 |     try {
 45 |       const uploadDocRef = doc(db, "users", getAllUsersData.id);
 46 |       await updateDoc(uploadDocRef, {
 47 |         username: form.username,
 48 |         bio: form.bio,
 49 |         userImg: imgURL ? imageURL : form.userImg
 50 |       });
 51 |       toast.success("Profile Updated");
 52 |       setLoading(false);
 53 |       setEditModal(false);
 54 |     } catch (error) {
 55 |       toast.error("Something went wrong");
 56 |     }
 57 |   };
 58 | 
 59 |   return (
 60 |     <Modal modal={editModal} setModal={setEditModal}>
 61 |       <div className="center w-[95%] md:w-[45rem] bg-white mx-auto shadows my-[1rem] z-20 mb-[3rem] p-[2rem]">
 62 |         <div className="flex items-center justify-between">
 63 |           <h2 className="font-bold text-xl">Profile Information</h2>
 64 |           <button onClick={() => setEditModal(false)} className="text-xl">
 65 |             <FaTimes />
 66 |           </button>
 67 |         </div>
 68 |         <section className="mt-6">
 69 |           <p className="pb-3 text-sm text-gray-500">Photo</p>
 70 |           <div className="flex gap-[2rem]">
 71 |             <div className="w-[5rem]">
 72 |               <img
 73 |                 className="min-h-[5rem] min-w-[5rem] object-cover border border-gray-500 rounded-full"
 74 |                 src={imgURL ? imgURL : form.userImg ? form.userImg : profileImg}
 75 |                 alt="image"
 76 |               />
 77 |               <input
 78 |                 onChange={(e) => {
 79 |                   setImgURL(URL.createObjectURL(e.target.files[0]));
 80 |                   setForm({ ...form, userImg: e.target.files[0] });
 81 |                 }}
 82 |                 accept="image/jpg, image/png, image/jpeg"
 83 |                 ref={imgReference}
 84 |                 type="file"
 85 |                 hidden
 86 |               />
 87 |             </div>
 88 |             <div>
 89 |               <div className="flex gap-4 text-sm">
 90 |                 <button onClick={openFile} className="text-green-600">
 91 |                   Update
 92 |                 </button>
 93 |                 <button className="text-red-600">Remove</button>
 94 |               </div>
 95 |               <p className="w-full sm:w-[20rem] text-gray-500 text-sm pt-2">
 96 |                 Recommended: Square JPG, PNG, or GIF, at least 1000 pixels per side
 97 |               </p>
 98 |             </div>
 99 |           </div>
100 |         </section>
101 |         <section className="pt-[1rem] text-sm">
102 |           <label className="pb-3 block" htmlFor="">
103 |             Name*
104 |           </label>
105 |           <input
106 |             onChange={(e) => setForm({ ...form, username: e.target.value })}
107 |             value={form.username}
108 |             type="text"
109 |             className="p-1 border-black w-full outline-none"
110 |             placeholder="Username..."
111 |             maxLength={50}
112 |           />
113 |           <p className="text-sm text-gray-600 pt-2">
114 |             Appears on your Profile page, as your byline, and in your responses. {form.username.length}/50
115 |           </p>
116 |           <section className="pt-[1rem] text-sm">
117 |             <label className="pb-3 block" htmlFor="">
118 |               Bio*
119 |             </label>
120 |             <input
121 |               onChange={(e) => setForm({ ...form, bio: e.target.value })}
122 |               value={form.bio}
123 |               type="text"
124 |               className="p-1 border-black w-full outline-none"
125 |               placeholder="Bio..."
126 |               maxLength={50}
127 |             />
128 |             <p className="text-sm text-gray-600 pt-2">
129 |               Appears on your Profile and next to your stories. {form.bio.length}/160
130 |             </p>
131 |           </section>
132 |         </section>
133 |         <div className="flex items-center justify-end gap-4 pt-[2rem]">
134 |           <button onClick={() => setEditModal(false)} className={buttonStyle}>
135 |             Cancel
136 |           </button>
137 |           <button onClick={saveForm} className={`${buttonStyle} bg-green-800 text-white`}>
138 |             Save
139 |           </button>
140 |         </div>
141 |       </div>
142 |     </Modal>
143 |   );
144 | }
145 | 
146 | export default EditProfile;
147 | 


--------------------------------------------------------------------------------
/src/data.js:
--------------------------------------------------------------------------------
  1 | export const nav = [
  2 |   {
  3 |     title: "Our story",
  4 |     path: "/",
  5 |   },
  6 |   {
  7 |     title: "Membership",
  8 |     path: "/",
  9 |   },
 10 |   {
 11 |     title: "Write",
 12 |     path: "/",
 13 |   },
 14 | ];
 15 | 
 16 | export const discover = [
 17 |   "Technology",
 18 |   "Study",
 19 |   "Programming",
 20 |   "Sport",
 21 |   "Knowledge",
 22 |   "Self Improvement",
 23 |   "Relationships",
 24 |   "Machine Learning",
 25 |   "Politics",
 26 | ];
 27 | 
 28 | export const discoverActions = [
 29 |   "Help",
 30 |   "Status",
 31 |   "Writers",
 32 |   "Blog",
 33 |   "Careers",
 34 |   "Privacy",
 35 |   "Terms",
 36 |   "About",
 37 |   "Text to speech",
 38 |   "Teams",
 39 | ];
 40 | 
 41 | export const recommendedPosts = [
 42 |   {
 43 |     postId: 1,
 44 |     user: "Tara Haelle",
 45 |     title:
 46 |       "We’re starting to understand more of what causes long COVID brain fog",
 47 |     subtitle: "Do this instead",
 48 |     desc: `Not only did a new study identify two blood proteins linked to cognitive difficulties a year 
 49 |     after COVID-19 infection, but the What is Lorem Ipsum?
 50 |     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
 51 |     industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
 52 |     and scrambled it to make a type specimen book. It has survived not only five centuries, but also
 53 |     the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the
 54 |     1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
 55 |     desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 56 |     Why do we use it?
 57 |     It is a long established fact that a reader will be distracted by the readable content of a page
 58 |     when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
 59 |     distribution of letters, as opposed to using 'Content here, content here', making it look like
 60 |     readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
 61 |     their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
 62 |     their infancy. Various versions have evolved over the years, sometimes by accident, sometimes
 63 |     on purpose (injected humour and the like).
 64 |     Where does it come from?
 65 |     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
 66 |     classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
 67 |     Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
 68 |     words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in
 69 |     classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10
 70 |     .32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,
 71 |     written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
 72 |     Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
 73 |     line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
 74 |     Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced
 75 |     in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.`,
 76 |     date: `Sep 13`,
 77 |     readTime: "7 min read",
 78 |     postImg:
 79 |       "https://miro.medium.com/v2/resize:fill:300:201/1*6nZUT6CkYE1frUF8eAVphw.jpeg",
 80 |     userImg:
 81 |       "https://fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto,q_auto,f_auto/gigs/142819271/original/09dafa4104fa6aeca4e62f33326be4933ae7ccac/create-cartoon-profile-picture-abd7.jpg",
 82 |   },
 83 |   {
 84 |     postId: 2,
 85 |     user: "Tara Haelle",
 86 |     title:
 87 |       "We’re starting to understand more of what causes long COVID brain fog",
 88 |     subtitle: "Do this instead",
 89 |     desc: `Not only did a new study identify two blood proteins linked to cognitive difficulties a year 
 90 |     after COVID-19 infection, but the What is Lorem Ipsum?
 91 |     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
 92 |     industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
 93 |     and scrambled it to make a type specimen book. It has survived not only five centuries, but also
 94 |     the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the
 95 |     1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
 96 |     desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 97 |     Why do we use it?
 98 |     It is a long established fact that a reader will be distracted by the readable content of a page
 99 |     when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
100 |     distribution of letters, as opposed to using 'Content here, content here', making it look like
101 |     readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
102 |     their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
103 |     their infancy. Various versions have evolved over the years, sometimes by accident, sometimes
104 |     on purpose (injected humour and the like).
105 |     Where does it come from?
106 |     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
107 |     classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
108 |     Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
109 |     words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in
110 |     classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10
111 |     .32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,
112 |     written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
113 |     Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
114 |     line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
115 |     Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced
116 |     in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.`,
117 |     date: `Sep 13`,
118 |     readTime: "7 min read",
119 |     postImg:
120 |       "https://miro.medium.com/v2/resize:fill:300:201/1*6nZUT6CkYE1frUF8eAVphw.jpeg",
121 |     userImg:
122 |       "https://fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto,q_auto,f_auto/gigs/142819271/original/09dafa4104fa6aeca4e62f33326be4933ae7ccac/create-cartoon-profile-picture-abd7.jpg",
123 |   },
124 | ];
125 | 
126 | export const users = [
127 |   {
128 |     userId: 1,
129 |     username: "Benjamin Marie",
130 |     bio: "Ph.D, research scientist in NLP/AI",
131 |     userImg:
132 |       "https://i.pinimg.com/736x/72/ea/af/72eaaf5c70436356bce53862c75c7eeb.jpg",
133 |   },
134 |   {
135 |     userId: 2,
136 |     username: "Benjamin Marie",
137 |     bio: "Ph.D, research scientist in NLP/AI",
138 |     userImg:
139 |       "https://i.pinimg.com/736x/72/ea/af/72eaaf5c70436356bce53862c75c7eeb.jpg",
140 |   },
141 |   {
142 |     userId: 3,
143 |     username: "Benjamin Marie",
144 |     bio: "Ph.D, research scientist in NLP/AI",
145 |     userImg:
146 |       "https://i.pinimg.com/736x/72/ea/af/72eaaf5c70436356bce53862c75c7eeb.jpg",
147 |   },
148 | ];
149 | 
150 | export const comments = [
151 |   {
152 |     id: 1,
153 |     username: "username",
154 |     userImg:
155 |       "https://i.pinimg.com/736x/72/ea/af/72eaaf5c70436356bce53862c75c7eeb.jpg",
156 |     text: "Nice post",
157 |     created: new Date(),
158 |   },
159 |   {
160 |     id: 2,
161 |     username: "username",
162 |     userImg:
163 |       "https://i.pinimg.com/736x/72/ea/af/72eaaf5c70436356bce53862c75c7eeb.jpg",
164 |     text: "Nice post Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem obcaecati totam officia doloremque est reprehenderit ipsam nam optio quisquam velit mollitia aliquid rem, eos repellat natus aliquam voluptatibus laborum, ratione assumenda earum. Beatae ratione recusandae laboriosam quo! Error quaerat esse tempore voluptatibus, aliquid possimus consequuntur doloremque mollitia dicta! Voluptate iure ut fugiat, animi quibusdam mollitia, necessitatibus laborum magnam facere cupiditate amet culpa aspernatur libero dolore porro expedita quia? Tempora modi perferendis natus impedit architecto, odio vitae! Impedit reiciendis, soluta laudantium non aut aliquid dolor. Omnis dolore eaque reiciendis eveniet, eius, facere eligendi ipsum atque iusto magnam deleniti blanditiis, corporis repudiandae?",
165 |     created: new Date(),
166 |   },
167 | ];
168 | 


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