Added Carousel and Calendar

pes-alcoding-club · Jan 30, 2021 · 25152eb · 25152eb
2 parents 3b39c37 + 5cfeceb
commit 25152eb
Show file tree

Hide file tree

Showing 8 changed files with 182 additions and 27 deletions.
diff --git a/components/Carousel.tsx b/components/Carousel.tsx
@@ -0,0 +1,129 @@
+import { Box, Image } from '@chakra-ui/react';
+import React, { useState } from 'react';
+import { FaArrowCircleRight, FaArrowCircleLeft } from 'react-icons/fa';
+import MediaQuery from 'react-responsive';
+// help from: https://www.youtube.com/watch?v=l1MYfu5YWHc :)
+
+const images = [
+    'https://lh3.googleusercontent.com/pw/ACtC-3eAOr_3m8nkwHFxUGVCocpqAsfRXF9iBmFBJ9Vsu6cUNNBf1KblJizIy-ouzALEPFiO3cPxHnBdcnGmWSzupTLDEdmjrjyTsEiG9OnGPSL_Oq8VED1IQ3Wn3MSpokTIJXZANbbmcmg3Loq_rv-YK_8jJQ=w1258-h944-no?authuser=0',
+    'https://lh3.googleusercontent.com/pw/ACtC-3eRo1AoiFwa2Ae5_SHXdEWVHcCEOIELaImOC832EgsRSCjUmjfXXEPd9QMvYfiHfCW9yJhZWFc_Zj0pwBMcBf4MeqOEV-QwLYD8CTOjzWudM8BcO1Zj-cnOtQGdliJ8ggUliYJcorb-tbWrOGob4eXCAA=w1258-h944-no?authuser=0',
+    'https://lh3.googleusercontent.com/pw/ACtC-3cnkp2xlwwIbF8sYZ4U3ODlOg4MHlX4UNA2ZhM8XQ01IYLkT5ig7VmCMyHoJHz2-cBehp4_7kwn7jK7d5ruXbLUeLiqtHjuglkXUX4j8bll4x0AjNzZg9424ep6VQqEgCh9TOUdhc3qGgEoAmMt_PFLzg=w1258-h944-no?authuser=0',
+];
+
+const Carousel = () => {
+    const [current, setCurrent] = useState<number>(0);
+    const increment = () => setCurrent((current + 1) % images.length);
+    const decrement = () => {
+        setCurrent(current !== 0 ? current - 1 : images.length - 1);
+    };
+    return (
+        <>
+            <MediaQuery minDeviceWidth={1224}>
+                <Box
+                    my="10"
+                    w="100%"
+                    display="flex"
+                    justifyContent="center"
+                    userSelect="none"
+                    position="relative"
+                >
+                    <FaArrowCircleLeft
+                        cursor="pointer"
+                        size="35"
+                        style={{
+                            position: 'absolute',
+                            top: '50%',
+                            left: '20%',
+                            zIndex: 10,
+                        }}
+                        onClick={decrement}
+                    />
+                    {images.map((src, key) => (
+                        <Box
+                            position="relative"
+                            zIndex="1"
+                            key={key}
+                            opacity={key === current ? '1' : '0'}
+                            transitionDuration={
+                                key === current ? '1s' : '1s ease'
+                            }
+                            transform={`scale(${
+                                key === current ? '1.08' : '1'
+                            })`}
+                        >
+                            {key === current && (
+                                <Image w="600px" h="400px" src={src} />
+                            )}
+                        </Box>
+                    ))}
+                    <FaArrowCircleRight
+                        z="10"
+                        cursor="pointer"
+                        size="35"
+                        style={{
+                            position: 'absolute',
+                            top: '50%',
+                            right: '20%',
+                            zIndex: 10,
+                        }}
+                        onClick={increment}
+                    />
+                </Box>
+            </MediaQuery>
+            <MediaQuery maxDeviceWidth={1224}>
+                <Box
+                    my="10"
+                    w="140%"
+                    display="flex"
+                    justifyContent="center"
+                    userSelect="none"
+                    position="relative"
+                >
+                    <FaArrowCircleLeft
+                        cursor="pointer"
+                        size="35"
+                        style={{
+                            position: 'absolute',
+                            top: '50%',
+                            left: '10%',
+                            zIndex: 10,
+                        }}
+                        onClick={decrement}
+                    />
+                    {images.map((src, key) => (
+                        <Box
+                            position="relative"
+                            zIndex="1"
+                            key={key}
+                            opacity={key === current ? '1' : '0'}
+                            transitionDuration={
+                                key === current ? '1s' : '1s ease'
+                            }
+                            transform={`scale(${
+                                key === current ? '1.08' : '1'
+                            })`}
+                        >
+                            {key === current && (
+                                <Image w="328px" h="216px" src={src} />
+                            )}
+                        </Box>
+                    ))}
+                    <FaArrowCircleRight
+                        z="10"
+                        cursor="pointer"
+                        size="35"
+                        style={{
+                            position: 'absolute',
+                            top: '50%',
+                            right: '10%',
+                            zIndex: 10,
+                        }}
+                        onClick={increment}
+                    />
+                </Box>
+            </MediaQuery>
+        </>
+    );
+};
+
+export default Carousel;
diff --git a/components/Floating.tsx b/components/Floating.tsx
@@ -4,26 +4,23 @@ import MediaQuery from 'react-responsive';
 import Link from 'next/link';
 
 const Floating = () => {
-    const ans = '1';
     return (
         <>
             <MediaQuery minDeviceWidth={1224}>
-                <Link href="/register">
-                    <Button
-                        size="lg"
-                        _hover={{ textColor: 'whitesmoke' }}
-                        boxShadow="lg"
-                        bgColor="#e94560"
-                        style={{
-                            opacity: ans,
-                            position: 'fixed',
-                            bottom: '30px',
-                            right: '30px',
-                        }}
-                    >
-                        Apply Now
-                    </Button>
-                </Link>
+                <Button
+                    size="lg"
+                    _hover={{ textColor: 'whitesmoke' }}
+                    boxShadow="lg"
+                    bgColor="#e94560"
+                    style={{
+                        opacity: 1,
+                        position: 'fixed',
+                        bottom: '30px',
+                        right: '30px',
+                    }}
+                >
+                    Apply Now
+                </Button>
             </MediaQuery>
             <MediaQuery maxDeviceWidth={1224}>
                 <Link href="/register">
@@ -38,6 +35,7 @@ const Floating = () => {
                             bottom: '0',
                             width: '100%',
                             height: '80px',
+                            zIndex: 100,
                             position: 'fixed',
                         }}
                     >

diff --git a/components/Nav.tsx b/components/Nav.tsx
@@ -27,21 +27,21 @@ const Nav: FC<props> = ({ l1, l2, l3 }) => {
                 color="whitesmoke"
                 style={{ fontSize: '20px', fontWeight: 'bold' }}
             >
-                <Link href={String(l1)}>{l1}</Link>
+                <Link href={l1.toLowerCase()}>{l1}</Link>
             </L>
             <L
                 _hover={{ color: '#e94560' }}
                 color="whitesmoke"
                 style={{ fontSize: '20px', fontWeight: 'bold' }}
             >
-                <Link href={String(lr)}>{l2}</Link>
+                <Link href={lr.toLowerCase()}>{l2}</Link>
             </L>
             <L
                 _hover={{ color: '#e94560' }}
                 color="whitesmoke"
                 style={{ fontSize: '20px', fontWeight: 'bold' }}
             >
-                <Link href={String(l2)}>{l3}</Link>
+                <Link href={l3=="Contact Us"?"contactus":l3.toLowerCase()}>{l3}</Link>
             </L>
         </div>
     );

diff --git a/pages/Calendar.tsx b/pages/Calendar.tsx
@@ -7,7 +7,7 @@ import MediaQuery from 'react-responsive';
 
 const Calendar = () => {
     return (
-        <ChakraProvider>
+        <>
             <Head>
                 <title>Calendar</title>
             </Head>
@@ -105,7 +105,7 @@ const Calendar = () => {
                 </div>
                 <Footer />
             </MediaQuery>
-        </ChakraProvider>
+        </>
     );
 };
 

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,8 +1,10 @@
 import { ChakraProvider } from '@chakra-ui/react';
+import { AppProps } from 'next/app';
+import '../styles/app.css';
 
-function MyApp({ Component, pageProps }) {
+function MyApp({ Component, pageProps }: AppProps) {
     return (
-        <ChakraProvider>
+        <ChakraProvider resetCSS>
             <Component {...pageProps} />
         </ChakraProvider>
     );

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,17 @@
+import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
+import { ColorModeScript } from '@chakra-ui/react'
+
+export default class Document extends NextDocument {
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <ColorModeScript />
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,22 +1,24 @@
-import { ChakraProvider } from '@chakra-ui/react';
+import { Box, ChakraProvider } from '@chakra-ui/react';
 import React from 'react';
 import AboutUs from '../components/AboutUs';
 import Floating from '../components/Floating';
 import Footer from '../components/Footer';
 import Header from '../components/Header';
 import Head from 'next/head';
+import Carousel from '../components/Carousel';
 
 const Landing = () => {
     return (
-        <ChakraProvider>
+        <>
             <Head>
                 <title>The Alcoding Club</title>
             </Head>
             <Header />
             <AboutUs />
+            <Carousel />
             <Footer />
             <Floating />
-        </ChakraProvider>
+        </>
     );
 };
 

diff --git a/styles/app.css b/styles/app.css
@@ -0,0 +1,7 @@
+html {
+    width: 100%;
+}
+
+body {
+    width: 100%;
+}