pleb/flockstr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

aspect ratio placeholder

Browse Source
This commit is contained in:
zmeyer44 2023-10-14 23:27:31 -04:00
parent 582d80e242
commit 03df8085f3
5 changed files with 36 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/(app)/app/_sections/FeaturedLists.tsx
View File

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

BIN
bun.lockb
View File

Binary file not shown.

26
components/VideoCard/index.tsx
View File

@ -2,7 +2,7 @@ import Image from "next/image";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Badge } from "../ui/badge"; import { Badge } from "../ui/badge";
import { RxClock } from "react-icons/rx"; import { RxClock } from "react-icons/rx";
import { AspectRatio } from "@/components/ui/aspect-ratio";
type VideoCardProps = { type VideoCardProps = {
card: { card: {
picture: string; picture: string;
@ -21,17 +21,19 @@ export default function VideoCard({ className, card }: VideoCardProps) {
)} )}
> >
<div className="overflow-hidden rounded-md"> <div className="overflow-hidden rounded-md">
<Image <AspectRatio ratio={16 / 9} className="bg-muted">
src={card.picture} <Image
alt={card.title} src={card.picture}
width={250} alt={card.title}
height={150} width={250}
unoptimized height={150}
className={cn( unoptimized
"h-auto w-auto object-cover transition-all group-hover:scale-105", className={cn(
"aspect-video", "h-auto w-auto object-cover transition-all group-hover:scale-105",
)} "aspect-video",
/> )}
/>
</AspectRatio>
</div> </div>
<div className="flex-1 space-y-2 text-base"> <div className="flex-1 space-y-2 text-base">
<h3 className="line-clamp-2 font-medium leading-none">{card.title}</h3> <h3 className="line-clamp-2 font-medium leading-none">{card.title}</h3>

7
components/ui/aspect-ratio.tsx Normal file
View File

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

1
package.json
View File

@ -15,6 +15,7 @@
"@noble/hashes": "^1.3.2", "@noble/hashes": "^1.3.2",
"@nostr-dev-kit/ndk": "^2.0.0", "@nostr-dev-kit/ndk": "^2.0.0",
"@nostr-dev-kit/ndk-react": "^0.1.1", "@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-avatar": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-dropdown-menu": "^2.0.6",