From f2bfc4512c9ba6ee048a7bb97a8309e8336381f4 Mon Sep 17 00:00:00 2001 From: Varsani2520 Date: Sat, 27 Jul 2024 14:32:30 +0530 Subject: [PATCH] contact as well as contribution added --- package-lock.json | 39 +++ package.json | 1 + src/App.jsx | 373 ++-------------------------- src/components/Contact/Contact.jsx | 55 ++++ src/components/Footer.jsx | 4 +- src/components/Header.jsx | 51 ++++ src/components/Home.jsx | 327 ++++++++++++++++++++++++ src/components/Team/Contributor.jsx | 53 ++++ 8 files changed, 549 insertions(+), 354 deletions(-) create mode 100644 src/components/Contact/Contact.jsx create mode 100644 src/components/Header.jsx create mode 100644 src/components/Home.jsx create mode 100644 src/components/Team/Contributor.jsx diff --git a/package-lock.json b/package-lock.json index 341a663..feedd55 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "react-icons": "^5.2.1", "react-joyride": "^2.8.1", "react-modal": "^3.16.1", + "react-router-dom": "^6.25.1", "react-simple-chatbot": "^0.5.0", "rollup": "^4.18.0", "svgcanvas": "^2.5.0" @@ -682,6 +683,14 @@ "node": ">=14" } }, + "node_modules/@remix-run/router": { + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.18.0.tgz", + "integrity": "sha512-L3jkqmqoSVBVKHfpGZmLrex0lxR5SucGA0sUfFzGctehw+S/ggL9L/0NnC5mw6P8HUWpFZ3nQw3cRApjjWx9Sw==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.18.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz", @@ -4707,6 +4716,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.25.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.25.1.tgz", + "integrity": "sha512-u8ELFr5Z6g02nUtpPAggP73Jigj1mRePSwhS/2nkTrlPU5yEkH1vYzWNyvSnSzeeE2DNqWdH+P8OhIh9wuXhTw==", + "dependencies": { + "@remix-run/router": "1.18.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.25.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.25.1.tgz", + "integrity": "sha512-0tUDpbFvk35iv+N89dWNrJp+afLgd+y4VtorJZuOCXK0kkCWjEvb3vTJM++SYvMEpbVwXKf3FjeVveVEb6JpDQ==", + "dependencies": { + "@remix-run/router": "1.18.0", + "react-router": "6.25.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-simple-chatbot": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/react-simple-chatbot/-/react-simple-chatbot-0.5.0.tgz", diff --git a/package.json b/package.json index 3ae63a8..36e4917 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "react-icons": "^5.2.1", "react-joyride": "^2.8.1", "react-modal": "^3.16.1", + "react-router-dom": "^6.25.1", "react-simple-chatbot": "^0.5.0", "rollup": "^4.18.0", "svgcanvas": "^2.5.0" diff --git a/src/App.jsx b/src/App.jsx index 553ee14..60b8c7b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,364 +1,31 @@ -import { useEffect, useRef, useState } from "react"; -import { FaMoon, FaRegEye, FaRegEyeSlash, FaSun } from "react-icons/fa"; + +// import route +import { BrowserRouter, Routes, Route } from "react-router-dom"; +import Contact from '../src/components/Contact/Contact.jsx' // import download icon -import { FaDownload } from "react-icons/fa"; -import { RxCross1 } from "react-icons/rx"; -import { tourSteps } from "./utils/helpers"; -import BgColorSidePanel from "./components/BgColorSidePanel"; -import Menu from "./components/Menu"; -import { handleUpdates, handleDrawing } from "./utils/canvas"; -import { getCookie, setCookie, eraseCookie } from "./utils/manageCookies.js"; -import { FaBookOpen } from "react-icons/fa"; -import { VscClose } from "react-icons/vsc"; -import { PiPencilSimpleFill } from "react-icons/pi"; -import { BiArea } from "react-icons/bi"; -import { FaFeatherPointed } from "react-icons/fa6"; -import { RiScreenshot2Fill } from "react-icons/ri"; -import { FaFilePdf } from "react-icons/fa"; -import { TbFileTypeSvg } from "react-icons/tb"; -import { PiPlus } from "react-icons/pi"; -import { PiMinus } from "react-icons/pi"; -import Joyride from "react-joyride"; -import { SiBuymeacoffee } from "react-icons/si"; + import Footer from "./components/Footer"; -import useGoogleDrive from './useGoogleDrive'; // Import the custom hook -import logoText from "./assets/images/logoText.png"; +import Home from "./components/Home.jsx"; +import Header from "./components/Header.jsx"; +import Contributor from "./components/Team/Contributor.jsx"; function App() { - const canvasRef = useRef(null); - const [isDrawing, setIsDrawing] = useState(true); - const [thickness, setThickness] = useState(4); - const [color, setColor] = useState("#000"); - const [bgColor, setBgColor] = useState("#b7babf"); - const [darkMode, setDarkMode] = useState(null); - const [showMenuAndBgColor, setShowMenuAndBgColor] = useState(true); - const [steps] = useState(tourSteps); - const [modal, setModal] = useState(false); - const [canvasInitialized, setCanvasInitialized] = useState(false); - const [brushStyle, setBrushStyle] = useState("solid"); - const [selectedTool, setSelectedTool] = useState("brush"); - const { signIn, uploadFile } = useGoogleDrive(); // Use the custom hook - const [showTour, setShowTour] = useState(false); - - const style = { - guideline: `p-4 flex text-xs`, - }; - - const showGuidelines = () => { - setModal(!modal); - }; - - const closeModal = () => { - setModal(false); - }; - - const BUY_ME_COFFEE_LINK = "https://buymeacoffee.com/mastermickey"; - - useEffect(() => { - const canvas = canvasRef.current; - - const updateCanvasSize = () => { - const parent = canvas.parentElement; - canvas.width = parent.clientWidth * 0.9; - canvas.height = parent.clientHeight; - }; - - if (canvas && !canvasInitialized) { - setCanvasInitialized(true); - updateCanvasSize(); - window.addEventListener("resize", updateCanvasSize); - handleDrawing(canvas, color, thickness, bgColor, brushStyle); - } else if (canvasInitialized) { - handleUpdates(canvas, color, thickness, bgColor, brushStyle); - } - - return () => { - window.removeEventListener("resize", updateCanvasSize); - }; - }, [bgColor, color, thickness, canvasInitialized, brushStyle]); - - useEffect(() => { - const savedDarkMode = localStorage.getItem('darkMode'); - if (savedDarkMode !== null) { - const isDarkMode = savedDarkMode === 'true'; - setDarkMode(isDarkMode); - if (isDarkMode) { - document.body.classList.add('dark'); - } else { - document.body.classList.remove('dark'); - } - } - - const tourSeen = getCookie('tourSeen'); - if (!tourSeen) { - setShowTour(true); - setCookie('tourSeen', 'true', 365); - } - }, []); - - const toggleDarkMode = () => { - const newDarkMode = !darkMode; - setDarkMode(newDarkMode); - localStorage.setItem('darkMode', newDarkMode); - document.body.classList.toggle("dark"); - }; - - // to save drawing in google drive - const saveDrawing = () => { - const canvas = canvasRef.current; - if (canvas) { - canvas.toBlob((blob) => { - const file = new File([blob], 'drawing.png', { type: 'image/png' }); - signIn().then(() => uploadFile(file)); // Sign in and upload file to Google Drive - }); - } else { - alert('Canvas not found!'); - } - }; - - return ( - <> -
- -
-

- Draw it Out! -

-

- All you need is a canvas to craft your ideas. -

-
- - -
-
-
- {showTour && ( - - )} -
- {/* Buy me a coffee element */} -
-
-
- {/* Drawing Toolbar */} -
- {showMenuAndBgColor && ( - - )} - {/* Toolbar right menu section */} -
- {/* Eye button */} -
{ - setShowMenuAndBgColor((state) => !state); - }} - > - {showMenuAndBgColor ? : } -
- - {/* Theme Changer */} -
- {darkMode ? ( - - ) : ( - - )} -
- - {/* Save Drawing Button */} -
- -
- {/* Buy me a coffee */} - - - -
-
+ - {/* ----- Canvas ------ */} -
- -
- {showMenuAndBgColor && ( - - )} -
{ - setBgColor("#B7BABF"); - setBrushStyle("solid"); - setSelectedTool("brush"); - setCanvasInitialized(false); - setIsDrawing(true); - }} - > - -
-

- Made with 💝 by{" "} - - Master Mickey - - ! -

-
-
- -
    -
  • Guidelines
    • -
  • - - Draw your heart out using the pen. -
    • -
  • - - - {" "} - Use a light touch for delicate lines. - -
    • -
  • - - - {" "} - Capture your screen for reference. - -
    • -
  • - {" "} - - Export your work as a PDF for easy sharing. - -
    • -
  • - - - {" "} - Save your artwork as an SVG for scalability. - -
    • -
  • - - Zoom in to work on finer details. -
    • -
  • - - - {" "} - Zoom out for an overview of your drawing. - -
    • -
  • - - - Change your canvas size to preset values. - -
    • -
  • - - View only your canvas. -
    • -
-
-
-
-