Add Netflix-style video browsing with categorized rows

Introduces a new `NetflixGrid` component to display videos in categorized rows, similar to Netflix. This includes styling for hidden scrollbars, adding a `className` prop to `VideoCard`, and updating the home page to conditionally render either the `VideoGrid` or the new `NetflixGrid` based on the `viewMode`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/spLs1aN
This commit is contained in:
sebastjanartic
2025-08-29 07:09:54 +00:00
parent d6273e70cf
commit 8ce0414679
5 changed files with 234 additions and 9 deletions
+15 -7
View File
@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/react-query";
import { type Video } from "@shared/schema";
import SearchHeader from "@/components/search-header";
import VideoGrid from "@/components/video-grid";
import NetflixGrid from "@/components/netflix-grid";
import go4LogoPath from "@assets/go4_1756394900352.png";
@@ -84,13 +85,20 @@ export default function Home() {
<div className="absolute top-10 right-2 w-0 h-0 border-l-[70px] border-l-transparent border-r-[70px] border-r-transparent border-b-[100px] border-b-blue-400/8 rotate-12 z-0"></div>
<div className="absolute top-1/2 left-2 w-0 h-0 border-l-[60px] border-l-transparent border-r-[60px] border-r-transparent border-b-[85px] border-b-purple-400/8 -rotate-12 z-0"></div>
<div className="absolute bottom-1/4 right-2 w-0 h-0 border-l-[50px] border-l-transparent border-r-[50px] border-r-transparent border-b-[70px] border-b-cyan-400/8 rotate-45 z-0"></div>
<VideoGrid
videos={allVideos}
isLoading={isLoading}
hasMore={false}
onLoadMore={() => {}}
viewMode={viewMode}
/>
{viewMode === "grid" ? (
<NetflixGrid
videos={allVideos}
isLoading={isLoading}
/>
) : (
<VideoGrid
videos={allVideos}
isLoading={isLoading}
hasMore={false}
onLoadMore={() => {}}
viewMode={viewMode}
/>
)}
</main>