From 5863571c67819753a6cf8d27cf336301aca97935 Mon Sep 17 00:00:00 2001 From: Prithvi Anil K Date: Sat, 30 Jan 2021 21:56:59 +0530 Subject: [PATCH] fixed issues --- components/Carousel.tsx | 13 ++---- components/Floating.tsx | 1 + components/Nav.tsx | 67 +++++++++++---------------- pages/{Calendar.tsx => calendar.tsx} | 10 ++-- pages/index.tsx | 5 +- public/img1.jpg | Bin 0 -> 1800246 bytes public/img2.jpg | Bin 0 -> 1085909 bytes public/img3.jpg | Bin 0 -> 1210287 bytes public/img4.jpg | Bin 0 -> 2472576 bytes tsconfig.json | 44 +++++++----------- 10 files changed, 58 insertions(+), 82 deletions(-) rename pages/{Calendar.tsx => calendar.tsx} (96%) create mode 100644 public/img1.jpg create mode 100644 public/img2.jpg create mode 100644 public/img3.jpg create mode 100644 public/img4.jpg diff --git a/components/Carousel.tsx b/components/Carousel.tsx index db1c903..75fd817 100644 --- a/components/Carousel.tsx +++ b/components/Carousel.tsx @@ -1,14 +1,11 @@ -import { Box, Image } from '@chakra-ui/react'; +import { Box } from '@chakra-ui/react'; +import Image from 'next/image'; 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 images = ['/img1.jpg', '/img2.jpg', '/img3.jpg', '/img4.jpg']; const Carousel = () => { const [current, setCurrent] = useState(0); @@ -52,7 +49,7 @@ const Carousel = () => { })`} > {key === current && ( - + )} ))} @@ -104,7 +101,7 @@ const Carousel = () => { })`} > {key === current && ( - + )} ))} diff --git a/components/Floating.tsx b/components/Floating.tsx index f19990a..8ec40e3 100644 --- a/components/Floating.tsx +++ b/components/Floating.tsx @@ -13,6 +13,7 @@ const Floating = () => { boxShadow="lg" bgColor="#e94560" style={{ + zIndex: 100, opacity: 1, position: 'fixed', bottom: '30px', diff --git a/components/Nav.tsx b/components/Nav.tsx index ca3031b..424d5b2 100644 --- a/components/Nav.tsx +++ b/components/Nav.tsx @@ -1,4 +1,4 @@ -import { Link as L } from '@chakra-ui/react'; +import { Box } from '@chakra-ui/react'; import React, { FC } from 'react'; import Link from 'next/link'; @@ -8,42 +8,31 @@ interface props { l3: String; } -const Nav: FC = ({ l1, l2, l3 }) => { - var lr = l2; - if (l2 == 'Home') { - lr = '/'; - } - return ( -
- - {l1} - - - {l2} - - - {l3} - -
- ); -}; +const LinkContainer = ({ children }) => ( + + {children} + +); + +const Nav: FC = ({ l1, l2, l3 }) => ( + + + {l1} + + + {l2} + + + + {l3} + + + +); + export default Nav; diff --git a/pages/Calendar.tsx b/pages/calendar.tsx similarity index 96% rename from pages/Calendar.tsx rename to pages/calendar.tsx index a741681..c125f0e 100644 --- a/pages/Calendar.tsx +++ b/pages/calendar.tsx @@ -1,9 +1,9 @@ -import { ChakraProvider, Heading, Divider, Text } from '@chakra-ui/react'; -import React, { FC } from 'react'; -import Footer from '../components/Footer'; +import { Divider, Heading, Text } from '@chakra-ui/react'; import Head from 'next/head'; -import Nav from '../components/Nav'; +import React from 'react'; import MediaQuery from 'react-responsive'; +import Footer from '../components/Footer'; +import Nav from '../components/Nav'; const Calendar = () => { return ( @@ -101,7 +101,7 @@ const Calendar = () => { height: '800px', margin: '20px auto 20px', }} - > + />