Merge pull request #13 from Arroew/main

Added Footer.jsx & Video.jsx And Updated the App.js File.
Deba951 · Oct 5, 2023 · aa05edc · aa05edc
2 parents 07f29ef c53728e
commit aa05edc
Show file tree

Hide file tree

Showing 3 changed files with 148 additions and 0 deletions.
diff --git a/VIDEO HUB/my-app/src/App.js b/VIDEO HUB/my-app/src/App.js
@@ -5,6  5,8 @@ import Login from './component/Login';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Signup from './component/Signup';
 import Upload from './component/Upload';
 import Video from './component/Video';
 import Footer from './component/Footer';
 function App() {
   return (
     <Router>
@@ -14,7  16,9 @@ function App() {
         <Route path="/login" element={<Login />} />
         <Route path="/signup" element={<Signup />} />
         <Route path="/upload" element={<Upload />} />
         <Route path="/videos" element={<Video />} />
       </Routes>
       <Footer />
     </Router>
   );
 }

diff --git a/VIDEO HUB/my-app/src/component/Footer.jsx b/VIDEO HUB/my-app/src/component/Footer.jsx
@@ -0,0  1,91 @@
 import {
   Box,
   VStack,
   Heading,
   Stack,
   HStack,
   Button,
   Input,
   Text,
 } from '@chakra-ui/react';
 import React from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
 import { FiYoutube, FiTwitter, FiLinkedin } from 'react-icons/fi';
 const Footer = () => {
   return (
     <Box bgColor={'blackAlpha.900'} minH={'40'} p={'16'} color={'white'}>
       <Stack direction={['column', 'row']}>
         <VStack alignItems={'stretch'} w={'full'} px={'4'}>
           <Heading
             size={'md'}
             textTransform={'uppercase'}
             textAlign={['center', 'left']}
           >
             Subscribe to our NewsLetter
           </Heading>
           <HStack borderBottom={'2px solid white'} py={'2'}>
             <Input
               placeholder="Enter Email here..."
               border={'none'}
               borderRadius={'none'}
               focusBorderColor={'none'}
             />
             <Button
               p={'0'}
               color={'purple'}
               variant={'ghost'}
               borderRadius={'20px 20px 20px 0'}
             >
               <AiOutlineSend />
             </Button>
           </HStack>
         </VStack>
         <VStack
           w={'full'}
           borderRight={['none', '1px solid white']}
           borderLeft={['none', '1px solid white']}
         >
           <Heading
             size={'md'}
             textTransform={'uppercase'}
             textAlign={'center'}
             borderBottom={'2px solid white'}
           >
             VIDEO HUB
           </Heading>
           <Text>All Rights Reserved</Text>
         </VStack>
         <VStack w={'full'}>
           <Heading
             size={'md'}
             textTransform={'uppercase'}
             borderBottom={'2px solid white'}
           >
             Social Media
           </Heading>
         </VStack>
         <HStack>
           <Button variant={'link'} color={'purple'} p={'1'}>
             <a target="_blank" href="https://www.youtube.com/">
               <FiYoutube size={'28px'} />
             </a>
           </Button>
           <Button variant={'link'} color={'purple'} p={'1'}>
             <a target="_blank" href="https://twitter.com/Arrowe19">
               <FiTwitter size={'28px'} />
             </a>
           </Button>
           <Button variant={'link'} color={'purple'} p={'1'}>
             <a
               target="_blank"
               href="https://www.linkedin.com/in/aranya-das-820741210/"
             >
               <FiLinkedin size={'28px'} />
             </a>
           </Button>
         </HStack>
       </Stack>
     </Box>
   );
 };
 export default Footer;
diff --git a/VIDEO HUB/my-app/src/component/Video.jsx b/VIDEO HUB/my-app/src/component/Video.jsx
@@ -0,0  1,53 @@
 import React, { useState } from 'react';
 import { Heading, Stack, VStack, Text, Button } from '@chakra-ui/react';
 const Video = () => {
   const videosArr = [
     'https://player.vimeo.com/progressive_redirect/playback/689949818/rendition/540p?loc=external&oauth2_token_id=1027659655&signature=cf602155bf49e4e74db6f2ec9d4ecf067fbab44c4295a8950d58ecdb88910882',
     'https://player.vimeo.com/progressive_redirect/playback/697718184/rendition/360p?loc=external&oauth2_token_id=1027659655&signature=26d69c3df603d083fedd663acaab4d35a33444d11033a626864cf1e578e136cf',
     'https://player.vimeo.com/external/510850877.hd.mp4?s=d5e9ed9ea40ba755e28512cce6c1ad00d92506f7&profile_id=174',
     'https://player.vimeo.com/external/577442929.hd.mp4?s=95231c8a7fe2066ffb640204591b01a6c326b97c&profile_id=174',
     'https://player.vimeo.com/progressive_redirect/playback/689925384/rendition/360p?loc=external&oauth2_token_id=1027659655&signature=5a819f11298d53cc1ed85837342f47ea61c8f95b9aeeb0c38edab72a80e0db78',
     'https://player.vimeo.com/progressive_redirect/playback/688648666/rendition/720p?loc=external&oauth2_token_id=1027659655&signature=070a16d4b244bc11c2bd17b03e04e50460be3d2726ed554959a49fc05dbd0281',
     'https://player.vimeo.com/progressive_redirect/playback/690770660/rendition/720p?loc=external&oauth2_token_id=1027659655&signature=3a048039957fd878fc72b809b9a0e5f2102eded879a83e00784ecd3ba5123614',
   ];
   const [videoSrc, setVideoSrc] = useState(videosArr[0]);
   return (
     <Stack direction={['column', 'row']} h={'100vh'}>
       <VStack w={'full'}>
         <video
           controls
           controlsList="nodownload"
           src={videoSrc}
           style={{ width: '100%' }}
         ></video>
         <VStack alignItems={'flex-start'} p={'8'} w={'full'} overflowY={'auto'}>
           <Heading>Sample Video 1</Heading>
           <Text letterSpacing={'widest'} fontStyle={'oblique'}>
             This is a sample video. This so for samplingThis is a sample video.
             This so for sampling This is a sample video. This so for sampling
             This is a sample video. This so for samplingThis is a sample video.
           </Text>
         </VStack>
       </VStack>
       <VStack
         w={['full', 'xl']}
         alignItems={'stretch'}
         p={'8'}
         spacing={'8'}
         overflowY={'auto'}
       >
         {videosArr.map((item, index) => (
           <Button
             color={'purple'}
             variant={'solid'}
             onClick={index => setVideoSrc(item)}
           >
             Video {index   1}
           </Button>
         ))}
       </VStack>
     </Stack>
   );
 };
 
 export default Video;