84 lines
2.0 KiB
TypeScript
84 lines
2.0 KiB
TypeScript
import { FC, ReactNode } from "react";
|
|
import { useEntitiesStore } from "stores/entities.store";
|
|
|
|
import { shallow } from "zustand/shallow";
|
|
import {
|
|
RectProperties,
|
|
EllipseProperties,
|
|
TextProperties,
|
|
StaggeredTextProperties,
|
|
} from "./Primitives";
|
|
|
|
const PropertiesContainer: FC<{ children: ReactNode }> = ({ children }) => {
|
|
return (
|
|
<div className="w-full rounded-md lg:h-[500px] overflow-auto border transition-colors focus-within:border-gray-400 border-gray-600 flex flex-col items-start p-4">
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Properties = () => {
|
|
const { selectedEntity, entities, updateEntity } = useEntitiesStore(
|
|
(store) => ({
|
|
updateEntity: store.updateEntity,
|
|
selectedEntity: store.selectedEntity,
|
|
entities: store.entities,
|
|
}),
|
|
shallow
|
|
);
|
|
|
|
const entity = selectedEntity !== undefined && entities[selectedEntity];
|
|
|
|
if (entity) {
|
|
switch (entity.type) {
|
|
case "StaggeredText":
|
|
return (
|
|
<StaggeredTextProperties
|
|
key={selectedEntity}
|
|
onUpdate={(entity) => updateEntity(selectedEntity, entity)}
|
|
entity={entity}
|
|
/>
|
|
);
|
|
|
|
case "Text":
|
|
return (
|
|
<TextProperties
|
|
key={selectedEntity}
|
|
onUpdate={(entity) => updateEntity(selectedEntity, entity)}
|
|
entity={entity}
|
|
/>
|
|
);
|
|
|
|
case "Rect":
|
|
return (
|
|
<RectProperties
|
|
key={selectedEntity}
|
|
onUpdate={(entity) => updateEntity(selectedEntity, entity)}
|
|
entity={entity}
|
|
/>
|
|
);
|
|
|
|
case "Ellipse":
|
|
return (
|
|
<EllipseProperties
|
|
key={selectedEntity}
|
|
onUpdate={(entity) => updateEntity(selectedEntity, entity)}
|
|
entity={entity}
|
|
/>
|
|
);
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h3>Wähle ein Element aus</h3>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { PropertiesContainer };
|
|
export default Properties;
|