The hustle home page twitter space

components/Banner.js

@@ -0,0 +1,16 @@
+
+import bannerLogo from '../public/twoplaysamonth/NavbarLogo.png'
+import bannerImg from '@/public/twoplaysamonth/twoPlaysAMonthBanner.png'
+
+const Banner = ({}) => {
+   return (
+      <section className={` bg-[url('../public/twoplaysamonth/twoPlaysAMonthBanner.png')] md:h-[400px] h-[400px] lg:min-h-[400px] xl:min-h-[500px] bg-center  bg-cover bg-no-repeat relative`}>
+         <div className='flex align-center w-full  justify-center absolute bottom-24 md:bottom-4'>
+
+            <button className='bg-[#010326] text-white uppercase px-20 py-3 rounded font-bold hover:bg-slate-900 transition-all font-body'>Get started</button>
+         </div>
+      </section>
+   );
+};
+
+export default Banner;

components/Footer.js

@@ -1,10 +1,10 @@
 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";
 
 const Footer = () => {
   return (

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";

components/Header.js

@@ -1,10 +1,9 @@
-import Link from "next/link";
 import { useState } from "react";
-import { AiOutlineMenu, AiOutlineClose } from "react-icons/ai";
-import { PrimaryButton } from "./Buttons";
+import Link from "next/link";
 import Image from "next/image";
-
 import { useRouter } from "next/router";
+import { AiOutlineMenu, AiOutlineClose } from "react-icons/ai";
+
 
 const MobileHeader = ({ links, setMobileActive, redirectToRegistration }) => {
   return (

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) => {

components/Layout.js

@@ -1,7 +1,7 @@
-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 Header from "./Header";
 

components/LayoutWrapper.js

@@ -1,8 +1,9 @@
+import Image from 'next/image';
+
 import Layout from '@/components/Layout';
 import Flower from '../public/common/Flower.svg';
 import HeroLines from '../public/common/HeroLines.svg';
 import DottedAndFilledTriangle from '../public/common/DottedAndFilledTriangle.svg';
-import Image from 'next/image';
 
 const links = [
 	{

components/MediaLayout.js

@@ -0,0 +1,62 @@
+import Image from "next/image";
+import { FaTwitter } from "react-icons/fa";
+
+const MediaLayout = ({ videoLinks, twitterLinks, title, id }) => {
+const TwitterSpaces=({el})=>{
+	return(
+		<article className="bg-slate-900 max-w-[300px] p-4 rounded cursor-pointer hover:scale-110 transition-all duration-150">
+			<h2 className="text-xl font-primary">{el.title}</h2>
+			<p className="text-gray-400 text-xs">{el.date}</p>
+			<div className="flex  items-center justify-between">
+			<a
+              className="mt-3 inline-flex justify-center items-center font-body text-[#00F2FE] hover:underline  transition-all duration-150"
+              href={`https://twitter.com/${el.host}`}
+              rel="noreferrer"
+              target="_blank"
+            >
+              <FaTwitter className="mr-1" />
+              @{el.host}
+            </a>
+			<Image className="rounded-full" alt={el.host}
+                  src={el.avatar}
+                //   layout="responsive"
+                  width='50'
+                  height='50'
+                  />
+			</div>
+		</article>
+	)
+}
+
+	return (
+		<section id={id} className="text-white flex items-center justify-center my-28 w-full md:w-[80%] mx-auto px-4">
+			{/* wrapper */}
+			<div className="flex flex-col w-full">
+				<h1 className="bg-clip-text text-transparent font-extrabold text-3xl md:text-4xl bg-gradient-to-r from-[#43d9fe] to-[#1D1455] mb-8">{title}</h1>
+				<div className="flex flex-col md:flex-row w-full  mx-auto justify-center items-center gap-6  px-3 md:px-0 flex-wrap">
+					{videoLinks &&
+						videoLinks.map((el, i) => (
+							<iframe
+								key={i}
+								width="360"
+								height="315"
+								src={el.src}
+								title="YouTube video player"
+								frameborder="0"
+								allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+								allowfullscreen
+							></iframe>
+						))}
+					{twitterLinks && twitterLinks.map((el, i)=><a key={i}  target="_blank" href={el.link}><TwitterSpaces el={el}/></a>)}
+				</div>
+				<button className="mt-12 font-body text-cyan-400 hover:underline transition-shadow">
+					<a href={videoLinks ? "https://www.youtube.com/playlist?list=PLIJrr73KDmRxqfDS58ZC3MoianOjcm__Y" : ""} target="_blank">
+						{videoLinks ? "Show All Reactplay Lives" : "Show All Twitter Spaces"}
+					</a>
+				</button>
+			</div>
+		</section>
+	);
+};
+
+export default MediaLayout;

components/OwnerFilter.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+
 import { ToolBarButton } from "@/components/Buttons";
 
 export default function OwnerFilter({ onChange, selected }) {

components/Pagination.js

@@ -1,9 +1,7 @@
-import * as React from 'react';
-import { useState, useEffect } from 'react';
-import Button from '@mui/material/Button';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import Box from '@mui/material/Box';
+import React, { useState, useEffect } from 'react';
 import { FiChevronsLeft, FiChevronsRight } from 'react-icons/fi';
+import ButtonGroup from '@mui/material/ButtonGroup';
+
 import { ToolBarButton } from './Buttons';
 
 export default function Pagination({ total, pagesize, onChange }) {

components/SortButtons.js

@@ -1,13 +1,11 @@
-import * as React from 'react';
-import { useState, useEffect } from 'react';
-import Button from '@mui/material/Button';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import Box from '@mui/material/Box';
+import React, { useState, useEffect } from 'react';
 import { FiArrowUp, FiArrowDown } from 'react-icons/fi';
+
 import { ToolBarButton } from '@/components/Buttons';
 
 export default function SortButtons({ buttons, selected, onChange }) {
 	const [allButtons, setAllButtons] = useState([]);
+
 	useEffect(() => {
 		if (buttons.length) {
 			allButtons.length = 0;

components/common/About.js

@@ -1,9 +1,6 @@
 import Image from "next/image";
 
-import ReactPlayDotted from "../../public/common/ReactPlayLogoDotted.svg";
 import Flower from "../../public/common/Flower.svg";
-import { FiExternalLink } from "react-icons/fi";
-import { ThemeConfig } from "@/services/consts/theme";
 import { LinkLabel } from "../LinkLabel";
 
 const About = ({ metainfo }) => {

components/common/CTA.js

@@ -1,8 +1,7 @@
 import React from "react";
-import { SecondaryButton } from "../Buttons";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import { FiPlus } from "react-icons/fi";
+
 
 const CTA = ({ image, metainfo }) => {
   const router = useRouter();

components/common/FAQs.js

@@ -1,5 +1,4 @@
 import { useState, useRef, useEffect } from "react";
-
 import { FiPlus, FiMinus } from "react-icons/fi";
 
 const FAQs = ({ metainfo }) => {

components/common/Hero.js

@@ -1,20 +1,19 @@
+import { useEffect } from "react";
 import Image from "next/image";
+import { useRouter } from "next/router";
+import { BiRightArrowAlt } from "react-icons/bi";
+import { GiPartyPopper } from "react-icons/gi";
 
 import {
   PrimaryButton,
   SecondaryLink,
   SecondaryOutlinedButton,
 } from "../Buttons";
-import { FiCheckCircle } from "react-icons/fi";
-import { BiRightArrowAlt } from "react-icons/bi";
 
 import Flower from "../../public/common/Flower.svg";
 import HeroLines from "../../public/common/HeroLines.svg";
 import RadialGradient from "../../public/common/RadialGradient.svg";
 import ReactPlayLogo from "../../public/ReactPlayLogo.svg";
-import { GiPartyPopper } from "react-icons/gi";
-import { useRouter } from "next/router";
-import { useEffect } from "react";
 
 const Hero = ({ metainfo }) => {
   const router = useRouter();

components/common/Judges.js

@@ -1,9 +1,9 @@
 import Image from "next/image";
+import { FaTwitter } from "react-icons/fa";
 
 import DottedPattern from "../../public/common/DottedPattern.svg";
 import Lines from "../../public/common/Lines.svg";
-import { FaTwitter } from "react-icons/fa";
-import { ThemeConfig } from "@/services/consts/theme";
+
 
 const Judges = ({ metainfo }) => {
   return (

components/common/Winners.js

@@ -1,9 +1,9 @@
 import Image from "next/image";
-import { useEffect, useRef, useCallback } from "react";
+import { useEffect} from "react";
 import DottedPattern from "../../public/common/DottedPattern.svg";
 import Lines from "../../public/common/Lines.svg";
-import { FaRegFileCode, FaTwitter, FaGithub } from "react-icons/fa";
-import { MdOutlineSource, MdOutlineArticle } from "react-icons/md";
+import {  FaTwitter, FaGithub } from "react-icons/fa";
+import {  MdOutlineArticle } from "react-icons/md";
 import ConfettiGenerator from "confetti-js";
 import Link from "next/link";
 

components/form-builder/index.js

@@ -1,7 +1,7 @@
-import { TextField, FormControl, Autocomplete, Box } from '@mui/material';
 import { useEffect, useState } from 'react';
-import * as _ from 'lodash';
+import { TextField, FormControl, Autocomplete, Box } from '@mui/material';
 import { useUserData } from '@nhost/nextjs';
+import * as _ from 'lodash';
 
 const FormBuilder = ({ fields, data, onChange, disabled }) => {
 	const userData = useUserData();

components/interactions/index.js

@@ -1,21 +1,19 @@
-import * as React from 'react';
-
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
 import { useAuthenticationStatus, useUserData } from '@nhost/nextjs';
 import { TextField } from '@mui/material';
 import Snackbar from '@mui/material/Snackbar';
 import MuiAlert from '@mui/material/Alert';
-import Image from 'next/image';
+import { FiThumbsUp } from 'react-icons/fi';
+
 import styles from '@/styles/idea.module.css';
-import { useEffect, useState } from 'react';
 import { NHOST } from '@/services/nhost';
 import {
 	PrimaryButton,
-	SecondaryButton,
 	SecondaryOutlinedButton,
 } from '../Buttons';
 import { insert_comment, like_idea } from '@/services/graphql/interactions';
 import { time_since } from '@/services/util/time';
-import { FiThumbsUp } from 'react-icons/fi';
 import { escape_new_line, unescape_new_line } from '@/services/util/string';
 
 const Alert = React.forwardRef(function Alert(props, ref) {

components/status-bar/StatusBar.js

@@ -1,9 +1,4 @@
-import { TextField, FormControl, Autocomplete, Box } from '@mui/material';
-import { useEffect, useState } from 'react';
 import * as _ from 'lodash';
-import { useUserData } from '@nhost/nextjs';
-import Image from 'next/image';
-import { Typography } from '@mui/material';
 import styles from '@/styles/idea.module.css';
 import moment from 'moment';