80 lines
4.1 KiB
TypeScript
80 lines
4.1 KiB
TypeScript
|
import { ChevronLeft, MoreHorizontal, X } from "lucide-react"
|
||
|
|
import type { PreviewProps } from "../../types"
|
||
|
|
import { createTopicSectionsFromImages } from "./helpers"
|
||
|
|
|
||
|
|
export function TopicPagePreview({ content }: PreviewProps) {
|
||
|
|
const topicSections = (content.topicSections && content.topicSections.length > 0)
|
||
|
|
? content.topicSections
|
||
|
|
: createTopicSectionsFromImages(content.imageUrls)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="relative flex h-[780px] w-[360px] flex-col overflow-hidden rounded-[28px] border border-gray-200 bg-white text-[#1a1a1a] shadow-2xl">
|
||
|
|
<div className="flex h-11 items-end justify-between bg-white px-8 pb-2 text-[15px] font-semibold tracking-tight text-[#1a1a1a]">
|
||
|
|
<span>9:41</span>
|
||
|
|
<div className="flex items-center gap-1.5 pb-1">
|
||
|
|
<svg width="17" height="11" viewBox="0 0 17 11" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||
|
|
<path d="M0 8.35L2.83 8.35L2.83 10.5H0V8.35ZM4.25 6.2H7.08V10.5H4.25V6.2ZM8.5 4.05H11.33V10.5H8.5V4.05ZM12.75 1.9H15.58V10.5H12.75V1.9Z" fill="#1a1a1a" />
|
||
|
|
</svg>
|
||
|
|
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||
|
|
<path d="M8 12L16 3.10931C11.5768 -0.493103 4.42323 -0.493103 0 3.10931L8 12Z" fill="#1a1a1a" />
|
||
|
|
</svg>
|
||
|
|
<div className="relative h-[11.33px] w-[24.33px] rounded-[3px] border border-black/35 p-[1px]">
|
||
|
|
<div className="h-full w-[18px] rounded-[1px] bg-[#1a1a1a]" />
|
||
|
|
<div className="absolute -right-[3px] top-[3px] h-[5px] w-[2px] rounded-r-[1px] bg-black/35" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<header className="flex h-14 items-center justify-between bg-white px-4">
|
||
|
|
<button className="p-2 text-[#1a1a1a]" type="button" aria-label="返回">
|
||
|
|
<ChevronLeft className="h-6 w-6" />
|
||
|
|
</button>
|
||
|
|
<h1 className="text-lg font-medium tracking-wide">{content.topicNavTitle || `${content.sourceCarName || "车型"}详情`}</h1>
|
||
|
|
<div className="flex h-8 items-center rounded-full border border-gray-200 bg-gray-50 px-1">
|
||
|
|
<button className="border-r border-gray-200 px-2 text-gray-500" type="button" aria-label="更多">
|
||
|
|
<MoreHorizontal className="h-4 w-4" />
|
||
|
|
</button>
|
||
|
|
<button className="px-2 text-gray-500" type="button" aria-label="关闭">
|
||
|
|
<X className="h-4 w-4" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main className="min-h-0 flex-1 overflow-y-auto pb-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
|
||
|
|
<section className="pt-4 pb-3 text-center">
|
||
|
|
<h2 className="mb-1 text-[28px] font-bold tracking-tight">{content.topicHeroTitle || "先锋设计"}</h2>
|
||
|
|
<div className="w-12 h-[3px] bg-[#d51c2a] mx-auto" />
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div className="space-y-2 px-0">
|
||
|
|
{topicSections.map((section) => (
|
||
|
|
<section key={section.id} className="bg-[#f8f9fb] rounded-t-[32px] overflow-hidden">
|
||
|
|
<div className="aspect-[16/9] relative overflow-hidden">
|
||
|
|
{section.imageUrl ? (
|
||
|
|
<img
|
||
|
|
src={section.imageUrl}
|
||
|
|
alt={section.title}
|
||
|
|
className="w-full h-full object-cover mix-blend-multiply"
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<div className="w-full h-full flex items-center justify-center text-xs text-gray-500 bg-gray-100">请添加模块图片</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className="px-5 py-1.5">
|
||
|
|
<h3 className="text-[19px] font-normal text-gray-700">{section.title}</h3>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer className="shrink-0 border-t border-gray-100 bg-white/80 px-4 pt-2 pb-4 backdrop-blur-md">
|
||
|
|
<button className="w-full rounded-md bg-[#1c1f23] py-3 text-[15px] font-medium text-white">
|
||
|
|
{content.ctaText || "预约体验"}
|
||
|
|
</button>
|
||
|
|
<div className="mx-auto mt-3 h-1 w-24 rounded-full bg-black/80" />
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|