91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
|
|
import React from 'react';
|
|
import { useEditor } from '@craftjs/core';
|
|
import { Card } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Type, Box, Image, Layers } from 'lucide-react';
|
|
import { Text, Container } from './UserBlocks';
|
|
|
|
export const Toolbox = () => {
|
|
const { connectors } = useEditor();
|
|
|
|
return (
|
|
<Card className="p-4 flex flex-col gap-3 bg-card/50 backdrop-blur">
|
|
<h3 className="text-xs font-semibold uppercase text-muted-foreground tracking-wider mb-1">Blocks</h3>
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="justify-start gap-2 cursor-move"
|
|
ref={(ref) => connectors.create(ref!, <Text text="New Text Block" />)}
|
|
>
|
|
<Type className="h-4 w-4" />
|
|
Text
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="justify-start gap-2 cursor-move"
|
|
ref={(ref) => connectors.create(ref!, <Container padding={20} />)}
|
|
>
|
|
<Box className="h-4 w-4" />
|
|
Container
|
|
</Button>
|
|
|
|
<Button variant="outline" className="justify-start gap-2" disabled>
|
|
<Image className="h-4 w-4" />
|
|
Image (Pro)
|
|
</Button>
|
|
|
|
<Button variant="outline" className="justify-start gap-2" disabled>
|
|
<Layers className="h-4 w-4" />
|
|
Layout (Pro)
|
|
</Button>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export const SettingsPanel = () => {
|
|
// Fix: Correctly access node state using type assertion or checking if exists
|
|
const { selected, actions } = useEditor((state) => {
|
|
const [currentNodeId] = state.events.selected;
|
|
let selected;
|
|
|
|
if (currentNodeId) {
|
|
const node = state.nodes[currentNodeId];
|
|
selected = {
|
|
id: currentNodeId,
|
|
name: node.data.displayName,
|
|
settings: node.related && node.related.settings,
|
|
isDeletable: (node.data as any).isDeletable !== false, // Use type assertion or default true
|
|
props: node.data.props
|
|
};
|
|
}
|
|
|
|
return { selected };
|
|
});
|
|
|
|
if (!selected) {
|
|
return (
|
|
<Card className="p-6 bg-card/50 backdrop-blur flex items-center justify-center text-center">
|
|
<div className="text-muted-foreground text-sm">
|
|
Select an element to edit properties
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Card className="bg-card/50 backdrop-blur">
|
|
<div className="p-3 border-b flex justify-between items-center">
|
|
<h3 className="font-semibold text-sm">{selected.name}</h3>
|
|
{selected.isDeletable && (
|
|
<Button variant="destructive" size="sm" onClick={() => actions.delete(selected.id)}>
|
|
Delete
|
|
</Button>
|
|
)}
|
|
</div>
|
|
{selected.settings && React.createElement(selected.settings, { ...selected.props, setProp: (cb: any) => actions.setProp(selected.id, cb) })}
|
|
</Card>
|
|
)
|
|
}
|