Feat: updated images styles

package.json

@@ -27,6 +27,7 @@
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
     "postcss": "^8.4.49",
+    "sass-embedded": "^1.83.1",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",

src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import './App.css';
+import './App.scss';
 import { TierImage } from './components/Image';
 import { Tier, TierProps } from './components/Tier';
 import { useAppDispatch, useAppSelector } from './hooks';
@@ -79,6 +79,7 @@ function App() {
           name='imageUpload'
           accept='.jpeg'
           ref={uploadBtn}
+          multiple
           style={{ display: 'none' }}
           onChange={event => {
             console.log(event.target.files);

src/components/Image.scss

@@ -0,0 +1,5 @@
+.anime-container:hover {
+  .anime-name {
+    opacity: 100;
+  }
+}

src/components/Image.tsx

@@ -1,4 +1,5 @@
 import { tierImage } from '../store';
+import './Image.scss';
 interface ImageProps {
   image: tierImage;
   onDragStart?: () => void;
@@ -7,16 +8,16 @@ interface ImageProps {
 export const TierImage = ({ image, onDragStart }: ImageProps) => {
   return (
     <div
-      className='flex flex-wrap justify-center gap-4 mr-1'
+      className='flex flex-wrap justify-center gap-4 mr-1 anime-container'
       onDragStart={() => {
         // e.preventDefault();
         if (onDragStart) onDragStart();
       }}
     >
-      <div className={`w-[calc(20rem*.5625)] h-80 relative`}>
+      <div className={`w-[calc(10rem*.5625)] h-40 relative`}>
         <img src={image.url} alt={image.name} className='h-full w-full object-cover' />
-        <div className='w-full bg-slate-500 text-white bg-opacity-70 text-center bottom-0 left-0 absolute'>
-          {image.name}
+        <div className='w-full bg-slate-500 text-white bg-opacity-70 left-0 top-0 absolute h-full flex justify-center items-center opacity-0 anime-name overflow-hidden p-1 text-center transition duration-500 ease-in-out'>
+          {image.name.length > 30 ? image.name.slice(0, 30) + '...' : image.name}
         </div>
       </div>
     </div>

src/components/Tier.tsx

@@ -35,6 +35,7 @@ export const Tier = ({ color, name, textColor }: TierProps) => {
   }
 
   const [currentDragImage, setCurrentDragImage] = useState<tierImage | null>(null);
+  const [currentDragTier, setCurrentDragTier] = useState<string>('');
 
   const onDragStart = (image: tierImage) => {
     setCurrentDragImage(image);
@@ -43,15 +44,23 @@ export const Tier = ({ color, name, textColor }: TierProps) => {
   return (
     <>
       <div
-        className='w-full min-h-64 bg-[#2d3436] h-auto flex flex-row'
+        className='w-full min-h-40 bg-[#2d3436] h-auto flex flex-row'
         onDragEnd={() => {
           // e.preventDefault();
-          if (currentDragImage) dispatch(changeTierImage(currentDragImage));
+          if (currentDragImage) {
+            if (currentDragImage.category === name) return;
+            console.log(currentDragImage);
+            console.log(name);
+            dispatch(changeTierImage({ ...currentDragImage, category: name }));
+          }
           setCurrentDragImage(null);
         }}
+        onDragOver={() => {
+          if (currentDragTier !== name) setCurrentDragTier(name);
+        }}
       >
         <div
-          className='w-52 h-80 flex items-center justify-center'
+          className='w-24 min-h-40 flex items-center justify-center'
           style={{
             color: text_color_code,
             backgroundColor: color_code,
@@ -59,7 +68,7 @@ export const Tier = ({ color, name, textColor }: TierProps) => {
         >
           <p>{name}</p>
         </div>
-        <div className='image-container flex flex-row gap-1'>
+        <div className='image-container flex flex-row flex-wrap justify-between w-full h-auto'>
           {tierImages
             .filter(image => image.category === name)
             .map((image, index) => (

src/main.tsx

@@ -2,7 +2,7 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import App from './App.tsx';
-import './index.css';
+import './index.scss';
 import store from './store.ts';
 
 createRoot(document.getElementById('root')!).render(

vite.config.ts

@@ -1,7 +1,10 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import react from '@vitejs/plugin-react-swc';
+import { defineConfig } from 'vite';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  define: {
+    'process.env': {},
+  },
+});