@esitorsunil/new-folder 1.0.0

package/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/notification/NotificationsPanel.js

@@ -0,0 +1 @@
+"use strict";

package/dist/notification/notificationsSlice.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@esitorsunil/new-folder",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "babel src --out-dir dist --copy-files"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.9.0",
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0",
+    "react-redux": "^8.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.27.2",
+    "@babel/core": "^7.27.1",
+    "@babel/plugin-transform-runtime": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
+  },
+  "peerDependencies": {
+    "@reduxjs/toolkit": "^1.9.0",
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0",
+    "react-redux": "^8.0.0"
+  }
+}

package/src/index.js

@@ -0,0 +1,2 @@
+export * from './notification/NotificationsPanel';
+export * from './notification/notificationsSlice';

package/src/notification/NotificationsPanel.jsx

@@ -0,0 +1,47 @@
+// NotificationsPanel.jsx
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { removeNotification } from './notificationsSlice';
+
+export const NotificationsPanel = () => {
+  const notifications = useSelector((state) => state.notifications.items);
+  const dispatch = useDispatch();
+
+  return (
+    <div style={{ position: 'fixed', top: 10, right: 10, zIndex: 1000 }}>
+      {notifications.map(n => (
+        <div
+          key={n.id}
+          style={{
+            background:
+              n.type === 'error'
+                ? '#f44336'
+                : n.type === 'success'
+                ? '#4caf50'
+                : '#2196f3',
+            color: '#fff',
+            padding: '10px 15px',
+            marginBottom: 8,
+            borderRadius: 4,
+            minWidth: 200,
+            boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+          }}
+        >
+          {n.message}
+          <button
+            onClick={() => dispatch(removeNotification(n.id))}
+            style={{
+              marginLeft: 10,
+              background: 'transparent',
+              border: 'none',
+              color: '#fff',
+              cursor: 'pointer',
+            }}
+          >
+            ×
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/notification/notificationsSlice.js

@@ -0,0 +1,24 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  items: [],
+};
+
+const notificationsSlice = createSlice({
+  name: 'notifications',
+  initialState,
+  reducers: {
+    pushNotification: (state, action) => {
+      state.items.push(action.payload);
+    },
+    removeNotification: (state, action) => {
+      state.items = state.items.filter(n => n.id !== action.payload);
+    },
+    clearNotifications: (state) => {
+      state.items = [];
+    },
+  },
+});
+
+export const { pushNotification, removeNotification, clearNotifications } = notificationsSlice.actions;
+export const notificationsReducer = notificationsSlice.reducer;