nestiq-component-library 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ var Button = function (_a) {
3
+ var label = _a.label;
4
+ return React.createElement("button", null, label);
5
+ };
6
+ export default Button;
@@ -0,0 +1,26 @@
1
+ import React, { useState } from "react";
2
+ import "bootstrap/dist/css/bootstrap.min.css";
3
+ import "./ImageListPopup.css";
4
+ var ImageListPopup = function (_a) {
5
+ var images = _a.images, onClose = _a.onClose;
6
+ var _b = useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
7
+ var handlePrevious = function () {
8
+ setCurrentIndex(function (prevIndex) { return (prevIndex > 0 ? prevIndex - 1 : prevIndex); });
9
+ };
10
+ var handleNext = function () {
11
+ setCurrentIndex(function (prevIndex) {
12
+ return prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex;
13
+ });
14
+ };
15
+ return (React.createElement("div", { className: "popup-overlay" },
16
+ React.createElement("div", { className: "popup-container" },
17
+ React.createElement("div", { className: "popup-header" },
18
+ React.createElement("span", null, images[currentIndex].title),
19
+ React.createElement("button", { className: "btn-close", onClick: onClose })),
20
+ React.createElement("div", { className: "popup-body" },
21
+ React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "img-fluid" })),
22
+ React.createElement("div", { className: "popup-footer" }, images.length > 1 && (React.createElement(React.Fragment, null,
23
+ React.createElement("button", { className: "btn btn-secondary me-2", onClick: handlePrevious }, "Previous"),
24
+ React.createElement("button", { className: "btn btn-secondary", onClick: handleNext }, "Next")))))));
25
+ };
26
+ export default ImageListPopup;
@@ -0,0 +1,12 @@
1
+ import React from "react";
2
+ import closeIcon from "src/assets/images/icon_close 2.png";
3
+ import "./Popup.css";
4
+ var Popup = function (_a) {
5
+ var onCloseClick = _a.onCloseClick, children = _a.children;
6
+ return (React.createElement("div", { className: "popup-overlay" },
7
+ React.createElement("div", { className: "shareSection col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4" },
8
+ React.createElement("div", { className: "end-0 top-0 position-absolute " },
9
+ React.createElement("img", { src: closeIcon, alt: "close", className: "closeIcon me-2", onClick: onCloseClick })),
10
+ children)));
11
+ };
12
+ export default Popup;
package/dist/index.es.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { useState } from 'react';
2
+ import closeIcon from 'src/assets/images/icon_close 2.png';
2
3
  import 'bootstrap/dist/css/bootstrap.min.css';
3
4
 
4
5
  var Button = function (_a) {
@@ -6,8 +7,6 @@ var Button = function (_a) {
6
7
  return React.createElement("button", null, label);
7
8
  };
8
9
 
9
- var closeIcon = "icon_close 2.png";
10
-
11
10
  function styleInject(css, ref) {
12
11
  if ( ref === void 0 ) ref = {};
13
12
  var insertAt = ref.insertAt;
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../src/assets/images/icon_close 2.png","../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["export default \"icon_close 2.png\"","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
1
+ {"version":3,"file":"index.es.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
package/dist/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var React = require('react');
4
+ var closeIcon = require('src/assets/images/icon_close 2.png');
4
5
  require('bootstrap/dist/css/bootstrap.min.css');
5
6
 
6
7
  var Button = function (_a) {
@@ -8,8 +9,6 @@ var Button = function (_a) {
8
9
  return React.createElement("button", null, label);
9
10
  };
10
11
 
11
- var closeIcon = "icon_close 2.png";
12
-
13
12
  function styleInject(css, ref) {
14
13
  if ( ref === void 0 ) ref = {};
15
14
  var insertAt = ref.insertAt;
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/assets/images/icon_close 2.png","../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["export default \"icon_close 2.png\"","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
1
+ {"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
package/package.json CHANGED
@@ -1,36 +1,35 @@
1
- {
2
- "name": "nestiq-component-library",
3
- "version": "1.0.5",
4
- "type": "module",
5
- "description": "",
6
- "main": "dist/index.js",
7
- "module": "dist/index.es.js",
8
- "scripts": {
9
- "test": "echo \"Error: no test specified\" && exit 1",
10
- "build": "rollup -c"
11
- },
12
- "keywords": [],
13
- "author": "",
14
- "license": "ISC",
15
- "dependencies": {
16
- "react": "^18.3.1",
17
- "react-dom": "^18.3.1"
18
- },
19
- "devDependencies": {
20
- "@rollup/plugin-commonjs": "^26.0.1",
21
- "@rollup/plugin-image": "^3.0.3",
22
- "@rollup/plugin-node-resolve": "^15.2.3",
23
- "@rollup/plugin-url": "^8.0.2",
24
- "@types/react": "^18.3.3",
25
- "@types/react-dom": "^18.3.0",
26
- "rollup": "^4.18.0",
27
- "rollup-plugin-copy": "^3.5.0",
28
- "rollup-plugin-postcss": "^4.0.2",
29
- "rollup-plugin-typescript2": "^0.36.0",
30
- "typescript": "^5.4.5"
31
- },
32
- "peerDependencies": {
33
- "react": "^18.3.1",
34
- "react-dom": "^18.3.1"
35
- }
36
- }
1
+ {
2
+ "name": "nestiq-component-library",
3
+ "version": "1.0.7",
4
+ "type": "module",
5
+ "description": "",
6
+ "main": "dist/index.js",
7
+ "module": "dist/index.es.js",
8
+ "scripts": {
9
+ "test": "echo \"Error: no test specified\" && exit 1",
10
+ "build": "rollup -c"
11
+ },
12
+ "keywords": [],
13
+ "author": "",
14
+ "license": "ISC",
15
+ "dependencies": {
16
+ "react": "^18.3.1",
17
+ "react-dom": "^18.3.1"
18
+ },
19
+ "devDependencies": {
20
+ "@rollup/plugin-commonjs": "^26.0.1",
21
+ "@rollup/plugin-image": "^3.0.3",
22
+ "@rollup/plugin-node-resolve": "^15.2.3",
23
+ "@rollup/plugin-url": "^8.0.2",
24
+ "@types/react": "^18.3.3",
25
+ "@types/react-dom": "^18.3.0",
26
+ "rollup": "^4.18.0",
27
+ "rollup-plugin-postcss": "^4.0.2",
28
+ "rollup-plugin-typescript2": "^0.36.0",
29
+ "typescript": "^5.4.5"
30
+ },
31
+ "peerDependencies": {
32
+ "react": "^18.3.1",
33
+ "react-dom": "^18.3.1"
34
+ }
35
+ }
package/rollup.config.mjs CHANGED
@@ -1,40 +1,31 @@
1
- import typescript from "rollup-plugin-typescript2";
2
- import url from "@rollup/plugin-url";
3
- import postcss from "rollup-plugin-postcss";
4
- import copy from 'rollup-plugin-copy';
5
- import pkg from "./package.json" assert { type: "json" };
6
-
7
- export default {
8
- input: "src/index.tsx",
9
- output: [
10
- {
11
- file: pkg.main,
12
- format: "cjs",
13
- sourcemap: true,
14
- },
15
- {
16
- file: pkg.module,
17
- format: "es",
18
- sourcemap: true,
19
- },
20
- ],
21
- external: ["react", "react-dom"],
22
- plugins: [
23
- typescript(),
24
- postcss({
25
- extensions: [".css"],
26
- }),
27
- url({
28
- include: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.gif'],
29
- limit: 0,
30
- emitFiles: true,
31
- fileName: '[name][extname]',
32
- destDir: 'dist/assets/images',
33
- }),
34
- copy({
35
- targets: [
36
- { src: 'src/assets/images/*', dest: 'dist/assets/images' }
37
- ]
38
- })
39
- ],
40
- };
1
+ import typescript from "rollup-plugin-typescript2";
2
+ import url from "@rollup/plugin-url";
3
+ import postcss from "rollup-plugin-postcss";
4
+ import pkg from "./package.json" assert { type: "json" };
5
+
6
+ export default {
7
+ input: "src/index.tsx",
8
+ output: [
9
+ {
10
+ file: pkg.main,
11
+ format: "cjs",
12
+ sourcemap: true,
13
+ },
14
+ {
15
+ file: pkg.module,
16
+ format: "es",
17
+ sourcemap: true,
18
+ },
19
+ ],
20
+ external: ["react", "react-dom"],
21
+ plugins: [
22
+ typescript(),
23
+ postcss({
24
+ extensions: [".css"],
25
+ }),
26
+ url({
27
+ include: ["**/*.svg", "**/*.png", "**/*.jpg", "**/*.jpeg", "**/*.gif"],
28
+ limit: 0,
29
+ }),
30
+ ],
31
+ };
@@ -1,62 +1,62 @@
1
- import React, { useState } from "react";
2
- import "bootstrap/dist/css/bootstrap.min.css";
3
- import "./ImageListPopup.css";
4
-
5
- interface Image {
6
- src: string;
7
- title: string;
8
- }
9
-
10
- interface ImageListPopupProps {
11
- images: Image[];
12
- onClose: () => void;
13
- }
14
-
15
- const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
16
- const [currentIndex, setCurrentIndex] = useState(0);
17
-
18
- const handlePrevious = () => {
19
- setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
20
- };
21
-
22
- const handleNext = () => {
23
- setCurrentIndex((prevIndex) =>
24
- prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex,
25
- );
26
- };
27
-
28
- return (
29
- <div className="popup-overlay">
30
- <div className="popup-container">
31
- <div className="popup-header">
32
- <span>{images[currentIndex].title}</span>
33
- <button className="btn-close" onClick={onClose}></button>
34
- </div>
35
- <div className="popup-body">
36
- <img
37
- src={images[currentIndex].src}
38
- alt={images[currentIndex].title}
39
- className="img-fluid"
40
- />
41
- </div>
42
- <div className="popup-footer">
43
- {images.length > 1 && (
44
- <>
45
- <button
46
- className="btn btn-secondary me-2"
47
- onClick={handlePrevious}
48
- >
49
- Previous
50
- </button>
51
- <button className="btn btn-secondary" onClick={handleNext}>
52
- Next
53
- </button>
54
- </>
55
- )}
56
- </div>
57
- </div>
58
- </div>
59
- );
60
- };
61
-
62
- export default ImageListPopup;
1
+ import React, { useState } from "react";
2
+ import "bootstrap/dist/css/bootstrap.min.css";
3
+ import "./ImageListPopup.css";
4
+
5
+ interface Image {
6
+ src: string;
7
+ title: string;
8
+ }
9
+
10
+ interface ImageListPopupProps {
11
+ images: Image[];
12
+ onClose: () => void;
13
+ }
14
+
15
+ const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
16
+ const [currentIndex, setCurrentIndex] = useState(0);
17
+
18
+ const handlePrevious = () => {
19
+ setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
20
+ };
21
+
22
+ const handleNext = () => {
23
+ setCurrentIndex((prevIndex) =>
24
+ prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex,
25
+ );
26
+ };
27
+
28
+ return (
29
+ <div className="popup-overlay">
30
+ <div className="popup-container">
31
+ <div className="popup-header">
32
+ <span>{images[currentIndex].title}</span>
33
+ <button className="btn-close" onClick={onClose}></button>
34
+ </div>
35
+ <div className="popup-body">
36
+ <img
37
+ src={images[currentIndex].src}
38
+ alt={images[currentIndex].title}
39
+ className="img-fluid"
40
+ />
41
+ </div>
42
+ <div className="popup-footer">
43
+ {images.length > 1 && (
44
+ <>
45
+ <button
46
+ className="btn btn-secondary me-2"
47
+ onClick={handlePrevious}
48
+ >
49
+ Previous
50
+ </button>
51
+ <button className="btn btn-secondary" onClick={handleNext}>
52
+ Next
53
+ </button>
54
+ </>
55
+ )}
56
+ </div>
57
+ </div>
58
+ </div>
59
+ );
60
+ };
61
+
62
+ export default ImageListPopup;
@@ -1,28 +1,28 @@
1
- import React from "react";
2
- import closeIcon from "../../assets/images/icon_close 2.png";
3
- import "./Popup.css";
4
-
5
- interface PopupProps {
6
- children: React.ReactNode;
7
- onCloseClick: () => void;
8
- }
9
-
10
- const Popup: React.FC<PopupProps> = ({ onCloseClick, children }) => {
11
- return (
12
- <div className="popup-overlay">
13
- <div className="shareSection col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4">
14
- <div className="end-0 top-0 position-absolute ">
15
- <img
16
- src={closeIcon}
17
- alt="close"
18
- className="closeIcon me-2"
19
- onClick={onCloseClick}
20
- />
21
- </div>
22
- {children}
23
- </div>
24
- </div>
25
- );
26
- };
27
-
28
- export default Popup;
1
+ import React from "react";
2
+ import closeIcon from "src/assets/images/icon_close 2.png";
3
+ import "./Popup.css";
4
+
5
+ interface PopupProps {
6
+ children: React.ReactNode;
7
+ onCloseClick: () => void;
8
+ }
9
+
10
+ const Popup: React.FC<PopupProps> = ({ onCloseClick, children }) => {
11
+ return (
12
+ <div className="popup-overlay">
13
+ <div className="shareSection col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4">
14
+ <div className="end-0 top-0 position-absolute ">
15
+ <img
16
+ src={closeIcon}
17
+ alt="close"
18
+ className="closeIcon me-2"
19
+ onClick={onCloseClick}
20
+ />
21
+ </div>
22
+ {children}
23
+ </div>
24
+ </div>
25
+ );
26
+ };
27
+
28
+ export default Popup;
package/src/index.tsx CHANGED
@@ -1,3 +1,3 @@
1
- export { default as Button } from "./components/Button/Button";
2
- export { default as Popup } from "./components/Popup/Popup";
3
- export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";
1
+ export { default as Button } from "./components/Button/Button";
2
+ export { default as Popup } from "./components/Popup/Popup";
3
+ export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";
Binary file