javascript
import * as React from "react"
import Image from "next/image"
import Link from "next/link"
import { Card, CardContent } from "@/components/ui/card"
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/components/ui/carousel"
// 定义海报数据类型
interface Poster {
id: number
imageUrl: string
link: string
alt: string
}
// 示例海报数据
const posters: Poster[] = [
{ id: 1, imageUrl: "/placeholder.svg?height=400&width=800", link: "https://example.com/1", alt: "Poster 1" },
{ id: 2, imageUrl: "/placeholder.svg?height=400&width=800", link: "https://example.com/2", alt: "Poster 2" },
{ id: 3, imageUrl: "/placeholder.svg?height=400&width=800", link: "https://example.com/3", alt: "Poster 3" },
]
export default function ClickableCarousel() {
return (
<Carousel className="w-full max-w-4xl mx-auto">
<CarouselContent>
{posters.map((poster) => (
<CarouselItem key={poster.id}>
<Link href={poster.link} passHref>
<Card className="cursor-pointer transition-transform hover:scale-105">
<CardContent className="p-0">
<Image
src={poster.imageUrl}
alt={poster.alt}
width={800}
height={400}
className="object-cover w-full h-auto"
/>
</CardContent>
</Card>
</Link>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
)
}
2 条回复
比如上面这一段,依赖会找不到
是的,Pages Kit 暂不支持直接运行 v0 生成的代码,因为其会依赖自己的组件库