85 lines
2.9 KiB
TypeScript
85 lines
2.9 KiB
TypeScript
'use client'
|
||
|
||
import * as React from 'react'
|
||
import { Check } from 'lucide-react'
|
||
import { cn } from '@/lib/utils'
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogTrigger,
|
||
} from "@/components/ui/dialog"
|
||
import { templates } from '@/config/wechat-templates'
|
||
import { Button } from "@/components/ui/button"
|
||
|
||
interface WechatStylePickerProps {
|
||
value?: string
|
||
onSelect: (value: string) => void
|
||
}
|
||
|
||
export function WechatStylePicker({ value, onSelect }: WechatStylePickerProps) {
|
||
const [open, setOpen] = React.useState(false)
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={setOpen}>
|
||
<DialogTrigger asChild>
|
||
<Button variant="outline" size="sm">
|
||
{value ? templates.find(t => t.id === value)?.name : '选择样式...'}
|
||
</Button>
|
||
</DialogTrigger>
|
||
<DialogContent className="max-w-4xl">
|
||
<DialogHeader>
|
||
<DialogTitle>选择样式模板</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 py-4">
|
||
{templates.map((template) => (
|
||
<div
|
||
key={template.id}
|
||
className={cn(
|
||
"template-preview-card relative flex flex-col gap-4 rounded-lg border bg-card p-4 cursor-pointer",
|
||
value === template.id && "border-primary"
|
||
)}
|
||
onClick={() => {
|
||
onSelect(template.id)
|
||
setOpen(false)
|
||
}}
|
||
>
|
||
<div className="aspect-[4/3] overflow-hidden rounded-md border bg-white">
|
||
<div className={cn(
|
||
"p-4 transform scale-[0.6] origin-top-left",
|
||
template.styles
|
||
)}>
|
||
<h1 style={{
|
||
...template.options?.block?.h1,
|
||
fontSize: template.options?.block?.h1?.fontSize || '1.2em'
|
||
} as React.CSSProperties}>
|
||
标题示例
|
||
</h1>
|
||
<p style={{
|
||
...template.options?.block?.p,
|
||
fontSize: template.options?.block?.p?.fontSize || '1em'
|
||
} as React.CSSProperties}>
|
||
这是一段示例文本，展示不同样式模板的效果。
|
||
</p>
|
||
<blockquote style={template.options?.block?.blockquote as React.CSSProperties}>
|
||
引用文本示例
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<h3 className="font-medium">{template.name}</h3>
|
||
<p className="text-sm text-muted-foreground">{template.description}</p>
|
||
</div>
|
||
{value === template.id && (
|
||
<div className="absolute top-2 right-2">
|
||
<Check className="h-4 w-4 text-primary" />
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)
|
||
}
|