diff --git a/README.md b/README.md index a792aa7d..883bcd0f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # Activities + A `reactplay` hustle This is a [Next.js](https://nextjs.org/) project. @@ -6,32 +7,34 @@ This is a [Next.js](https://nextjs.org/) project. ## Getting Started 1. Install dependencies - ```bash - yarn - ``` - **Note**: We do check in yarn.lock file. So it's advised to use `yarn` package manager. If you need to use any other package manager, remove `yarn.lock` file from the local directory first. Also, do not check in any other lock file. + ```bash + yarn + ``` + **Note**: We do check in yarn.lock file. So it's advised to use `yarn` package manager. If you need to use any other package manager, remove `yarn.lock` file from the local directory first. Also, do not check in any other lock file. 2. Create a `.env` file at the root of your project folder with the following content, - ```bash - NEXT_PUBLIC_NHOST_BACKEND_URL=https://rgkjmwftqtbpayoyolwh.nhost.run - NEXT_PUBLIC_NHOST_SUBDOMAIN=rgkjmwftqtbpayoyolwh - NEXT_PUBLIC_NHOST_REGION=ap-southeast-1 - NEXT_PUBLIC_NHOST_PROTOCOL=https - NEXT_PUBLIC_NHOST_SERVER=rgkjmwftqtbpayoyolwh.nhost.run - NEXT_PUBLIC_NHOST_VERSION=v1 - NEXT_PUBLIC_NHOST_ENDPOINT=graphql - NEXT_PUBLIC_DEV_PORT=3000 - NEXT_PUBLIC_PROTOCOL=http - NEXT_PUBLIC_HACKATHON_ID=e606ae64-7c92-4344-94ad-4d0684458bcf - NEXT_PUBLIC_HACKATHON_SUBMIT_STATUS_ID=ec1c0649-3b65-4809-92cf-9c4a6abdff1b - ``` + ```bash + NEXT_PUBLIC_NHOST_BACKEND_URL=https://rgkjmwftqtbpayoyolwh.nhost.run + NEXT_PUBLIC_NHOST_SUBDOMAIN=rgkjmwftqtbpayoyolwh + NEXT_PUBLIC_NHOST_REGION=ap-southeast-1 + NEXT_PUBLIC_NHOST_PROTOCOL=https + NEXT_PUBLIC_NHOST_SERVER=rgkjmwftqtbpayoyolwh.nhost.run + NEXT_PUBLIC_NHOST_VERSION=v1 + NEXT_PUBLIC_NHOST_ENDPOINT=graphql + NEXT_PUBLIC_DEV_PORT=3000 + NEXT_PUBLIC_PROTOCOL=http + NEXT_PUBLIC_HACKATHON_ID=e606ae64-7c92-4344-94ad-4d0684458bcf + NEXT_PUBLIC_HACKATHON_SUBMIT_STATUS_ID=ec1c0649-3b65-4809-92cf-9c4a6abdff1b + NEXT_PUBLIC_YOUTUBE_API_KEY=DUMMY_API_KEY + ``` + 3. Run the development server: - ```bash - npm run dev - # or - yarn dev - ``` + ```bash + npm run dev + # or + yarn dev + ``` 4. See your application running - Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. diff --git a/components/Banner.js b/components/Banner.js new file mode 100644 index 00000000..7d5d5d5b --- /dev/null +++ b/components/Banner.js @@ -0,0 +1,53 @@ +import Image from "next/image"; + +// icons +import { HiArrowNarrowRight } from "react-icons/hi"; + +// image +import HeroCoders from "@/public/twoplaysamonth/HeroCoders.svg"; + +const Banner = ({ events }) => { + console.log(events); + const currentEvent = events.filter((event) => event.isCurrent); + + return ( + <> + {currentEvent.length ? ( +
+
+ {/* primary section */} +
+
+ Logo +
+

+ {currentEvent[0].name} +

+

{currentEvent[0].description}

+ + Join{" "} + + + + +
+ {/* image section*/} +
+ +
+
+
+ ) : null} + + ); +}; + +export default Banner; diff --git a/components/ExtendedFooter.js b/components/ExtendedFooter.js new file mode 100644 index 00000000..7f2467a4 --- /dev/null +++ b/components/ExtendedFooter.js @@ -0,0 +1,205 @@ +import { IoAddSharp, IoLogoRss } from "react-icons/io5"; +import { MdManageSearch } from "react-icons/md"; +import { FaDiscord } from "react-icons/fa"; +import { BsTwitter, BsGithub } from "react-icons/bs"; +import Image from "next/image"; +import LogoLight from "../public/img-logo-light.svg"; +import { HiArrowNarrowRight } from "react-icons/hi"; + +const ExtendedFooter = () => { + return ( + + ); +}; + +export default ExtendedFooter; diff --git a/components/Footer.js b/components/Footer.js index d5f0d808..57db43ad 100644 --- a/components/Footer.js +++ b/components/Footer.js @@ -1,73 +1,81 @@ import Image from "next/image"; +import Link from "next/link"; +import { FaDiscord, FaTwitter, FaRss } from "react-icons/fa"; import FooterTriangles from "../public/FooterTriangles.svg"; import ReactPlayLogo from "../public/ReactPlayLogo.svg"; import FooterReactLogo from "../public/FooterReactLogo.svg"; -import { FaDiscord, FaTwitter, FaRss } from "react-icons/fa"; -import Link from "next/link"; +import ExtendedFooter from "./ExtendedFooter"; -const Footer = () => { +const Footer = ({ currentPath }) => { return ( - + <> + {currentPath == "/" ? ( + + ) : ( + + )} + ); }; diff --git a/components/Hack-R-Play/IdeaFilter.js b/components/Hack-R-Play/IdeaFilter.js index df00d032..fef27c8e 100644 --- a/components/Hack-R-Play/IdeaFilter.js +++ b/components/Hack-R-Play/IdeaFilter.js @@ -1,5 +1,5 @@ -import * as React from "react"; -import { useState, useEffect } from "react"; +import React, { useState, useEffect } from "react"; + import Pagination from "@/components/Pagination"; import SortButtons from "@/components/SortButtons"; import OwnerFilter from "@/components/OwnerFilter"; diff --git a/components/Header.js b/components/Header.js index 90a3a295..c116ba72 100644 --- a/components/Header.js +++ b/components/Header.js @@ -1,10 +1,9 @@ +import { useEffect, useState } from "react"; import Link from "next/link"; -import { useState } from "react"; -import { AiOutlineMenu, AiOutlineClose } from "react-icons/ai"; -import { PrimaryButton } from "./Buttons"; import Image from "next/image"; - import { useRouter } from "next/router"; +import { AiOutlineMenu, AiOutlineClose } from "react-icons/ai"; +import ReactPlayLogo from "@/public/ReactPlayLogo.svg"; const MobileHeader = ({ links, setMobileActive, redirectToRegistration }) => { return ( @@ -36,17 +35,42 @@ const MobileHeader = ({ links, setMobileActive, redirectToRegistration }) => { ); }; -const Header = ({ links, metainfo, secondary = false }) => { +const Header = ({ links, metainfo, secondary = false, hustleHomePage }) => { const [mobileActive, setMobileActive] = useState(false); const router = useRouter(); const redirectToRegistration = () => { router.push("/hackrplay/2022/registration"); }; + const [scroll, setScroll] = useState(false); + + const controlNavbar = () => { + if (typeof window !== "undefined") { + if (window.scrollY > 100) { + // if scroll down change the background color of the navbar + setScroll(true); + } else { + // if scroll up make remove background color from navbar + setScroll(false); + } + } + }; + + useEffect(() => { + if (typeof window !== "undefined") { + window.addEventListener("scroll", controlNavbar); + + // cleanup function + return () => { + window.removeEventListener("scroll", controlNavbar); + }; + } + }, [window.scrollY]); + return ( <> {secondary ? ( -
+
@@ -60,14 +84,45 @@ const Header = ({ links, metainfo, secondary = false }) => {
) : ( -
-
+
+ {hustleHomePage && ( + +
+ Logo +
+ + )} + diff --git a/components/Hero.js b/components/Hero.js new file mode 100644 index 00000000..91e6cf55 --- /dev/null +++ b/components/Hero.js @@ -0,0 +1,47 @@ +// import React from "react"; + +import Image from "next/image"; +import Link from "next/link"; + +import HeroBanner from "@/public/hustleHomePage/HeroBanner@2x.png"; +import { Config } from "@/services/metadata/home"; + +import { HiArrowNarrowRight } from "react-icons/hi"; + +const Hero = ({ hustleHomePage }) => { + const currentEvent = Config.events.filter((event) => event.isCurrent); + + return ( + <> + {currentEvent.length === 0 && hustleHomePage && ( + <> +
+ +
+
+

+ An unusual place for{" "} + Extraordinary React{" "} + events +

+

+ ReactPlay is an open-source platform to learn, crate and share + ReactJS Projects with the developer community. Start by browsing + the plays or explore the source code. +

+ +
+ View Past Events + + + +
+ +
+ + )} + + ); +}; + +export default Hero; diff --git a/components/Ideas/Card.js b/components/Ideas/Card.js index c8c2776c..8707eeec 100644 --- a/components/Ideas/Card.js +++ b/components/Ideas/Card.js @@ -1,11 +1,12 @@ -import styles from '../../styles/idea.module.css'; import Image from 'next/image'; +import { FiThumbsUp } from 'react-icons/fi'; +import { BiComment } from 'react-icons/bi'; import { Grid, Card, Typography } from '@mui/material'; + +import NotStarted from '/public/Idea-List/notStart.svg'; import InProgress from '/public/Idea-List/inProgress.svg'; import Complted from '/public/Idea-List/completed.svg'; -import NotStarted from '/public/Idea-List/notStart.svg'; -import { FiThumbsUp } from 'react-icons/fi'; -import { BiComment } from 'react-icons/bi'; +import styles from '../../styles/idea.module.css'; const IdeaCard = ({ data, onClick }) => { const get_status_style = (status) => { diff --git a/components/Layout.js b/components/Layout.js index 67077e2f..9cb72d90 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -1,19 +1,24 @@ -import { ThemeConfig } from "@/services/consts/theme"; +import React, { useEffect, useState } from "react"; import Head from "next/head"; import { useRouter } from "next/router"; -import React, { useEffect, useState } from "react"; + import Footer from "./Footer"; + +import Script from "next/script"; + +import Hero from "./Hero"; import Header from "./Header"; -const Layout = ({ children, title, description, metainfo }) => { +const Layout = ({ children, title, description, metainfo, hustleHomePage }) => { const currentPath = useRouter().pathname; const [secondaryNavbar, setSecondaryNavbar] = useState(false); const [loading, setLoading] = useState(true); useEffect(() => { if ( - currentPath === "/events/23/hackrplay/2022/home" || - currentPath === "/events/23/twoplaysamonth" + currentPath === "/events/22/hackrplay" || + currentPath === "/events/23/twoplaysamonth" || + currentPath === "/" ) { setSecondaryNavbar(false); } else { @@ -27,7 +32,11 @@ const Layout = ({ children, title, description, metainfo }) => { return ( <> {!loading ? ( -
+
{title} @@ -62,7 +71,7 @@ const Layout = ({ children, title, description, metainfo }) => { content={`https://hustles.reactplay.io/${metainfo.name}/og-image.png`} /> -