refactor: placeholder (#32)

* refactor: placeholders

* style: sort attribute

src/components/editor/placeholders.tsx

@@ -0,0 +1,62 @@
+import { MapIcon, TypeIcon } from "lucide-react";
+import type { EditorElementType } from "~/components/editor/type";
+import { cn } from "~/lib/utils";
+
+type PlaceholderProps = {
+  type: EditorElementType;
+  children?: React.ReactNode;
+  className?: string;
+};
+
+function Placeholder({ type, children, className }: PlaceholderProps) {
+  const handleDragStart = (e: React.DragEvent) => {
+    if (type === null) return;
+    e.dataTransfer.setData("componentType", type);
+  };
+
+  return (
+    <div
+      draggable
+      onDragStart={handleDragStart}
+      className={cn(
+        "flex h-14 w-14 cursor-grab flex-row gap-1 rounded-lg bg-muted/70 p-2 active:cursor-grabbing",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function TextPlaceholder() {
+  return (
+    <Placeholder type="text">
+      <TypeIcon size={40} className="text-muted-foreground" />
+    </Placeholder>
+  );
+}
+
+export function TwoColumnsPlaceholder() {
+  return (
+    <Placeholder type="2Col">
+      <div className="h-full w-full rounded-sm border-[1px] border-dashed border-muted-foreground/50 bg-muted"></div>
+      <div className="h-full w-full rounded-sm border-[1px] border-dashed border-muted-foreground/50 bg-muted"></div>
+    </Placeholder>
+  );
+}
+
+export function MapPlaceholder() {
+  return (
+    <Placeholder type="map">
+      <MapIcon size={40} className="text-muted-foreground" />
+    </Placeholder>
+  );
+}
+
+export function ContainerPlaceholder() {
+  return (
+    <Placeholder type="container">
+      <div className="h-full w-full rounded-sm border-[1px] border-dashed border-muted-foreground/50 bg-muted" />
+    </Placeholder>
+  );
+}

src/components/editor/sidebar-elements-tab.tsx

@@ -1,8 +1,10 @@
 import React from "react";
-import ContainerPlaceholder from "~/components/editor/elements/container-placeholder";
-import MapPlaceholder from "~/components/editor/elements/map-placeholder";
-import TextPlaceholder from "~/components/editor/elements/text-placeholder";
-import TwoColumnsPlaceholder from "~/components/editor/elements/two-columns-placeholder";
+import {
+  ContainerPlaceholder,
+  MapPlaceholder,
+  TextPlaceholder,
+  TwoColumnsPlaceholder,
+} from "~/components/editor/placeholders";
 import type { EditorElementType } from "~/components/editor/type";
 import {
   Accordion,
@@ -26,27 +28,27 @@ export default function SidebarElementsTab(props: Props) {
     group: "layout" | "elements";
   }[] = [
     {
-      Component: <ContainerPlaceholder />,
-      label: "Container",
       id: "container",
+      label: "Container",
+      Component: <ContainerPlaceholder />,
       group: "layout",
     },
     {
-      Component: <TwoColumnsPlaceholder />,
-      label: "2 Columns",
       id: "2Col",
+      label: "2 Columns",
+      Component: <TwoColumnsPlaceholder />,
       group: "layout",
     },
     {
-      Component: <TextPlaceholder />,
-      label: "Text",
       id: "text",
+      label: "Text",
+      Component: <TextPlaceholder />,
       group: "elements",
     },
     {
-      Component: <MapPlaceholder />,
-      label: "map",
       id: "map",
+      label: "map",
+      Component: <MapPlaceholder />,
       group: "elements",
     },
   ];