Feat: started working on tier level edit

2025-01-10 15:18:59 +03:00
parent 1cfdb5ee08
commit c30855beda
8 changed files with 21 additions and 19 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
--- a/package.json
+++ b/package.json
@@ -11,6 +11,10 @@
  },
  "dependencies": {
    "@dnd-kit/core": "^6.3.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.3.1",
+    "@mui/material": "^6.3.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "zustand": "^5.0.3"
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,14 +5,9 @@ import './App.scss';
 import { TierImage } from './components/Image';
 import { Tier } from './components/Tier';
 import { TierModal } from './components/TierModal';
+import { tierImage } from './dto/tier';
 import useStore from './store';

-interface tierImage {
-  name: string;
-  url: string;
-  category: string;
-}
-
 const App = () => {
  const [images, addTierImage, tierLevels, editTierImage] = useStore(
    useShallow(state => [state.images, state.addTierImage, state.tierLevels, state.editTierImage]),
@@ -24,11 +19,6 @@ const App = () => {
    if (uploadBtn.current) uploadBtn.current.click();
  };

-  const getRandomCategoryName = () => {
-    const categoryNames = tierLevels.flatMap(category => category.name);
-    return categoryNames[Math.floor(Math.random() * categoryNames.length)];
-  };
-
  const handleAdd = (images: tierImage[]) => {
    images.forEach(image => {
      addTierImage(image);
@@ -55,7 +45,7 @@ const App = () => {
          />
        ))}
      </div>
-      <div className='flex flex-row w-full'>
+      <div className='flex flex-row w-full '>
        {images
          .filter(image => image.category === '')
          .map((image, index) => (
@@ -80,7 +70,7 @@ const App = () => {
                upload_images.push({
                  url: url,
                  name: event.target.files[i].name.replace('.jpeg', ''),
-                  category: getRandomCategoryName(),
+                  category: '',
                });
              }
              handleAdd(upload_images);
--- a/src/components/Tier.scss
+++ b/src/components/Tier.scss
@@ -0,0 +1,5 @@
+.tier_name:hover {
+  button {
+    opacity: 1;
+  }
+}
--- a/src/components/Tier.tsx
+++ b/src/components/Tier.tsx
@@ -1,5 +1,7 @@
+import EditIcon from '@mui/icons-material/Edit';
 import useStore from '../store';
 import { TierImage } from './Image';
+import './Tier.scss';

 export interface TierProps {
  color: string;
@@ -39,12 +41,15 @@ export const Tier = ({ color, name, textColor }: TierProps) => {
    <>
      <div className='w-full min-h-40 bg-[#2d3436] h-auto flex flex-row'>
        <div
-          className='w-24 min-h-40 flex items-center justify-center'
+          className='w-24 min-h-40 flex items-center justify-center relative tier_name'
          style={{
            color: text_color_code,
            backgroundColor: color_code,
          }}
        >
+          <button className='absolute right-[5%] top-[5%] opacity-0 transition duration-250 ease-in-out'>
+            <EditIcon />
+          </button>
          <p>{name}</p>
        </div>
        <div className='image-container flex flex-row flex-wrap justify-between w-full h-auto'>
--- a/src/dto/tier.ts
+++ b/src/dto/tier.ts
@@ -2,4 +2,5 @@ export interface tierImage {
  name: string;
  url: string;
  category: string;
+  id?: string;
 }
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,4 +1,3 @@
-import { DndContext } from '@dnd-kit/core';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
@@ -6,8 +5,6 @@ import './index.scss';

 createRoot(document.getElementById('root')!).render(
  <StrictMode>
-    <DndContext>
-      <App />
-    </DndContext>
+    <App />
  </StrictMode>,
 );