Fully working

package.json

@@ -11,6 +11,7 @@
     "@types/react": "^18.2.19",
     "@types/react-dom": "^18.2.7",
     "react": "^18.2.0",
+    "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "react-sortablejs": "^6.1.4",
@@ -43,6 +44,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-color": "^3.0.6",
     "@types/sortablejs": "^1.15.1",
     "tailwindcss": "^3.3.3"
   },

src/App.tsx

@@ -1,10 +1,21 @@
 // src/App.tsx
-import React from 'react';
+import React, {useState} from 'react';
 import './index.css';
 import TierList from './components/TierList';
 import ImageHolder from './components/ImageHolder';
+import Modal from './components/Modal';
 
 const App = () => {
+  const [modalOpen, setModalOpen] = useState(true);
+
+  const openModal = () => {
+    setModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setModalOpen(false);
+  };
+
   return (
     <div className="p-8 min-h-[100vh] bg-stone-800">
       <TierList />

src/components/ImageHolder.tsx

@@ -92,8 +92,11 @@ const ImageHolder = () => {
         group="shared"
         className="react-sortablejs flex space-x-4 p-4 bg-stone-700 min-h-[7rem] flex-wrap mt-8"
       >
-        {images.map((image) => (
-          <img src={image.url} key={image.id} className="h-20 w-auto" alt={`Image ${image.id}`} />
+        {images.length === 0 ? (
+          <p className='text-gray-400 text-center w-full'>Drag & Drop or Copy and Paste images in here!<br/>If this is your first time using this you can right click tiers to edit them and drag them about, clicking the plus will add more tiers</p>
+        ) :
+        images.map((image) => (
+          <img src={image.url} key={image.id} className="h-20 w-auto" />
         ))}
       </ReactSortable>
   );

src/components/Modal.tsx

@@ -0,0 +1,84 @@
+import React, { useState, ChangeEvent, FormEvent } from 'react';
+import { SketchPicker } from 'react-color';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onAddTier: (color: string, name: string) => void;
+}
+
+const Modal: React.FC<ModalProps> = ({ isOpen, onClose, onAddTier }) => {
+  const [name, setName] = useState('');
+  const [color, setColor] = useState('');
+
+  const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  };
+
+  const handleColorChange = (newColor: any) => {
+    setColor(newColor.hex);
+  };
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    // Call the onAddTier function with the new tier's data
+    onAddTier(color, name);
+    onClose();
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50 dark:bg-opacity-70">
+      <div className="bg-zinc-800 p-6 rounded-md shadow-md">
+        <h2 className="text-lg font-semibold mb-4 text-white">New Tier</h2>
+        <form onSubmit={handleSubmit}>
+          <div className="mb-4">
+            <label htmlFor="name" className="block text-sm font-medium text-gray-300">
+              Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              className="mt-1 p-2 w-full border rounded-md focus:ring focus:ring-indigo-300"
+              value={name}
+              onChange={handleNameChange}
+            />
+          </div>
+          <div className="mb-4">
+            <label htmlFor="color" className="block text-sm font-medium text-gray-300">
+              Color
+            </label>
+            <div className="mt-1 w-full">
+              <SketchPicker
+                color={color}
+                onChange={handleColorChange}
+                disableAlpha
+                presetColors={['#FF7F7F','#FFBF7F','#FFDF80','#FFFF7F','#BFFF7F','#7FFF7F']}
+              />
+            </div>
+          </div>
+          <div className="flex justify-end">
+            <button
+              type="button"
+              className="mr-2 px-4 py-2 text-gray-400 hover:text-gray-100"
+              onClick={onClose}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700"
+            >
+              Create
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;