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:
@@ -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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user