viewer/src/pages/NewAndPopular.tsx

import React from "react";
import Header from "../components/Header";
import { Skeleton } from "@/components/ui/skeleton";

const NewAndPopular: React.FC = () => {
  return (
    <div className="min-h-screen bg-netflix-background">
      <Header />
      <div className="container mx-auto pt-24 px-4">
        <h1 className="text-4xl font-bold text-white mb-8">New & Popular</h1>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {/* Placeholder content */}
          {Array(6)
            .fill(null)
            .map((_, index) => (
              <div key={index} className="bg-netflix-card rounded-md overflow-hidden">
                <Skeleton className="h-48 w-full" />
                <div className="p-4">
                  <Skeleton className="h-6 w-3/4 mb-2" />
                  <Skeleton className="h-4 w-full" />
                </div>
              </div>
            ))}
        </div>
      </div>
    </div>
  );
};

export default NewAndPopular;