From 934314840c871dceb3cbb4ecbbea673bee1b5237 Mon Sep 17 00:00:00 2001
From: Edward Kim <65283190+bepyan@users.noreply.github.com>
Date: Fri, 9 Aug 2024 23:37:39 +0900
Subject: [PATCH] refactor: placeholder (#32)

* refactor: placeholders

* style: sort attribute
---
 .../editor/elements/container-placeholder.tsx | 11 ----
 .../editor/elements/map-placeholder.tsx       | 21 -------
 .../editor/elements/placeholder.tsx           | 28 ---------
 .../editor/elements/text-placeholder.tsx      | 12 ----
 .../elements/two-columns-placeholder.tsx      | 12 ----
 src/components/editor/placeholders.tsx        | 62 +++++++++++++++++++
 .../editor/sidebar-elements-tab.tsx           | 26 ++++----
 7 files changed, 76 insertions(+), 96 deletions(-)
 delete mode 100644 src/components/editor/elements/container-placeholder.tsx
 delete mode 100644 src/components/editor/elements/map-placeholder.tsx
 delete mode 100644 src/components/editor/elements/placeholder.tsx
 delete mode 100644 src/components/editor/elements/text-placeholder.tsx
 delete mode 100644 src/components/editor/elements/two-columns-placeholder.tsx
 create mode 100644 src/components/editor/placeholders.tsx

diff --git a/src/components/editor/elements/container-placeholder.tsx b/src/components/editor/elements/container-placeholder.tsx
deleted file mode 100644
index e91b3a5..0000000
--- a/src/components/editor/elements/container-placeholder.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import Placeholder from "~/components/editor/elements/placeholder";
-
-type Props = {};
-
-export default function ContainerPlaceholder(props: Props) {
-  return (
-    <Placeholder type="container">
-      <div className="h-full w-full rounded-sm border-[1px] border-dashed border-muted-foreground/50 bg-muted" />
-    </Placeholder>
-  );
-}
diff --git a/src/components/editor/elements/map-placeholder.tsx b/src/components/editor/elements/map-placeholder.tsx
deleted file mode 100644
index ffbee7b..0000000
--- a/src/components/editor/elements/map-placeholder.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { MapIcon } from "lucide-react";
-import React from "react";
-import type { EditorElementType } from "~/components/editor/type";
-
-const MapPlaceholder = () => {
-  const handleDragStart = (e: React.DragEvent, type: EditorElementType) => {
-    if (type === null) return;
-    e.dataTransfer.setData("componentType", type);
-  };
-  return (
-    <div
-      draggable
-      onDragStart={(e) => handleDragStart(e, "map")}
-      className="flex h-14 w-14 items-center justify-center rounded-lg bg-muted"
-    >
-      <MapIcon size={40} className="text-muted-foreground" />
-    </div>
-  );
-};
-
-export default MapPlaceholder;
diff --git a/src/components/editor/elements/placeholder.tsx b/src/components/editor/elements/placeholder.tsx
deleted file mode 100644
index 6fc76af..0000000
--- a/src/components/editor/elements/placeholder.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { EditorElementType } from "~/components/editor/type";
-import { cn } from "~/lib/utils";
-
-type Props = {
-  type: EditorElementType;
-  children?: React.ReactNode;
-  className?: string;
-};
-
-export default function Placeholder({ type, children, className }: Props) {
-  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>
-  );
-}
diff --git a/src/components/editor/elements/text-placeholder.tsx b/src/components/editor/elements/text-placeholder.tsx
deleted file mode 100644
index d663355..0000000
--- a/src/components/editor/elements/text-placeholder.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { TypeIcon } from "lucide-react";
-import Placeholder from "~/components/editor/elements/placeholder";
-
-type Props = {};
-
-export default function TextPlaceholder(props: Props) {
-  return (
-    <Placeholder type="text">
-      <TypeIcon size={40} className="text-muted-foreground" />
-    </Placeholder>
-  );
-}
diff --git a/src/components/editor/elements/two-columns-placeholder.tsx b/src/components/editor/elements/two-columns-placeholder.tsx
deleted file mode 100644
index 17b0383..0000000
--- a/src/components/editor/elements/two-columns-placeholder.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Placeholder from "~/components/editor/elements/placeholder";
-
-type Props = {};
-
-export default function TwoColumnsPlaceholder(props: Props) {
-  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>
-  );
-}
diff --git a/src/components/editor/placeholders.tsx b/src/components/editor/placeholders.tsx
new file mode 100644
index 0000000..a65a7a0
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/editor/sidebar-elements-tab.tsx b/src/components/editor/sidebar-elements-tab.tsx
index 8c02533..478f30a 100644
--- a/src/components/editor/sidebar-elements-tab.tsx
+++ b/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",
     },
   ];