namirasoft-site-react 1.2.48 → 1.2.50

package/dist/App.js

@@ -2,9 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { NSButtonRed } from './components/NSButtonRed';
-import { NSLayout, NSPagination } from './main';
-import { NSBoxSection } from './components/NSBoxSection';
+import { NSBoxSection, NSLayout, NSPagination } from './main';
 export function App() {
-    return (_jsx("div", Object.assign({ className: "App" }, { children: _jsxs(NSLayout, Object.assign({ scope: 'Namirasoft SOP console', logo: '' }, { children: [_jsxs("div", Object.assign({ className: 'my-4 container' }, { children: [_jsx(NSBoxSection, { image: 'src/assets/images/position-down-vector.png', description: "", detail: '#' }), _jsx(NSButtonRed, { title: 'Delete', onClick: () => { } }), _jsx(NSPagination, { page: 1, size: 25 })] })), "asdasd"] })) })));
+    return (_jsx("div", Object.assign({ className: "App" }, { children: _jsxs(NSLayout, Object.assign({ scope: 'Namirasoft SOP console', logo: '' }, { children: [_jsxs("div", Object.assign({ className: 'my-4 container' }, { children: [_jsx(NSButtonRed, { title: 'Delete', onClick: () => { } }), _jsx(NSPagination, { page: 1, size: 25 })] })), _jsx(NSBoxSection, { detail: 'detail', image: '', description: 'desc' })] })) })));
 }
 //# sourceMappingURL=App.js.map

package/dist/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAc9C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,MAAM,UAAU,GAAG;IAyBf,OAAO,CACH,4BAAK,SAAS,EAAC,KAAK,gBAChB,MAAC,QAAQ,kBAAC,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,EAAE,iBAC5C,6BAAK,SAAS,EAAC,gBAAgB,iBAC3B,KAAC,YAAY,IAAC,KAAK,EAAC,4CAA4C,EAAC,WAAW,EAAC,EAAE,EAAC,MAAM,EAAC,GAAG,GAAG,EAe7F,KAAC,WAAW,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,GAAI,EAClD,KAAC,YAAY,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,GAAI,KACjC,eAEC,IACT,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAc9C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAI9D,MAAM,UAAU,GAAG;IAyBf,OAAO,CACH,4BAAK,SAAS,EAAC,KAAK,gBAChB,MAAC,QAAQ,kBAAC,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,EAAE,iBAC5C,6BAAK,SAAS,EAAC,gBAAgB,iBAgB3B,KAAC,WAAW,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,GAAI,EAClD,KAAC,YAAY,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,GAAI,KACjC,EAEN,KAAC,YAAY,IAAC,MAAM,EAAC,QAAQ,EAAC,KAAK,EAAC,EAAE,EAAC,WAAW,EAAC,MAAM,GAAG,KACrD,IACT,CACT,CAAC;AACN,CAAC"}

package/dist/components/NSBoxPosition.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+interface IProps {
+    image: string;
+    title: string;
+    list: string;
+    percent: string | number;
+    information: string | number;
+}
+interface IState {
+    image: string;
+    title: string;
+    list: string;
+    percent: string | number;
+    information: string | number;
+}
+export declare class NSBoxPosition extends React.Component<IProps, IState> {
+    constructor(props: IProps);
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/NSBoxPosition.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Style from "./NSBoxPosition.module.css";
+import React from "react";
+export class NSBoxPosition extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { title: props.title, image: props.image, list: props.list, percent: props.percent, information: props.information };
+    }
+    render() {
+        return (_jsx("div", Object.assign({ className: Style.position_box_contain }, { children: _jsxs("div", Object.assign({ className: Style.position_box_layout }, { children: [_jsx("img", { className: "rounded", src: this.state.image, alt: "wordpress", width: 326, height: 220 }), _jsxs("div", Object.assign({ className: Style.position_box_information }, { children: [_jsx("h3", { children: this.state.title }), _jsx("h4", { children: "Skills :" }), _jsx("ul", { children: _jsxs("li", { children: [this.state.list, _jsx("span", { children: this.props.percent })] }) }), _jsx("h4", { children: "Or" }), _jsx("ul", { children: _jsxs("li", { children: [this.state.list, _jsx("span", { children: this.props.percent })] }) }), _jsx("h3", { children: "Responsibility :" }), _jsx("p", { children: this.state.information })] }))] })) })));
+    }
+}
+//# sourceMappingURL=NSBoxPosition.js.map

package/dist/components/NSBoxPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSBoxPosition.js","sourceRoot":"","sources":["../../src/components/NSBoxPosition.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,KAAK,MAAM,4BAA4B,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAqB1B,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,SAAyB;IAG9D,YAAY,KAAa;QAErB,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC;IACtI,CAAC;IAEQ,MAAM;QAEX,OAAO,CACH,4BAAK,SAAS,EAAE,KAAK,CAAC,oBAAoB,gBACtC,6BAAK,SAAS,EAAE,KAAK,CAAC,mBAAmB,iBACrC,cAAK,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAC,WAAW,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAQ,EAC/F,6BAAK,SAAS,EAAE,KAAK,CAAC,wBAAwB,iBAC1C,uBAAK,IAAI,CAAC,KAAK,CAAC,KAAK,GAAM,EAC3B,oCAAiB,EACjB,uBACI,yBAAK,IAAI,CAAC,KAAK,CAAC,IAAI,EAAC,yBAAO,IAAI,CAAC,KAAK,CAAC,OAAO,GAAQ,IAAK,GAC1D,EACL,8BAAW,EACX,uBACI,yBAAK,IAAI,CAAC,KAAK,CAAC,IAAI,EAAC,yBAAO,IAAI,CAAC,KAAK,CAAC,OAAO,GAAQ,IAAK,GAC1D,EACL,4CAAyB,EACzB,sBAAI,IAAI,CAAC,KAAK,CAAC,WAAW,GAAK,KAC7B,KACJ,IACJ,CACT,CAAA;IACL,CAAC;CACJ"}

package/dist/components/NSBoxPosition.module.css

@@ -0,0 +1,81 @@
+.position_box_contain {
+    width: 100%;
+    padding: 0 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.position_box_layout {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(20, 27, 92, 0.3);
+    width: 358px;
+    height: auto;
+    border-radius: 8px;
+    text-align: center;
+    gap: 16px;
+    margin: 12px 0;
+    padding: 16px 0;
+}
+
+.position_box_information {
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    align-items: start;
+    text-align: left;
+    padding: 0 16px;
+    color: rgba(20, 27, 92, 1);
+}
+
+.position_box_information h3 {
+    font-size: 24px;
+    font-weight: 700;
+}
+
+.position_box_information h4 {
+    font-size: 16px;
+    font-weight: bold;
+    font-weight: 600;
+}
+
+.position_box_information ul {
+    width: 100%;
+}
+
+.position_box_information li {
+    text-decoration: underline;
+}
+
+.position_box_information span {
+    float: right;
+}
+
+@media only screen and (min-width:768px) {
+    .position_box_layout {
+        display: flex;
+        flex-direction: row;
+        justify-content: left;
+        width: 100%;
+        height: auto;
+    }
+
+    .position_box_contain {
+        padding: 0 48px;
+        display: flex;
+        justify-content: left;
+    }
+
+    .position_box_layout img {
+        width: 408px;
+        height: 276px;
+        padding: 0 16px;
+    }
+
+    .position_box_information {
+        line-height: 16px;
+    }
+}

package/dist/components/NSBoxSection.d.ts

@@ -8,11 +8,13 @@ interface IState {
     detail: string;
     image: string;
     description: string;
+    toggle: boolean;
 }
 export declare class NSBoxSection extends React.Component<IProps, IState> {
     constructor(props: IProps);
     setTitle(description: string): void;
     setHRef(detail: string): void;
+    setToggle(toggle: boolean): void;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/dist/components/NSBoxSection.js

@@ -1,11 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Style from "./NSBoxSection.module.css";
 import React from "react";
 export class NSBoxSection extends React.Component {
     constructor(props) {
         super(props);
-        this.state = { detail: props.detail, image: props.image, description: props.description };
+        this.state = { detail: props.detail, image: props.image, description: props.description, toggle: true };
     }
     setTitle(description) {
         this.setState({ description });
@@ -13,8 +12,17 @@ export class NSBoxSection extends React.Component {
     setHRef(detail) {
         this.setState({ detail });
     }
+    setToggle(toggle) {
+        this.setState({ toggle });
+    }
     render() {
-        return (_jsxs("div", Object.assign({ className: Style.position__layout }, { children: [_jsx("img", { className: "rounded", src: this.state.image, alt: "wordpress", width: 326, height: 220 }), _jsx("h3", { children: this.state.description }), _jsxs("h4", { children: [this.state.detail, _jsx("img", { className: "mx-2", src: '/assets/images/position-down-vector.png', width: 16, height: 16 })] })] })));
+        return (_jsx("div", Object.assign({ className: 'position-contain' }, { children: _jsxs("div", Object.assign({ className: "position-layout" }, { children: [_jsx("img", { className: "rounded", src: this.state.image, alt: "wordpress", width: 326, height: 220 }), _jsxs("div", Object.assign({ className: 'position-information' }, { children: [_jsx("h3", Object.assign({ className: 'position-title', style: { display: this.state.toggle ? 'block' : 'none' } }, { children: "WordPress" })), _jsx("a", Object.assign({ href: "", onClick: (e) => {
+                                    this.setState({ toggle: !this.state.toggle });
+                                    e.preventDefault();
+                                } }, { children: _jsxs("h4", Object.assign({ className: 'position-readmore', style: { display: this.state.toggle ? 'block' : 'none' } }, { children: ["Read More", _jsx("img", { className: "mx-2", src: '/assets/images/position-down-vector.png', alt: "show-more", width: 16, height: 16 })] })) })), _jsxs("ul", Object.assign({ className: 'position-list', style: { display: this.state.toggle ? 'none' : 'block' } }, { children: [_jsx("li", { children: "Frontend Programming" }), _jsx("li", { children: "Backend Programming" })] })), _jsx("a", Object.assign({ href: "", onClick: (e) => {
+                                    this.setState({ toggle: !this.state.toggle });
+                                    e.preventDefault();
+                                } }, { children: _jsxs("h4", Object.assign({ style: { display: this.state.toggle ? 'none' : 'block' } }, { children: ["Read Less", _jsx("img", { className: "mx-2", src: '/assets/images/position-down-vector.png', alt: "show-more", style: { transform: "rotate(180deg" }, width: 16, height: 16 })] })) }))] }))] })) })));
     }
 }
 //# sourceMappingURL=NSBoxSection.js.map

package/dist/components/NSBoxSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSBoxSection.js","sourceRoot":"","sources":["../../src/components/NSBoxSection.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,KAAK,MAAM,2BAA2B,CAAC;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAAyB;IAE7D,YAAY,KAAa;QAErB,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC;IAC9F,CAAC;IACD,QAAQ,CAAC,WAAmB;QAExB,IAAI,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC;IACnC,CAAC;IACD,OAAO,CAAC,MAAc;QAElB,IAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IAC9B,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,6BAAK,SAAS,EAAE,KAAK,CAAC,gBAAgB,iBAClC,cAAK,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAC,WAAW,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAQ,EAC/F,uBAAK,IAAI,CAAC,KAAK,CAAC,WAAW,GAAM,EACjC,yBAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAC,cAAK,SAAS,EAAC,MAAM,EAAC,GAAG,EAAC,yCAAyC,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAQ,IAAK,KAC1H,CACV,CAAA;IACL,CAAC;CACJ"}
+{"version":3,"file":"NSBoxSection.js","sourceRoot":"","sources":["../../src/components/NSBoxSection.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,17 +1,17 @@
 {
     "name": "namirasoft-site-react",
-    "version": "1.2.48",
+    "version": "1.2.50",
     "main": "./dist/main.js",
     "types": "./dist/main.d.ts",
     "dependencies": {
         "@types/node": "^20.11.24",
-        "@types/react": "^18.2.61",
+        "@types/react": "^18.2.62",
         "@types/react-dom": "^18.2.19",
         "antd": "^5.15.0",
         "bootstrap": "^5.3.3",
         "link-react": "^3.0.0",
         "namirasoft-api-link": "^1.2.3",
-        "namirasoft-core": "^1.2.5",
+        "namirasoft-core": "^1.2.13",
         "path-browserify": "^1.0.1",
         "react": "^18.2.0",
         "react-app-rewired": "^2.2.1",

package/src/App.tsx

@@ -16,8 +16,9 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import { NSButtonRed } from './components/NSButtonRed';
 // import { NSSelectBox } from './components/NSSelectBox';
 // import { type SelectProps } from 'antd';
-import { NSLayout, NSPagination } from './main';
-import { NSBoxSection } from './components/NSBoxSection';
+import { NSBoxSection, NSLayout, NSPagination } from './main';
+// import { NSBoxPosition } from './components/NSBoxPosition';
+// import { NSBoxSection } from './components/NSBoxSection';
 
 export function App()
 {
@@ -48,7 +49,7 @@ export function App()
         <div className="App">
             <NSLayout scope='Namirasoft SOP console' logo=''>
                 <div className='my-4 container'>
-                    <NSBoxSection image='src/assets/images/position-down-vector.png' description="" detail='#' />
+                    {/* <NSBoxSection image='src/assets/images/position-down-vector.png' description="" detail='#' /> */}
                     {/* <NSInputText title='Text' />
                     <NSInputInteger title='Integer' />
                     <NSInputFloat title='Floating Point' />
@@ -66,7 +67,8 @@ export function App()
                     <NSButtonRed title='Delete' onClick={() => { }} />
                     <NSPagination page={1} size={25} />
                 </div>
-                asdasd
+                {/* <NSBoxPosition image='' title='' list='' percent='' information='' /> */}
+                <NSBoxSection detail='detail' image='' description='desc' />
             </NSLayout>
         </div>
     );

package/src/components/NSBoxPosition.module.css

@@ -0,0 +1,81 @@
+.position_box_contain {
+    width: 100%;
+    padding: 0 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.position_box_layout {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(20, 27, 92, 0.3);
+    width: 358px;
+    height: auto;
+    border-radius: 8px;
+    text-align: center;
+    gap: 16px;
+    margin: 12px 0;
+    padding: 16px 0;
+}
+
+.position_box_information {
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    align-items: start;
+    text-align: left;
+    padding: 0 16px;
+    color: rgba(20, 27, 92, 1);
+}
+
+.position_box_information h3 {
+    font-size: 24px;
+    font-weight: 700;
+}
+
+.position_box_information h4 {
+    font-size: 16px;
+    font-weight: bold;
+    font-weight: 600;
+}
+
+.position_box_information ul {
+    width: 100%;
+}
+
+.position_box_information li {
+    text-decoration: underline;
+}
+
+.position_box_information span {
+    float: right;
+}
+
+@media only screen and (min-width:768px) {
+    .position_box_layout {
+        display: flex;
+        flex-direction: row;
+        justify-content: left;
+        width: 100%;
+        height: auto;
+    }
+
+    .position_box_contain {
+        padding: 0 48px;
+        display: flex;
+        justify-content: left;
+    }
+
+    .position_box_layout img {
+        width: 408px;
+        height: 276px;
+        padding: 0 16px;
+    }
+
+    .position_box_information {
+        line-height: 16px;
+    }
+}

package/src/components/NSBoxPosition.tsx

@@ -0,0 +1,56 @@
+"use client";
+import Style from "./NSBoxPosition.module.css";
+import React from "react";
+
+interface IProps
+{
+    image: string;
+    title: string;
+    list: string;
+    percent: string | number;
+    information: string | number;
+}
+
+interface IState
+{
+    image: string;
+    title: string;
+    list: string;
+    percent: string | number;
+    information: string | number;
+
+}
+
+export class NSBoxPosition extends React.Component<IProps, IState>
+{
+
+    constructor(props: IProps)
+    {
+        super(props);
+        this.state = { title: props.title, image: props.image, list: props.list, percent: props.percent, information: props.information };
+    }
+
+    override render()
+    {
+        return (
+            <div className={Style.position_box_contain}>
+                <div className={Style.position_box_layout}>
+                    <img className="rounded" src={this.state.image} alt="wordpress" width={326} height={220}></img>
+                    <div className={Style.position_box_information}>
+                        <h3>{this.state.title}</h3>
+                        <h4>Skills :</h4>
+                        <ul>
+                            <li>{this.state.list}<span>{this.props.percent}</span></li>
+                        </ul>
+                        <h4>Or</h4>
+                        <ul>
+                            <li>{this.state.list}<span>{this.props.percent}</span></li>
+                        </ul>
+                        <h3>Responsibility :</h3>
+                        <p>{this.state.information}</p>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}

package/src/components/NSBoxSection.tsx

@@ -1,5 +1,6 @@
 "use client";
-import Style from "./NSBoxSection.module.css";
+// import { a href="" } from "react-router-dom";
+// import Style from "./NSBoxSection.module.css";
 import React from "react";
 
 interface IProps
@@ -14,14 +15,16 @@ interface IState
     detail: string;
     image: string;
     description: string;
+    toggle: boolean;
 }
 
 export class NSBoxSection extends React.Component<IProps, IState>
 {
+
     constructor(props: IProps)
     {
         super(props);
-        this.state = { detail: props.detail, image: props.image, description: props.description };
+        this.state = { detail: props.detail, image: props.image, description: props.description, toggle: true };
     }
     setTitle(description: string)
     {
@@ -31,14 +34,40 @@ export class NSBoxSection extends React.Component<IProps, IState>
     {
         this.setState({ detail });
     }
+    setToggle(toggle: boolean)
+    {
+        this.setState({ toggle });
+    }
+
     override render()
     {
         return (
-            <div className={Style.position__layout}>
-                <img className="rounded" src={this.state.image} alt="wordpress" width={326} height={220}></img>
-                <h3>{this.state.description}</h3>
-                <h4>{this.state.detail}<img className="mx-2" src='/assets/images/position-down-vector.png' width={16} height={16}></img></h4>
-            </div >
+            <div className='position-contain'>
+                <div className="position-layout">
+                    <img className="rounded" src={this.state.image} alt="wordpress" width={326} height={220}></img>
+                    <div className='position-information'>
+                        <h3 className='position-title' style={{ display: this.state.toggle ? 'block' : 'none' }}>WordPress</h3>
+                        <a href="" onClick={(e) =>
+                        {
+                            this.setState({ toggle: !this.state.toggle })
+                            e.preventDefault()
+                        }}>
+                            <h4 className='position-readmore' style={{ display: this.state.toggle ? 'block' : 'none' }} >Read More<img className="mx-2" src='/assets/images/position-down-vector.png' alt="show-more" width={16} height={16}></img></h4>
+                        </a>
+                        <ul className='position-list' style={{ display: this.state.toggle ? 'none' : 'block' }}>
+                            <li>Frontend Programming</li>
+                            <li>Backend Programming</li>
+                        </ul>
+                        <a href="" onClick={(e) =>
+                        {
+                            this.setState({ toggle: !this.state.toggle })
+                            e.preventDefault()
+                        }}>
+                            <h4 style={{ display: this.state.toggle ? 'none' : 'block' }} >Read Less<img className="mx-2" src='/assets/images/position-down-vector.png' alt="show-more" style={{ transform: "rotate(180deg" }} width={16} height={16}></img></h4>
+                        </a>
+                    </div>
+                </div >
+            </div>
         )
     }
 }