diff --git a/components/Countdown/countdown.js b/components/Countdown/countdown.js
index 58247b17..fb1a00b6 100644
--- a/components/Countdown/countdown.js
+++ b/components/Countdown/countdown.js
@@ -1,120 +1,122 @@
-import React, { useEffect, useRef, useState } from 'react';
-import Countdown from 'react-countdown';
+import { useEffect, useRef, useState } from "react";
+import Countdown from "react-countdown";
const dates = [
- {
- name: 'London, UK',
- date: 'September 20, 2023',
- },
- {
- name: 'Madrid, Spain',
- date: 'October 19, 2023',
- },
- {
- name: 'Bangalore, India',
- date: 'November 30, 2023',
- },
- {
- name: 'Paris, France',
- date: 'December 6, 2023',
- },
+ {
+ name: "London, UK",
+ date: "September 20, 2023",
+ },
+ {
+ name: "Madrid, Spain",
+ date: "October 19, 2023",
+ },
+ {
+ name: "Bangalore, India",
+ date: "November 30, 2023",
+ },
+ {
+ name: "Paris, France",
+ date: "December 6, 2023",
+ },
];
function Countdowns() {
- const [selectedIndex, setSelectedIndex] = useState(0);
+ const [selectedIndex, setSelectedIndex] = useState(0);
- const locationRef = useRef(null);
- const dateRef = useRef(null);
- useEffect(() => {
- const intervalId = setInterval(() => {
- locationRef.current.classList.remove('hidden');
- locationRef.current.classList.add('home-title');
- dateRef.current.classList.remove('hidden');
- dateRef.current.classList.add('home-title');
- setSelectedIndex((prevIndex) => (prevIndex + 1) % dates.length);
- setTimeout(() => {
- if(locationRef?.current) {
- locationRef.current.classList.remove('home-title');
- locationRef.current.classList.add('hidden');
- }
- if(dateRef?.current) {
- dateRef.current.classList.remove('home-title');
- dateRef.current.classList.add('hidden');
- }
- }, 9900); // Element stays visible for 800 milliseconds
- }, 10000); // Toggle visibility every 1500 milliseconds
+ const locationRef = useRef(null);
+ const dateRef = useRef(null);
+ useEffect(() => {
+ const intervalId = setInterval(() => {
+ locationRef.current.classList.remove("hidden");
+ locationRef.current.classList.add("home-title");
+ dateRef.current.classList.remove("hidden");
+ dateRef.current.classList.add("home-title");
+ setSelectedIndex((prevIndex) => (prevIndex + 1) % dates.length);
+ setTimeout(() => {
+ if (locationRef?.current) {
+ locationRef.current.classList.remove("home-title");
+ locationRef.current.classList.add("hidden");
+ }
+ if (dateRef?.current) {
+ dateRef.current.classList.remove("home-title");
+ dateRef.current.classList.add("hidden");
+ }
+ }, 9900); // Element stays visible for 800 milliseconds
+ }, 10000); // Toggle visibility every 1500 milliseconds
- return () => {
- clearInterval(intervalId);
- };
- }, []);
+ return () => {
+ clearInterval(intervalId);
+ };
+ }, []);
- const renderer = ({ days, hours, minutes, seconds, completed }) => {
- if (completed) {
- // Render a completed state
- return
-
-
-
-
-
-
- Ended
-
-
-
- } else {
- // Render a countdown
- return (
-
-
-
- {days}:
-
-
-
-
- {hours}:
-
-
-
-
- {minutes}:
-
-
-
-
- {seconds}
-
-
-
- );
- }
- };
- return (
-
-
-
-
- {dates[selectedIndex].name}
-
-
-
-
-
-
-
- );
+ const renderer = ({ days, hours, minutes, seconds, completed }) => {
+ if (completed) {
+ // Render a completed state
+ return (
+
+
+
+
+
+
+
+ Ended
+
+
+
+ );
+ } else {
+ // Render a countdown
+ return (
+
+
+
+ {days}:
+
+
+
+
+ {hours}:
+
+
+
+
+ {minutes}:
+
+
+
+
+ {seconds}
+
+
+
+ );
+ }
+ };
+ return (
+
+
+
+
+ {dates[selectedIndex].name}
+
+
+
+
+
+
+
+ );
}
export default Countdowns;
diff --git a/components/Slider/slider.js b/components/Slider/slider.js
index e7dc80d2..8465be4d 100644
--- a/components/Slider/slider.js
+++ b/components/Slider/slider.js
@@ -1,34 +1,34 @@
-import Slider from 'react-slick';
-import Arrow from '../illustration/arrow';
-import React, { useEffect, useState, useRef } from 'react';
-import { useMediaQuery } from 'react-responsive';
+import Slider from "react-slick";
+import Arrow from "../illustration/arrow";
+import React, { useEffect, useState, useRef } from "react";
+import { useMediaQuery } from "react-responsive";
function ReactSlider({ children }) {
- const isMobile = useMediaQuery({ maxWidth: '590px' });
- const [slides, setSlides] = useState(1);
+ const isMobile = useMediaQuery({ maxWidth: "590px" });
+ const [slides, setSlides] = useState(1);
- useEffect(() => {
- if (isMobile) {
- setSlides(1);
- }
- }, [isMobile]);
- const slider = useRef(null);
- const settings = {
- slidesToScroll: slides,
- infinite: true,
- autoplay: true,
- speed: 10000,
- autoplaySpeed: 0,
- centerMode: true,
- cssEase: 'linear',
- variableWidth: isMobile ? false : true,
- arrows: false,
- };
- return (
-
- {children}
-
- );
+ useEffect(() => {
+ if (isMobile) {
+ setSlides(1);
+ }
+ }, [isMobile]);
+ const slider = useRef(null);
+ const settings = {
+ slidesToScroll: slides,
+ infinite: true,
+ autoplay: children.length > 4,
+ speed: 10000,
+ autoplaySpeed: 0,
+ centerMode: true,
+ cssEase: "linear",
+ variableWidth: isMobile ? false : true,
+ arrows: false,
+ };
+ return (
+
+ {children}
+
+ );
}
export default ReactSlider;
diff --git a/components/Venue/venue.js b/components/Venue/venue.js
index dae60cba..9ace5de7 100644
--- a/components/Venue/venue.js
+++ b/components/Venue/venue.js
@@ -1,36 +1,60 @@
/* eslint-disable react/no-unescaped-entities */
-import React from 'react';
-import Link from 'next/link';
-import Image from 'next/image';
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
function Venue({ className, city }) {
- return (
-
-
-
-
- {city.cfp?
cfp is open
:null}
-
-
-
-
-
- {city.name=='Online'?{city.name} {city.country}:{city.country}, {city.name}}
-
-
-
-
-
-
- );
+ return (
+
+
+
+
+ {city.cfp ? (
+
+ cfp is open
+
+ ) : null}
+
+
+
+
+
+ {city.name == "Online" ? (
+
+ {city.name} {city.country}
+
+ ) : (
+
+ {city.country}, {city.name}
+
+ )}
+
+
+
+
+
+
+ );
}
export default Venue;
diff --git a/pages/_app.js b/pages/_app.js
index a7e54e34..397d70fe 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,9 +1,9 @@
-import '../styles/globals.css';
-import 'slick-carousel/slick/slick.css';
-import 'slick-carousel/slick/slick-theme.css';
-import Navbar from '../components/Navbar/navbar';
-import Footer from '../components/Footer/footer';
-import { useState, useEffect } from 'react';
+import "../styles/globals.css";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import Navbar from "../components/Navbar/navbar";
+import Footer from "../components/Footer/footer";
+import { useState, useEffect } from "react";
function MyApp({ Component, pageProps }) {
const [showChild, setShowChild] = useState(false);
@@ -17,13 +17,13 @@ function MyApp({ Component, pageProps }) {
return <>>;
}
return (
-
);
}
-export default MyApp
+export default MyApp;