YOU STREAM 0.26.0

Add HomepageVideos.tsx
Add RegularVideoItem.tsx
Add HomepageVideos.styles.ts
Add RegularVideoItem.styles.ts
Update Content.tsx

README.md

@@ -10,7 +10,7 @@
 
 - **STACK :**
 
-  - **YOU STREAM** : `0.25.0`
+  - **YOU STREAM** : `0.26.0`
   - **REACT** : `18.2.0`
   - **PEXELS** : `1.4.0`
   - **REACT ICONS** : `5.0.1`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "you-stream",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",

src/components/content/Content.tsx

@@ -2,12 +2,14 @@ import React from "react";
 import { LoadingBackdrop, StyledContent } from "./Content.styles";
 import Categories from "../categories/Categories";
 import { useAppContext } from "../../context/App.context";
+import HomepageVideos from "../homepageVideos/HomepageVideos";
 
 const Content = () => {
   const { isFetchingVideos } = useAppContext();
   return (
     <StyledContent>
       <Categories />
+      <HomepageVideos />
       {isFetchingVideos && <LoadingBackdrop />}
     </StyledContent>
   );

src/components/header/Header.tsx

@@ -48,7 +48,7 @@ const Header = () => {
         </Icon>
         <LogoSection to="/">
           <FaYoutube color="#FF0000" size={30} />
-          <Text className="logo">YouStream v0.25.0</Text>
+          <Text className="logo">YouStream v0.26.0</Text>
         </LogoSection>
       </LeftSection>
       <SearchSection>

src/components/homepageVideos/HomepageVideos.styles.ts

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const StyledHomepageVideos = styled.div`
+  overflow-y: scroll;
+  height: 88.7vh;
+  padding: 1.6rem 1.5rem 0 0;
+`;
+
+export const RegularVideoThumbnailsContainer = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  column-gap: 1rem;
+  row-gap: 3rem;
+`;

src/components/homepageVideos/HomepageVideos.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import {
+  StyledHomepageVideos,
+  RegularVideoThumbnailsContainer,
+} from "./HomepageVideos.styles";
+import { useAppContext } from "../../context/App.context";
+import RegularVideoItem from "../regularVideoItem/RegularVideoItem";
+
+const HomepageVideos = () => {
+  const { videos } = useAppContext();
+  const FIRST_VIDEO_SECTION = videos.splice(0, 8);
+  const SECOND_VIDEO_SECTION = videos.splice(8, 20);
+  const THIRD_VIDEO_SECTION = videos.splice(20, 28);
+  return (
+    <StyledHomepageVideos>
+      <RegularVideoThumbnailsContainer>
+        {FIRST_VIDEO_SECTION.map((video, index) => (
+          <RegularVideoItem video={video} />
+        ))}
+      </RegularVideoThumbnailsContainer>
+    </StyledHomepageVideos>
+  );
+};
+
+export default HomepageVideos;

src/components/regularVideoItem/RegularVideoItem.styles.ts

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const StyledRegularVideoItem = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  background-color: red;
+  height: 10rem;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;

src/components/regularVideoItem/RegularVideoItem.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { StyledRegularVideoItem } from "./RegularVideoItem.styles";
+import { Video } from "pexels";
+
+interface IRegularVideoItemProps {
+  video: Video;
+}
+
+const RegularVideoItem = (video: IRegularVideoItemProps) => {
+  return <StyledRegularVideoItem>RegularVideoItem</StyledRegularVideoItem>;
+};
+
+export default RegularVideoItem;