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,17 +64,19 @@ 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">
-              <Image
-                width={250}
-                height={150}
-                src={e.picture}
-                alt={e.title}
-                unoptimized
-                className={cn(
-                  "h-auto w-auto object-cover transition-all group-hover:scale-105",
-                  "aspect-video",
-                )}
-              />
+              <AspectRatio ratio={16 / 9} className="bg-muted">
+                <Image
+                  width={250}
+                  height={150}
+                  src={e.picture}
+                  alt={e.title}
+                  unoptimized
+                  className={cn(
+                    "h-auto w-auto object-cover transition-all group-hover:scale-105",
+                    "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,17 +21,19 @@ export default function VideoCard({ className, card }: VideoCardProps) {
       )}
     >
       <div className="overflow-hidden rounded-md">
-        <Image
-          src={card.picture}
-          alt={card.title}
-          width={250}
-          height={150}
-          unoptimized
-          className={cn(
-            "h-auto w-auto object-cover transition-all group-hover:scale-105",
-            "aspect-video",
-          )}
-        />
+        <AspectRatio ratio={16 / 9} className="bg-muted">
+          <Image
+            src={card.picture}
+            alt={card.title}
+            width={250}
+            height={150}
+            unoptimized
+            className={cn(
+              "h-auto w-auto object-cover transition-all group-hover:scale-105",
+              "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",