1 files changed, 53 insertions, 5 deletions
diff --git a/frontend/src/components/ElementView.tsx b/frontend/src/components/ElementView.tsx
index 4f9d489..1b11ffb 100644
--- a/frontend/src/components/ElementView.tsx
+++ b/frontend/src/components/ElementView.tsx
@@ -2,15 +2,63 @@ import { FC } from 'react';
 import { Element } from '../types';
 
 interface ElementViewProps {
+  onElementCombine: (elementId: number) => void;
   element: Element;
+  interactive: boolean;
+  isPreview: boolean;
 }
 
-const ElementView: FC<ElementViewProps> = ({ element }) => {
+const ElementView: FC<ElementViewProps> = ({
+  onElementCombine,
+  element,
+  interactive,
+  isPreview,
+}) => {
+  const onDragStart = (e: React.DragEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+
+    e.dataTransfer.setData('text/plain', element.name);
+    e.dataTransfer.setData('id', element.id.toString());
+  };
+
+  const onDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+  };
+
+  const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    const elementId = e.dataTransfer.getData('id');
+    onElementCombine(Number.parseInt(elementId));
+    e.preventDefault();
+  };
+
   return (
-    <div className='flex flex-row m-2 rounded-md border border-gray-300 bg-gray-100 w-fit h-fit'>
-      <div className='flex flex-col items-center'>
-        <img src={`data:image/png;base64,${element.icon}`} width='80px' height='80px'/>
-        <p className='my-1 mx-2 text-sm'>{element.name}</p>
+    <div
+      draggable={interactive}
+      onDragStart={interactive ? onDragStart : undefined}
+      onDragOver={interactive ? onDragOver : undefined}
+      onDrop={interactive ? onDrop : undefined}
+      className="element flex flex-row rounded-md border border-gray-300 bg-gray-100 w-[96px] h-fit">
+      <div draggable={false} className="flex flex-col items-center w-full">
+        {isPreview ? (
+          <div
+            style={{
+              backgroundColor: element.icon,
+            }}
+            className="rounded-t w-full h-[96px]"></div>
+        ) : (
+          <img
+            draggable={false}
+            className="rounded-t"
+            src={`data:image/png;base64,${element.icon}`}
+            width="96px"
+            height="96px"
+          />
+        )}
+        <span
+          draggable={false}
+          className="my-1 mx-2 text-sm leading-tight text-center w-full">
+          {element.name.length > 0 ? element.name : '\u00A0'}
+        </span>
       </div>
     </div>
   );