refactor: code cleanup

apps/dashboard/src/components/Button.tsx

@@ -4,13 +4,14 @@ interface ButtonProps {
   icon?: ReactNode
   variant?: 'danger'
   onClick: () => void
+  isLoading?: boolean
   className?: string
   children: ReactNode
 }
 
-export function Button({ icon, variant, onClick, className, children }: ButtonProps) {
+export function Button({ icon, variant, onClick, isLoading, className, children }: ButtonProps) {
   return (
-    <button className={`flex gap-3 items-center px-3 py-1 border rounded ${variant === 'danger' ? 'text-red-900 bg-red-50 border-red-200 hover:border-red-300' : 'text-gray-900 bg-gray-50 border-gray-200 hover:border-gray-300'} ${className}`} onClick={onClick} type="button">
+    <button className={`flex gap-3 items-center px-3 py-1 border rounded ${variant === 'danger' ? 'text-red-900 bg-red-50 border-red-200 hover:border-red-300' : 'text-gray-900 bg-gray-50 border-gray-200 hover:border-gray-300'} ${isLoading ? 'cursor-not-allowed opacity-60' : ''} ${className}`} onClick={isLoading ? undefined : onClick} type="button">
       {icon}
       {children}
     </button>

apps/dashboard/src/components/Element.tsx

@@ -1,17 +1,9 @@
 import type { CSSProperties } from "react";
 import { useEffect, useMemo, useRef, useState } from "react"
 import type { OGElement } from "../lib/types";
+import { hexToRgba } from "../lib/colors";
 import { useOg } from "./OgPlayground"
 
-function hexToRgba(hex: string, alpha: number) {
-  const bigint = parseInt(hex.replace('#', ''), 16);
-  const r = (bigint >> 16) & 255;
-  const g = (bigint >> 8) & 255;
-  const b = bigint & 255;
-
-  return `rgba(${r}, ${g}, ${b}, ${alpha / 100})`;
-}
-
 interface ElementProps {
   element: OGElement
 }

apps/dashboard/src/components/LeftPanel/ElementRow.tsx

@@ -0,0 +1,84 @@
+import { useSortable } from "@dnd-kit/sortable"
+import { CSS } from '@dnd-kit/utilities';
+import type { OGElement } from "../../lib/types";
+import { NotVisibleIcon } from "../icons/NotVisibleIcon"
+import { TextIcon } from "../icons/TextIcon"
+import { VisibleIcon } from "../icons/VisibleIcon"
+import { useOg } from "../OgPlayground"
+import { BoxIcon } from "../icons/BoxIcon"
+import { CircleIcon } from "../icons/CircleIcon"
+import { ImageIcon } from "../icons/ImageIcon"
+import { MagicWandIcon } from "../icons/MagicWandIcon"
+
+interface ElementRowProps {
+  element: OGElement
+}
+
+export function ElementRow({ element }: ElementRowProps) {
+  const { selectedElement, setSelectedElement, updateElement } = useOg()
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({ id: element.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div className="flex justify-between items-center pb-2 cursor-auto" ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <button
+        className={`flex gap-2 select-none text-gray-600 hover:text-gray-900 w-full ${selectedElement === element.id ? '!text-blue-500' : ''} ${!element.visible ? '!text-gray-300' : ''}`}
+        onClick={() => { setSelectedElement(element.id); }}
+        type="button"
+      >
+        {element.tag === 'p' ? (
+          <>
+            <TextIcon height="1.4em" width="1.4em" />
+            {element.content.slice(0, 25)}
+          </>
+        ) : null}
+        {element.tag === 'div' && element.backgroundImage ? (
+          <>
+            <ImageIcon height="1.4em" width="1.4em" />
+            Image
+          </>
+        ) : null}
+        {element.tag === 'div' && !element.backgroundImage && !element.radius ? (
+          <>
+            <BoxIcon height="1.4em" width="1.4em" />
+            Box
+          </>
+        ) : null}
+        {element.tag === 'div' && !element.backgroundImage && element.radius ? (
+          <>
+            <CircleIcon height="1.4em" width="1.4em" />
+            Rounded box
+          </>
+        ) : null}
+        {element.tag === 'span' ? (
+          <>
+            <MagicWandIcon height="1.4em" width="1.4em" />
+            Dynamic text
+          </>
+        ) : null}
+      </button>
+      <button
+        className="text-gray-600 hover:text-gray-900"
+        onClick={() => {
+          updateElement({
+            ...element,
+            visible: !element.visible,
+          });
+        }}
+        type="button"
+      >
+        {element.visible ? <VisibleIcon /> : <NotVisibleIcon />}
+      </button>
+    </div>
+  )
+}

apps/dashboard/src/components/LeftPanel/ElementsSection.tsx

@@ -0,0 +1,53 @@
+import type { DragEndEvent } from "@dnd-kit/core";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { useOg } from "../OgPlayground";
+import { ElementRow } from "./ElementRow";
+
+export function ElementsSection() {
+  const { elements, setElements } = useOg()
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+
+    if (!over) {
+      return;
+    }
+
+    if (active.id !== over.id) {
+      const oldIndex = elements.findIndex(element => element.id === active.id)
+      const newIndex = elements.findIndex(element => element.id === over.id)
+
+      const newElements = arrayMove(elements, oldIndex, newIndex);
+      setElements(newElements);
+    }
+  }
+
+  return (
+    <>
+      <p className="text-xs text-gray-600">Elements</p>
+      <div className="flex flex-col-reverse w-full">
+        <DndContext collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis]} onDragEnd={handleDragEnd} onDragOver={handleDragEnd} sensors={sensors}>
+          <SortableContext items={elements} strategy={verticalListSortingStrategy}>
+            {elements.map(element => (
+              <ElementRow element={element} key={element.id} />
+            ))}
+          </SortableContext>
+        </DndContext>
+      </div>
+    </>
+  )
+}
+
+