diff --git a/.gitignore b/.gitignore index a547bf3..265f50c 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,5 @@ dist-ssr *.njsproj *.sln *.sw? + +package-lock.json \ No newline at end of file diff --git a/package.json b/package.json index 46e4719..44a12e6 100644 --- a/package.json +++ b/package.json @@ -10,17 +10,23 @@ "preview": "vite preview" }, "dependencies": { + "lucide-react": "^0.378.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-icons": "^5.2.1", + "react-router-dom": "^6.23.1" }, "devDependencies": { "@types/react": "^18.2.37", "@types/react-dom": "^18.2.15", "@vitejs/plugin-react": "^4.2.0", + "autoprefixer": "^10.4.19", "eslint": "^8.53.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.4", + "postcss": "^8.4.38", + "tailwindcss": "^3.4.3", "vite": "^5.0.0" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..2e7af2b --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/src/App.jsx b/src/App.jsx index b81db42..5da7b4e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,23 @@ import React from "react"; +import { Routes, Route } from "react-router-dom"; +import AboutTheDevs from "./pages/AboutTheDevs"; +import LandingPage from "./pages/LandingPage"; +import NavBar from "./components/NavBar"; +import CategoryPage from "./pages/CategoryPage"; +import AboutTheApp from "./pages/AboutTheApp"; const App = () => { - return
Basic Pursuit React Starter
; + return ( + <> + + + } /> + } /> + } /> + } /> + + + ); }; export default App; diff --git a/src/components/AboutUs.jsx b/src/components/AboutUs.jsx new file mode 100644 index 0000000..707f07d --- /dev/null +++ b/src/components/AboutUs.jsx @@ -0,0 +1,175 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import { Linkedin, Mail } from "lucide-react"; +import { FiGithub } from "react-icons/fi"; + +const AboutUs = () => { + return ( + <> +
+
+
+
+ BS +
+
+
Brenda Soto
+
Software Engineer
+ +
+
+
+
+
+
+ IA +
+
+
Isiah Arrufat
+
Software Engineer
+ +
+
+
+
+
+
+ AG +
+
+
Alexander Gonzalez
+
Software Engineer
+ +
+
+
+
+
+
+ IB +
+
+
Iris Beckham
+
Software Engineer
+ +
+
+
+
+ + ); +}; + +export default AboutUs; diff --git a/src/components/CategoryTemplate.jsx b/src/components/CategoryTemplate.jsx new file mode 100644 index 0000000..e008e24 --- /dev/null +++ b/src/components/CategoryTemplate.jsx @@ -0,0 +1,127 @@ +import { CircleChevronRight, CircleChevronLeft } from "lucide-react"; +import React from "react"; +import { useState, useEffect } from "react"; + +const CategoryTemplate = () => { + // this usestate sets index of carousel images + const [currentIndex, setCurrentIndex] = useState(0); + //this useState sets array of images + const imagesArrayUrls = [ + "https://res.cloudinary.com/dvmczcg3f/image/upload/v1712642472/Tale%20Blazers/tarot-cards-profile-pic_fv6p7p.jpg", + "https://res.cloudinary.com/dvmczcg3f/image/upload/v1711650725/chartd_qlhbgr.jpg", + "https://res.cloudinary.com/dvmczcg3f/image/upload/v1711649108/colal-jpg_jzmskc.jpg", + "https://res.cloudinary.com/dvmczcg3f/image/upload/v1711416478/CourseQuest%20-%20App/circuit_board_pic_kgsrqb.jpg", + "https://res.cloudinary.com/dvmczcg3f/image/upload/v1706632712/Daily%20Spark%20-%20Landing%20Page%20Landscape%20Photos/vibrant-orange-landscape-of-sand-dunes-and-trees_e96ilu.jpg", + ]; + + const goToPreviousImage = () => { + setCurrentIndex( + (prevIndex) => + //check if previous index is 0, if it is set currentIndex to the length of allstoryEndings minus one + prevIndex === 0 ? imagesArrayUrls.length - 1 : prevIndex - 1 + // else decrease currentIndex by one + ); + }; + + const goToNextImage = () => { + setCurrentIndex( + (prevIndex) => + //check if previous index is equal to length of allStoryendings minus one, if yes set CurrenIndex to zero + prevIndex === imagesArrayUrls.length - 1 ? 0 : prevIndex + 1 + //else increase currentindex by 1 + ); + }; + + return ( +
+
+
+
+
Waste Category
+
+
+
+ +
+ image_of_waste +
+ +
+
+
+ What Can & What Can't Be Dropped Off +
+
+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. + Dignissimos aut odio cumque minus necessitatibus voluptates + excepturi illo veniam? Dicta sed distinctio, eveniet provident + suscipit soluta minus iure hic fugit molestias? What Can & What + Can't Be Drop OffWhat Can & What Can't Be Drop Off Lorem ipsum + dolor, sit amet consectetur adipisicing elit. Dignissimos aut odio + cumque minus necessitatibus voluptates excepturi illo veniam? + Dicta sed distinctio, eveniet provident suscipit soluta minus iure + hic fugit molestias? What Can & What Can't Be Drop OffWhat Can & + What Can't Be Drop Off Lorem ipsum dolor, sit amet consectetur + adipisicing elit. Dignissimos aut odio cumque minus necessitatibus + voluptates excepturi illo veniam? Dicta sed distinctio, eveniet + provident suscipit soluta minus iure hic fugit molestias? What Can + & What Can't Be Drop OffWhat Can & What Can't Be Drop Off Lorem + ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos + aut odio cumque minus necessitatibus voluptates excepturi illo + veniam? Dicta sed distinctio, eveniet provident suscipit soluta + minus iure hic fugit molestias? What Can & What Can't Be Drop + OffWhat Can & What Can't Be Drop Off +
+
+
+
+
+
+
+ Waste Drop Off Sites +
+
+
+ {/* //THIS ONE! */} +
+ Random Card Here +
+
+ Random Card Here +
+
+ Random Card Here +
+
+ Random Card Here +
+
+ Random Card Here +
+
+ Random Card Here +
+
+ Random Card Here +
+
+
+
+
+
+ ); +}; + +export default CategoryTemplate; diff --git a/src/components/Home.jsx b/src/components/Home.jsx new file mode 100644 index 0000000..03ae352 --- /dev/null +++ b/src/components/Home.jsx @@ -0,0 +1,46 @@ +import React from "react"; +import { Link } from "react-router-dom"; + +const Home = () => { + return ( + <> +
+ +
+
+
+

+ No Waste With, +

+

+ Smart Waste!!! +

+

+ Conscious waste management for NYC residents WHO CARE! +

+ + Learn More + +
+
+
+
+ + ); +}; + +export default Home; diff --git a/src/components/Mission.jsx b/src/components/Mission.jsx new file mode 100644 index 0000000..470ae4a --- /dev/null +++ b/src/components/Mission.jsx @@ -0,0 +1,53 @@ +import React from "react"; +import { Link } from "react-router-dom"; + +const Mission = () => { + return ( +
+
+
+

+ Our Mission +

+

+ At Smart Waste, we are dedicated to revolutionizing waste management + in New York City by providing conscious solutions tailored to the + needs of residents who prioritize sustainability and environmental + stewardship. Our mission is to empower and educate NYC residents to + make informed decisions about waste disposal, fostering a community + of individuals who care deeply about the environment and strive to + minimize their ecological footprint. +

+ {/* + Contact Us + */} +
+
+

+ Tools and Resources +

+

+ At Smart Waste, we pride ourselves on harnessing cutting-edge + technology and leveraging valuable resources to empower New York + City residents in conscious waste management. Our platform has been + meticulously crafted using the wealth of data available through the + OpenData NYC API, allowing us to provide real-time insights and + solutions tailored to the unique needs of NYC neighborhoods. +

+

+ With the combined power of OpenData NYC and DSNY resources, we've + developed a robust platform that enables users to make informed + decisions about waste disposal, locate waste disposal centers, and + engage in sustainable practices that benefit both the community and + the environment. +

+
+
+
+ ); +}; + +export default Mission; diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx new file mode 100644 index 0000000..14d63c7 --- /dev/null +++ b/src/components/NavBar.jsx @@ -0,0 +1,112 @@ +import React from "react"; +import { useState } from "react"; +import { Link, useNavigate } from "react-router-dom"; + +const NavBar = () => { + const [collapsed, setCollapsed] = useState(false); + + const toggleNavbar = () => { + setCollapsed(!collapsed); + }; + + return ( +
+
+ + S + m + a + r + t Waste + +
+ + About + + + + + + + The Team + +
+ © 2024 Smart Waste Inc. +
+
+
+ +
+ ); +}; + +export default NavBar; diff --git a/src/components/SharpsCategory.jsx b/src/components/SharpsCategory.jsx new file mode 100644 index 0000000..198d3c1 --- /dev/null +++ b/src/components/SharpsCategory.jsx @@ -0,0 +1,160 @@ +import { CircleChevronRight, CircleChevronLeft } from "lucide-react"; +import { useState, useEffect } from "react"; + +const SharpsCategory = () => { + // this is the usestate for the sharps disposal centers + const [ + allSharpsAndMedicalDropOffLocations, + setAllSharpsAndMedicalDropOffLocations, + ] = useState([]); + // this is the filtered sharps disposal list + const [filteredDropOffLocations, setFilteredDropOffLocations] = useState([]); + // this usestate sets index of carousel images + const [currentIndex, setCurrentIndex] = useState(0); + //this useState sets array of images + const imagesArrayUrls = [ + "https://res.cloudinary.com/dvmczcg3f/image/upload/v1712642472/Tale%20Blazers/tarot-cards-profile-pic_fv6p7p.jpg", + "https://res.cloudinary.com/dvmczcg3f/image/upload/v1711650725/chartd_qlhbgr.jpg", + "https://res.cloudinary.com/dvmczcg3f/image/upload/v1711649108/colal-jpg_jzmskc.jpg", + "https://res.cloudinary.com/dvmczcg3f/image/upload/v1711416478/CourseQuest%20-%20App/circuit_board_pic_kgsrqb.jpg", + "https://res.cloudinary.com/dvmczcg3f/image/upload/v1706632712/Daily%20Spark%20-%20Landing%20Page%20Landscape%20Photos/vibrant-orange-landscape-of-sand-dunes-and-trees_e96ilu.jpg", + ]; + + const goToPreviousImage = () => { + setCurrentIndex( + (prevIndex) => + //check if previous index is 0, if it is set currentIndex to the length of allstoryEndings minus one + prevIndex === 0 ? imagesArrayUrls.length - 1 : prevIndex - 1 + // else decrease currentIndex by one + ); + }; + + const goToNextImage = () => { + setCurrentIndex( + (prevIndex) => + //check if previous index is equal to length of allStoryendings minus one, if yes set CurrenIndex to zero + prevIndex === imagesArrayUrls.length - 1 ? 0 : prevIndex + 1 + //else increase currentindex by 1 + ); + }; + + useEffect(() => { + fetch(`https://data.cityofnewyork.us/resource/edk2-vkjh.json`) + .then((res) => res.json()) + .then((data) => { + setAllSharpsAndMedicalDropOffLocations(data); + }) + .catch((error) => { + console.error("Error updating state", error); + }); + }, []); + + console.log(allSharpsAndMedicalDropOffLocations); + + return ( +
+
+
+
+
+ Sharps & Medical Waste Category +
+
+
+
+ +
+ image_of_waste +
+ +
+
+
+ What Can & What Can't Be Dropped Off +
+
+
+
+

For Sharps

+
+
    +
  • Syringes
    • +
  • Needles
    • +
  • Scalpels
    • +
  • Lancets
    • +
  • Other Sharp Objects
    • +
+
+
+
+

For Medical Waste

+
+
    +
  • Medication
    • +
  • + Radtioactive Material & Excretions From Radiation + Patients: +
      +
    • Tissues
      • +
    • Diapers
      • +
    • Sanitary Napkins
      • +
    +
    • +
+
+
+
+
+
+
+
+
+ Waste Drop Off Sites +
+
+
+ {/* //THIS ONE! */} + {allSharpsAndMedicalDropOffLocations.map((location) => ( +
+
+
{location.sitename}
+
Borough: {location.borough}
+
Neighborhood: {location.ntaname}
+
Address: {location.address}
+
Site Type: {location.site_type}
+ {/*
Open: {}
*/} + {/*
{location}
*/} + {/*
Location: {borough}
+
Neighborhood: {ntaname}
+
Address: {location}
+
Open: {open_months}
+
Times of operation: {operation_day_hours}
+
+ Visit website +
*/} +
+
+ ))} +
+
+ {allSharpsAndMedicalDropOffLocations.length - 1} Locations +
+
+
+
+
+ ); +}; + +export default SharpsCategory; diff --git a/src/index.css b/src/index.css index cca57b3..b5c61c9 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,3 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/src/main.jsx b/src/main.jsx index 54b39dd..3b258d3 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -2,9 +2,12 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' +import { BrowserRouter } from 'react-router-dom' ReactDOM.createRoot(document.getElementById('root')).render( - - - , + + + + , + ) diff --git a/src/pages/AboutTheApp.jsx b/src/pages/AboutTheApp.jsx new file mode 100644 index 0000000..7217edd --- /dev/null +++ b/src/pages/AboutTheApp.jsx @@ -0,0 +1,11 @@ +import Mission from "../components/Mission"; + +const AboutTheApp = () => { + return ( +
+ +
+ ); +}; + +export default AboutTheApp; diff --git a/src/pages/AboutTheDevs.jsx b/src/pages/AboutTheDevs.jsx new file mode 100644 index 0000000..d1aa443 --- /dev/null +++ b/src/pages/AboutTheDevs.jsx @@ -0,0 +1,14 @@ +import React from "react"; +import AboutUs from "../components/AboutUs"; + +const AboutTheDevs = () => { + return ( +
+
Meet the Team
+
+ +
+ ); +}; + +export default AboutTheDevs; diff --git a/src/pages/CategoryPage.jsx b/src/pages/CategoryPage.jsx new file mode 100644 index 0000000..0ce6549 --- /dev/null +++ b/src/pages/CategoryPage.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import CategoryTemplate from "../components/CategoryTemplate"; +import SharpsCategory from "../components/SharpsCategory"; + +const CategoryPage = () => { + return ( +
+ {/*
Waste Hub
*/} + {/* */} + +
+ ); +}; + +export default CategoryPage; diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx new file mode 100644 index 0000000..df430db --- /dev/null +++ b/src/pages/LandingPage.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import Home from "../components/Home"; + +const LandingPage = () => { + return ( +
+ +
+ ); +}; + +export default LandingPage; diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..9948de7 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,61 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], + theme: { + extend: { + width: { + 100: "25rem", + 104: "26rem", + 108: "27rem", + 112: "28rem", + 116: "29rem", + 120: "30rem", + 124: "31rem", + 128: "32rem", + 132: "33rem", + 136: "34rem", + 140: "35rem", + 144: "36rem", + 148: "37rem", + 152: "38rem", + 156: "39rem", + 160: "40rem", + 164: "41rem", + 168: "42rem", + 172: "43rem", + 176: "44rem", + 180: "45rem", + 184: "46rem", + 188: "47rem", + 192: "48rem", + }, + height: { + 100: "25rem", + 104: "26rem", + 108: "27rem", + 112: "28rem", + 116: "29rem", + 120: "30rem", + 124: "31rem", + 128: "32rem", + 132: "33rem", + 136: "34rem", + 140: "35rem", + 144: "36rem", + 148: "37rem", + 152: "38rem", + 156: "39rem", + 160: "40rem", + 164: "41rem", + 168: "42rem", + 172: "43rem", + 176: "44rem", + 180: "45rem", + 184: "46rem", + 188: "47rem", + 192: "48rem", + }, + }, + }, + plugins: [], +};