namirasoft-site-react 1.3.16 → 1.3.18
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.
- package/dist/components/NSCard.d.ts +2 -5
- package/dist/components/NSCard.js +7 -5
- package/dist/components/NSCard.js.map +1 -1
- package/dist/components/NSCard.module.css +1 -12
- package/dist/components/NSEntityCardBackground.d.ts +2 -4
- package/dist/components/NSEntityCardBackground.js +3 -2
- package/dist/components/NSEntityCardBackground.js.map +1 -1
- package/dist/components/NSEntityCardBackground.module.css +0 -11
- package/dist/components/NSLinkBlue.d.ts +4 -2
- package/dist/components/NSLinkBlue.js +3 -2
- package/dist/components/NSLinkBlue.js.map +1 -1
- package/dist/components/NSLinkBlue.module.css +14 -2
- package/package.json +1 -1
- package/src/components/NSCard.module.css +1 -12
- package/src/components/NSCard.tsx +22 -18
- package/src/components/NSEntityCardBackground.module.css +0 -11
- package/src/components/NSEntityCardBackground.tsx +8 -8
- package/src/components/NSLinkBlue.module.css +14 -2
- package/src/components/NSLinkBlue.tsx +6 -4
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Component } from 'react';
|
|
2
|
+
import { NSLinkBlueState } from './NSLinkBlue';
|
|
2
3
|
export interface NSCardProps {
|
|
3
4
|
id?: string | number;
|
|
4
5
|
title?: string;
|
|
@@ -7,11 +8,7 @@ export interface NSCardProps {
|
|
|
7
8
|
src: string;
|
|
8
9
|
alt: string;
|
|
9
10
|
};
|
|
10
|
-
link?:
|
|
11
|
-
text?: string;
|
|
12
|
-
href: string;
|
|
13
|
-
target?: string;
|
|
14
|
-
};
|
|
11
|
+
link?: NSLinkBlueState;
|
|
15
12
|
}
|
|
16
13
|
export declare class NSCard extends Component<NSCardProps> {
|
|
17
14
|
render(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,15 +2,17 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { Component } from 'react';
|
|
4
4
|
import Styles from './NSCard.module.css';
|
|
5
|
+
import { NSLinkBlue } from './NSLinkBlue';
|
|
5
6
|
export class NSCard extends Component {
|
|
6
7
|
render() {
|
|
7
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
8
8
|
return (_jsx(_Fragment, { children: _jsxs("article", { className: Styles.ns_card, children: [_jsxs("div", { className: Styles.ns_card_detail_container, children: [_jsxs("div", { className: Styles.ns_card_title_img, style: { alignItems: this.props.description ? "flex-start" : "center" }, children: [_jsx("img", { className: Styles.ns_card_img, src: this.props.image.src, alt: this.props.image.alt }), _jsx("h3", { className: Styles.ns_card_title, children: this.props.title && this.props.title })] }), this.props.description &&
|
|
9
|
-
_jsx("p", { className: Styles.ns_card_description, children: this.props.description })] }), this.props.link
|
|
10
|
-
this.props.link.
|
|
11
|
-
|
|
9
|
+
_jsx("p", { className: Styles.ns_card_description, children: this.props.description })] }), this.props.link ?
|
|
10
|
+
this.props.link.title ?
|
|
11
|
+
_jsx("div", { className: Styles.ns_card_link_container, children: _jsx(NSLinkBlue, { title: this.props.link.title, href: this.props.link.href, target: this.props.link.target, style: { marginTop: "24px" } }) })
|
|
12
|
+
:
|
|
13
|
+
_jsx("div", { className: Styles.ns_card_link_container, children: _jsx(NSLinkBlue, { href: this.props.link.href, target: this.props.link.target }) })
|
|
12
14
|
:
|
|
13
|
-
_jsx(
|
|
15
|
+
_jsx(_Fragment, {})] }) }));
|
|
14
16
|
}
|
|
15
17
|
}
|
|
16
18
|
//# sourceMappingURL=NSCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSCard.js","sourceRoot":"","sources":["../../src/components/NSCard.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,MAAM,MAAM,qBAAqB,CAAA;
|
|
1
|
+
{"version":3,"file":"NSCard.js","sourceRoot":"","sources":["../../src/components/NSCard.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,MAAM,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAC;AAc3D,MAAM,OAAO,MAAO,SAAQ,SAAsB;IAExC,MAAM;QAEd,OAAO,CACN,4BACC,mBAAS,SAAS,EAAE,MAAM,CAAC,OAAO,aACjC,eAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,aAC9C,eAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,EAAE,aAChH,cAAK,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAI,EAC5F,aAAI,SAAS,EAAE,MAAM,CAAC,aAAa,YACjC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,GACjC,IACA,EAEL,IAAI,CAAC,KAAK,CAAC,WAAW;gCACtB,YAAG,SAAS,EAAE,MAAM,CAAC,mBAAmB,YACtC,IAAI,CAAC,KAAK,CAAC,WAAW,GACpB,IAGA,EACL,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;wBACjB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;4BACtB,cAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,YAC5C,KAAC,UAAU,IACV,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAC5B,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAC1B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAC9B,KAAK,EAAE,EAAC,SAAS,EAAE,MAAM,EAAC,GACzB,GACG;4BACN,CAAC;gCACD,cAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,YAC5C,KAAC,UAAU,IACV,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAC1B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAC7B,GACG;wBACP,CAAC;4BACD,mBAAK,IAEI,GACT,CACH,CAAC;IACH,CAAC;CACD"}
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.ns_card_img {
|
|
35
|
-
border-radius:
|
|
35
|
+
border-radius: 16px;
|
|
36
36
|
object-fit: cover;
|
|
37
37
|
width: 100%;
|
|
38
38
|
height: 100%;
|
|
@@ -80,17 +80,6 @@
|
|
|
80
80
|
width: 100%;
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
-
.ns_link_absolute {
|
|
84
|
-
position: absolute;
|
|
85
|
-
width: 100%;
|
|
86
|
-
height: 100%;
|
|
87
|
-
left: 0;
|
|
88
|
-
right: 0;
|
|
89
|
-
top: 0;
|
|
90
|
-
bottom: 0;
|
|
91
|
-
cursor: pointer;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
83
|
|
|
95
84
|
@media only screen and (min-width: 576px) {
|
|
96
85
|
.ns_card {
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import { Component } from 'react';
|
|
2
2
|
import { Background } from '../types/Background';
|
|
3
|
+
import { NSLinkBlueState } from './NSLinkBlue';
|
|
3
4
|
export interface NSEntityCardBackgroundProps {
|
|
4
5
|
id?: string | number;
|
|
5
6
|
title: string;
|
|
6
|
-
link?:
|
|
7
|
-
href: string;
|
|
8
|
-
target?: string;
|
|
9
|
-
};
|
|
7
|
+
link?: NSLinkBlueState;
|
|
10
8
|
background?: Background;
|
|
11
9
|
}
|
|
12
10
|
export interface NSEntityCardBackgroundState {
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { Component } from 'react';
|
|
4
4
|
import Styles from './NSEntityCardBackground.module.css';
|
|
5
|
+
import { NSLinkBlue } from './NSLinkBlue';
|
|
5
6
|
export class NSEntityCardBackground extends Component {
|
|
6
7
|
constructor(props) {
|
|
7
8
|
var _a, _b, _c;
|
|
@@ -15,13 +16,13 @@ export class NSEntityCardBackground extends Component {
|
|
|
15
16
|
};
|
|
16
17
|
}
|
|
17
18
|
render() {
|
|
18
|
-
var _a, _b, _c
|
|
19
|
+
var _a, _b, _c;
|
|
19
20
|
return (_jsx(_Fragment, { children: _jsxs("article", { className: Styles.card_background, style: {
|
|
20
21
|
backgroundImage: (_a = this.state.background) === null || _a === void 0 ? void 0 : _a.image,
|
|
21
22
|
backgroundColor: (_b = this.state.background) === null || _b === void 0 ? void 0 : _b.color,
|
|
22
23
|
backgroundPosition: (_c = this.state.background) === null || _c === void 0 ? void 0 : _c.position
|
|
23
24
|
}, children: [_jsx("p", { className: Styles.card_background_text, children: this.props.title }), this.props.link &&
|
|
24
|
-
_jsx("div", { className: Styles.ns_card_link_container, children: _jsx(
|
|
25
|
+
_jsx("div", { className: Styles.ns_card_link_container, children: _jsx(NSLinkBlue, { href: this.props.link.href, target: this.props.link.target }) })] }) }));
|
|
25
26
|
}
|
|
26
27
|
}
|
|
27
28
|
//# sourceMappingURL=NSEntityCardBackground.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSEntityCardBackground.js","sourceRoot":"","sources":["../../src/components/NSEntityCardBackground.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,MAAM,MAAM,qCAAqC,CAAA;
|
|
1
|
+
{"version":3,"file":"NSEntityCardBackground.js","sourceRoot":"","sources":["../../src/components/NSEntityCardBackground.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,MAAM,MAAM,qCAAqC,CAAA;AAExD,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAC;AAgB3D,MAAM,OAAO,sBAAuB,SAAQ,SAAmE;IAG9G,YAAY,KAAkC;;QAE7C,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACZ,UAAU,EAAE;gBACX,KAAK,EAAE,OAAO,MAAA,KAAK,CAAC,UAAU,0CAAE,KAAK,GAAG;gBACxC,KAAK,EAAE,MAAA,KAAK,CAAC,UAAU,0CAAE,KAAK;gBAC9B,QAAQ,EAAE,MAAA,KAAK,CAAC,UAAU,0CAAE,QAAQ;aACpC;SACD,CAAA;IACF,CAAC;IAEQ,MAAM;;QAEd,OAAO,CACN,4BACC,mBAAS,SAAS,EAAE,MAAM,CAAC,eAAe,EACzC,KAAK,EACJ;oBACA,eAAe,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,KAAK;oBAC7C,eAAe,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,KAAK;oBAC7C,kBAAkB,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,QAAQ;iBACnD,aAGD,YAAG,SAAS,EAAE,MAAM,CAAC,oBAAoB,YACvC,IAAI,CAAC,KAAK,CAAC,KAAK,GACd,EAGH,IAAI,CAAC,KAAK,CAAC,IAAI;wBACf,cAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,YAC5C,KAAC,UAAU,IACV,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAC1B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAC7B,GACG,IAEG,GACT,CACH,CAAC;IACH,CAAC;CACD"}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
export interface NSLinkBlueProps {
|
|
3
|
-
title
|
|
3
|
+
title?: string;
|
|
4
4
|
href: string;
|
|
5
|
+
target?: string;
|
|
5
6
|
style?: React.CSSProperties;
|
|
6
7
|
}
|
|
7
8
|
export interface NSLinkBlueState {
|
|
8
|
-
title
|
|
9
|
+
title?: string;
|
|
9
10
|
href: string;
|
|
11
|
+
target?: string;
|
|
10
12
|
}
|
|
11
13
|
export declare class NSLinkBlue extends React.Component<NSLinkBlueProps, NSLinkBlueState> {
|
|
12
14
|
constructor(props: NSLinkBlueProps);
|
|
@@ -5,7 +5,7 @@ import React from "react";
|
|
|
5
5
|
export class NSLinkBlue extends React.Component {
|
|
6
6
|
constructor(props) {
|
|
7
7
|
super(props);
|
|
8
|
-
this.state = { title: props.title, href: props.href };
|
|
8
|
+
this.state = { title: props.title, href: props.href, target: props.target };
|
|
9
9
|
}
|
|
10
10
|
setTitle(title) {
|
|
11
11
|
this.setState({ title });
|
|
@@ -14,7 +14,8 @@ export class NSLinkBlue extends React.Component {
|
|
|
14
14
|
this.setState({ href });
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
|
|
17
|
+
var _a, _b;
|
|
18
|
+
return (_jsx("div", { className: Styles.ns_link_parent, style: this.props.style, children: _jsx("a", { className: `text-white text-decoration-none ${this.props.title ? Styles.ns_link : Styles.ns_link_absolute}`, href: this.state.href, target: (_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a.target) !== null && _b !== void 0 ? _b : "_self", children: this.state.title }) }));
|
|
18
19
|
}
|
|
19
20
|
}
|
|
20
21
|
//# sourceMappingURL=NSLinkBlue.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSLinkBlue.js","sourceRoot":"","sources":["../../src/components/NSLinkBlue.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"NSLinkBlue.js","sourceRoot":"","sources":["../../src/components/NSLinkBlue.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B,MAAM,OAAO,UAAW,SAAQ,KAAK,CAAC,SAA2C;IAEhF,YAAY,KAAsB;QAEjC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAG,IAAI,EAAE,KAAK,CAAC,IAAI,EAAG,MAAM,EAAE,KAAK,CAAC,MAAM,EAAC,CAAC;IAC9E,CAAC;IACD,QAAQ,CAAC,KAAa;QAErB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC1B,CAAC;IACD,OAAO,CAAC,IAAY;QAEnB,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IACzB,CAAC;IACQ,MAAM;;QAEd,OAAO,CAEN,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,YAC7D,YAAG,SAAS,EAAE,mCAAmC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,mCAAI,OAAO,YAC1K,IAAI,CAAC,KAAK,CAAC,KAAK,GACd,GACC,CACN,CAAA;IACF,CAAC;CACD"}
|
|
@@ -7,9 +7,10 @@
|
|
|
7
7
|
gap: 24px;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.
|
|
10
|
+
.ns_link {
|
|
11
11
|
text-decoration: none;
|
|
12
12
|
background-color: #366EFF;
|
|
13
|
+
box-shadow: inset 2px 2px 2px 0 #1754F3;
|
|
13
14
|
color: #fff;
|
|
14
15
|
font-size: 16px;
|
|
15
16
|
font-weight: 400;
|
|
@@ -21,4 +22,15 @@
|
|
|
21
22
|
border-radius: 24px;
|
|
22
23
|
max-width: 358px;
|
|
23
24
|
width: 100%;
|
|
24
|
-
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.ns_link_absolute {
|
|
28
|
+
position: absolute;
|
|
29
|
+
width: 100%;
|
|
30
|
+
height: 100%;
|
|
31
|
+
left: 0;
|
|
32
|
+
right: 0;
|
|
33
|
+
top: 0;
|
|
34
|
+
bottom: 0;
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
}
|
package/package.json
CHANGED
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.ns_card_img {
|
|
35
|
-
border-radius:
|
|
35
|
+
border-radius: 16px;
|
|
36
36
|
object-fit: cover;
|
|
37
37
|
width: 100%;
|
|
38
38
|
height: 100%;
|
|
@@ -80,17 +80,6 @@
|
|
|
80
80
|
width: 100%;
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
-
.ns_link_absolute {
|
|
84
|
-
position: absolute;
|
|
85
|
-
width: 100%;
|
|
86
|
-
height: 100%;
|
|
87
|
-
left: 0;
|
|
88
|
-
right: 0;
|
|
89
|
-
top: 0;
|
|
90
|
-
bottom: 0;
|
|
91
|
-
cursor: pointer;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
83
|
|
|
95
84
|
@media only screen and (min-width: 576px) {
|
|
96
85
|
.ns_card {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Component } from 'react';
|
|
3
3
|
import Styles from './NSCard.module.css'
|
|
4
|
+
import { NSLinkBlue, NSLinkBlueState } from './NSLinkBlue';
|
|
4
5
|
|
|
5
6
|
export interface NSCardProps
|
|
6
7
|
{
|
|
@@ -11,15 +12,11 @@ export interface NSCardProps
|
|
|
11
12
|
src: string;
|
|
12
13
|
alt: string;
|
|
13
14
|
};
|
|
14
|
-
link?:
|
|
15
|
-
{
|
|
16
|
-
text?: string;
|
|
17
|
-
href: string;
|
|
18
|
-
target?: string;
|
|
19
|
-
}
|
|
15
|
+
link?: NSLinkBlueState
|
|
20
16
|
}
|
|
21
17
|
|
|
22
|
-
export class NSCard extends Component<NSCardProps>
|
|
18
|
+
export class NSCard extends Component<NSCardProps>
|
|
19
|
+
{
|
|
23
20
|
override render()
|
|
24
21
|
{
|
|
25
22
|
return (
|
|
@@ -40,18 +37,25 @@ export class NSCard extends Component<NSCardProps> {
|
|
|
40
37
|
}
|
|
41
38
|
|
|
42
39
|
</div>
|
|
43
|
-
{this.props.link
|
|
44
|
-
this.props.link.
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
40
|
+
{this.props.link ?
|
|
41
|
+
this.props.link.title ?
|
|
42
|
+
<div className={Styles.ns_card_link_container}>
|
|
43
|
+
<NSLinkBlue
|
|
44
|
+
title={this.props.link.title}
|
|
45
|
+
href={this.props.link.href}
|
|
46
|
+
target={this.props.link.target}
|
|
47
|
+
style={{marginTop: "24px"}}
|
|
48
|
+
/>
|
|
49
|
+
</div>
|
|
50
|
+
:
|
|
51
|
+
<div className={Styles.ns_card_link_container}>
|
|
52
|
+
<NSLinkBlue
|
|
53
|
+
href={this.props.link.href}
|
|
54
|
+
target={this.props.link.target}
|
|
55
|
+
/>
|
|
56
|
+
</div>
|
|
50
57
|
:
|
|
51
|
-
|
|
52
|
-
<a className={Styles.ns_link_absolute} href={this.props.link?.href} target={this.props.link?.target ?? "_self"} >
|
|
53
|
-
</a>
|
|
54
|
-
</div>
|
|
58
|
+
<></>
|
|
55
59
|
}
|
|
56
60
|
</article >
|
|
57
61
|
</>
|
|
@@ -3,16 +3,13 @@
|
|
|
3
3
|
import { Component } from 'react';
|
|
4
4
|
import Styles from './NSEntityCardBackground.module.css'
|
|
5
5
|
import { Background } from '../types/Background';
|
|
6
|
+
import { NSLinkBlue, NSLinkBlueState } from './NSLinkBlue';
|
|
6
7
|
|
|
7
8
|
export interface NSEntityCardBackgroundProps
|
|
8
9
|
{
|
|
9
10
|
id?: string | number;
|
|
10
11
|
title: string;
|
|
11
|
-
link?:
|
|
12
|
-
{
|
|
13
|
-
href: string;
|
|
14
|
-
target?: string;
|
|
15
|
-
};
|
|
12
|
+
link?: NSLinkBlueState
|
|
16
13
|
|
|
17
14
|
background?: Background;
|
|
18
15
|
}
|
|
@@ -22,7 +19,8 @@ export interface NSEntityCardBackgroundState
|
|
|
22
19
|
background?: Background;
|
|
23
20
|
}
|
|
24
21
|
|
|
25
|
-
export class NSEntityCardBackground extends Component<NSEntityCardBackgroundProps, NSEntityCardBackgroundState>
|
|
22
|
+
export class NSEntityCardBackground extends Component<NSEntityCardBackgroundProps, NSEntityCardBackgroundState>
|
|
23
|
+
{
|
|
26
24
|
|
|
27
25
|
constructor(props: NSEntityCardBackgroundProps)
|
|
28
26
|
{
|
|
@@ -56,8 +54,10 @@ export class NSEntityCardBackground extends Component<NSEntityCardBackgroundProp
|
|
|
56
54
|
|
|
57
55
|
{this.props.link &&
|
|
58
56
|
<div className={Styles.ns_card_link_container}>
|
|
59
|
-
<
|
|
60
|
-
|
|
57
|
+
<NSLinkBlue
|
|
58
|
+
href={this.props.link.href}
|
|
59
|
+
target={this.props.link.target}
|
|
60
|
+
/>
|
|
61
61
|
</div>
|
|
62
62
|
}
|
|
63
63
|
</article >
|
|
@@ -7,9 +7,10 @@
|
|
|
7
7
|
gap: 24px;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.
|
|
10
|
+
.ns_link {
|
|
11
11
|
text-decoration: none;
|
|
12
12
|
background-color: #366EFF;
|
|
13
|
+
box-shadow: inset 2px 2px 2px 0 #1754F3;
|
|
13
14
|
color: #fff;
|
|
14
15
|
font-size: 16px;
|
|
15
16
|
font-weight: 400;
|
|
@@ -21,4 +22,15 @@
|
|
|
21
22
|
border-radius: 24px;
|
|
22
23
|
max-width: 358px;
|
|
23
24
|
width: 100%;
|
|
24
|
-
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.ns_link_absolute {
|
|
28
|
+
position: absolute;
|
|
29
|
+
width: 100%;
|
|
30
|
+
height: 100%;
|
|
31
|
+
left: 0;
|
|
32
|
+
right: 0;
|
|
33
|
+
top: 0;
|
|
34
|
+
bottom: 0;
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
}
|
|
@@ -5,15 +5,17 @@ import React from "react";
|
|
|
5
5
|
|
|
6
6
|
export interface NSLinkBlueProps
|
|
7
7
|
{
|
|
8
|
-
title
|
|
8
|
+
title?: string;
|
|
9
9
|
href: string;
|
|
10
|
+
target?: string;
|
|
10
11
|
style?: React.CSSProperties;
|
|
11
12
|
}
|
|
12
13
|
|
|
13
14
|
export interface NSLinkBlueState
|
|
14
15
|
{
|
|
15
|
-
title
|
|
16
|
+
title?: string;
|
|
16
17
|
href: string;
|
|
18
|
+
target?: string;
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
export class NSLinkBlue extends React.Component<NSLinkBlueProps, NSLinkBlueState>
|
|
@@ -21,7 +23,7 @@ export class NSLinkBlue extends React.Component<NSLinkBlueProps, NSLinkBlueState
|
|
|
21
23
|
constructor(props: NSLinkBlueProps)
|
|
22
24
|
{
|
|
23
25
|
super(props);
|
|
24
|
-
this.state = { title: props.title, href: props.href };
|
|
26
|
+
this.state = { title: props.title , href: props.href , target: props.target};
|
|
25
27
|
}
|
|
26
28
|
setTitle(title: string)
|
|
27
29
|
{
|
|
@@ -36,7 +38,7 @@ export class NSLinkBlue extends React.Component<NSLinkBlueProps, NSLinkBlueState
|
|
|
36
38
|
return (
|
|
37
39
|
|
|
38
40
|
<div className={Styles.ns_link_parent} style={this.props.style}>
|
|
39
|
-
<a className=
|
|
41
|
+
<a className={`text-white text-decoration-none ${this.props.title ? Styles.ns_link : Styles.ns_link_absolute}`} href={this.state.href} target={this.state?.target ?? "_self"} >
|
|
40
42
|
{this.state.title}
|
|
41
43
|
</a>
|
|
42
44
|
</div>
|