37 lines
985 B
TypeScript
37 lines
985 B
TypeScript
import React from 'react'
|
|
import { Canvas } from '@/components/wysiwyg/Canvas'
|
|
import type { Frame } from '@/lib/wysiwyg/schema'
|
|
|
|
function sampleFrame(): Frame {
|
|
return {
|
|
id: 'f-sample',
|
|
width: 600,
|
|
height: 400,
|
|
background: '#ffffff',
|
|
layers: [
|
|
{
|
|
id: 'l1',
|
|
name: 'Base',
|
|
visible: true,
|
|
locked: false,
|
|
objects: [
|
|
{ id: 'o1', type: 'image', x: 40, y: 40, width: 100, height: 80, rotate: 0, zIndex: 0, props: { src: 'https://via.placeholder.com/100x80', alt: 'A' } },
|
|
{ id: 'o2', type: 'text', x: 200, y: 60, width: 200, height: 40, rotate: 0, zIndex: 1, props: { text: 'WYSIWYG', fontSize: 20, color: '#111111' } },
|
|
],
|
|
},
|
|
],
|
|
}
|
|
}
|
|
|
|
export function WysiwygPage() {
|
|
const frame = sampleFrame()
|
|
return (
|
|
<div className="p-6 space-y-4">
|
|
<h1 className="text-xl font-semibold">WYSIWYG Canvas</h1>
|
|
<Canvas frame={frame} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default WysiwygPage
|