Skip to main content
ArcBlock Community

有办法使V0.dev生成的代码用在pagekit吗

null
Support
pages-kitdiscussion
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 replies

null22 months ago

比如上面这一段,依赖会找不到

Yechao Li22 months ago

是的,Pages Kit 暂不支持直接运行 v0 生成的代码,因为其会依赖自己的组件库

Reply