aspect ratio placeholder

app/(app)/app/_sections/FeaturedLists.tsx

@@ -8,8 +8,6 @@ import {
 import LiveBadge from "@/components/Badges/LiveBadge";
 import { Button } from "@/components/ui/button";
 import { RiArrowRightLine } from "react-icons/ri";
-import VideoCard from "@/components/VideoCard";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import {
   Card,
   CardContent,
@@ -20,6 +18,7 @@ import Image from "next/image";
 import { cn } from "@/lib/utils";
 import { Avatar, AvatarImage, AvatarFallback } from "@radix-ui/react-avatar";
 import { Badge } from "@/components/ui/badge";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
 export default function FeaturedLists() {
   const demo = [
     {
@@ -65,6 +64,7 @@ export default function FeaturedLists() {
         {demo.map((e) => (
           <Card key={e.id} className="max-sm:border-0 max-sm:shadow-none">
             <div className="hidden overflow-hidden rounded-t-md sm:flex">
+              <AspectRatio ratio={16 / 9} className="bg-muted">
                 <Image
                   width={250}
                   height={150}
@@ -76,6 +76,7 @@ export default function FeaturedLists() {
                     "aspect-video",
                   )}
                 />
+              </AspectRatio>
             </div>
             <CardContent className="flex gap-x-3 p-0 sm:p-3">
               <div className="shrink-0">

components/VideoCard/index.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 import { cn } from "@/lib/utils";
 import { Badge } from "../ui/badge";
 import { RxClock } from "react-icons/rx";
-
+import { AspectRatio } from "@/components/ui/aspect-ratio";
 type VideoCardProps = {
   card: {
     picture: string;
@@ -21,6 +21,7 @@ export default function VideoCard({ className, card }: VideoCardProps) {
       )}
     >
       <div className="overflow-hidden rounded-md">
+        <AspectRatio ratio={16 / 9} className="bg-muted">
           <Image
             src={card.picture}
             alt={card.title}
@@ -32,6 +33,7 @@ export default function VideoCard({ className, card }: VideoCardProps) {
               "aspect-video",
             )}
           />
+        </AspectRatio>
       </div>
       <div className="flex-1 space-y-2 text-base">
         <h3 className="line-clamp-2 font-medium leading-none">{card.title}</h3>

components/ui/aspect-ratio.tsx

@@ -0,0 +1,7 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }

package.json

@@ -15,6 +15,7 @@
     "@noble/hashes": "^1.3.2",
     "@nostr-dev-kit/ndk": "^2.0.0",
     "@nostr-dev-kit/ndk-react": "^0.1.1",
+    "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",