@soul-refiner/design-system 2.14.112 → 2.14.113
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.
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var
|
|
2
|
+
"use strict";var e=require("react/jsx-runtime"),i=require("react"),r=require("next/image"),t=require("styled-components"),o=require("../../atoms/box/box.js"),s=require("../../actions/button/button.js"),n=require("../../actions/dropdown/dropdown.js"),l=require("../../atoms/typography/heading.js"),a=require("../../atoms/typography/paragraph.js"),d=require("../../../icons/basic/ellipsis_horizontal.js"),x=require("../../iconography/avatar/icons/ispaid.js"),p=require("@mui/material"),c=require("../../../icons/time/hourglass.js"),h=require("../../../icons/arrow/chevron_right.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=g(i),u=g(r);const m=t.styled.div`
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
&:hover > div {
|
|
6
6
|
display: initial;
|
|
7
7
|
}
|
|
8
|
-
`,
|
|
8
|
+
`,y=t.styled.div`
|
|
9
9
|
width: 312px;
|
|
10
10
|
height: 400px;
|
|
11
11
|
display: block;
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
object-fit: cover;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
${({$sx:
|
|
25
|
+
${({$sx:e})=>e||""};
|
|
26
26
|
`,j=t.styled.figure`
|
|
27
27
|
position: relative;
|
|
28
28
|
width: 100%;
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
justify-content: flex-end;
|
|
34
34
|
flex-direction: column;
|
|
35
35
|
|
|
36
|
-
${({$sx:
|
|
37
|
-
|
|
36
|
+
${({$sx:e})=>e||""};
|
|
37
|
+
`,b=t.styled.figcaption`
|
|
38
38
|
position: relative;
|
|
39
39
|
width: 100%;
|
|
40
40
|
height: auto;
|
|
@@ -52,21 +52,52 @@
|
|
|
52
52
|
padding: 16px 24px;
|
|
53
53
|
box-shadow: 0 -10px 20px 0 rgba(0, 0, 0, 0.001);
|
|
54
54
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
55
|
-
|
|
55
|
+
`,$=t.styled.div`
|
|
56
56
|
display: flex;
|
|
57
57
|
margin-top: 8px;
|
|
58
58
|
align-items: center;
|
|
59
|
-
|
|
59
|
+
justify-content: space-between;
|
|
60
|
+
flex-wrap: nowrap;
|
|
61
|
+
gap: 8px;
|
|
62
|
+
`,w=t.styled.div`
|
|
60
63
|
display: flex;
|
|
61
64
|
flex-direction: column;
|
|
62
65
|
margin-left: 4px;
|
|
63
|
-
|
|
66
|
+
flex-shrink: 0;
|
|
67
|
+
`,v=t.styled.div`
|
|
64
68
|
display: flex;
|
|
65
69
|
align-items: center;
|
|
70
|
+
flex-shrink: 0;
|
|
66
71
|
|
|
67
|
-
${({$addMarginLeft:
|
|
68
|
-
`,
|
|
72
|
+
${({$addMarginLeft:e})=>e&&"\n padding-left: 8px;\n border-left: 1px solid var(--color-grey-5);\n "};
|
|
73
|
+
`,q=t.styled.div`
|
|
69
74
|
display: flex;
|
|
70
75
|
flex-direction: column;
|
|
71
76
|
margin-left: 4px;
|
|
72
|
-
|
|
77
|
+
`,P=t.styled.button`
|
|
78
|
+
display: flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
gap: 0.5rem;
|
|
81
|
+
padding: 0.375rem 0;
|
|
82
|
+
background: none;
|
|
83
|
+
border: none;
|
|
84
|
+
cursor: pointer;
|
|
85
|
+
color: var(--color-grey-10);
|
|
86
|
+
font-family: var(--font-inter);
|
|
87
|
+
font-size: 0.875rem;
|
|
88
|
+
font-style: normal;
|
|
89
|
+
font-weight: 500;
|
|
90
|
+
line-height: 1.25rem;
|
|
91
|
+
letter-spacing: -0.00525rem;
|
|
92
|
+
white-space: nowrap;
|
|
93
|
+
flex-shrink: 0;
|
|
94
|
+
svg {
|
|
95
|
+
width: 1rem;
|
|
96
|
+
height: 1rem;
|
|
97
|
+
fill: var(--color-grey-10);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&:hover {
|
|
101
|
+
opacity: 0.8;
|
|
102
|
+
}
|
|
103
|
+
`;exports.PersonCard=({actions:i,chip:r,dotsActions:t,href:g,image:z,subtitle:k,sx:C,title:H,isPaidUser:S,progress:B,lastOnline:A,containerSx:D,onProgressClick:L})=>e.jsx(y,{$image:z,$sx:D,children:e.jsxs(j,{$sx:C,children:[e.jsxs(m,{as:g?"a":"div",href:g,children:[t&&!!t.length&&e.jsx(n.Dropdown,{containerSx:"",hasArrow:!0,maintainState:!1,onClick:e=>e.preventDefault(),options:t,sx:"position: absolute; top: 8px; right: 8px; z-index: 24; display: none;",trigger:e.jsx(s.Button,{className:"icon",icon:e.jsx(d.EllipsisHorizontal,{}),onClick:e=>e.stopPropagation(),showChevron:!1,size:"small",type:"outlined"})}),e.jsx(u.default,{alt:"",height:400,quality:100,src:z,width:312})]}),r&&e.jsx(o.Box,{sx:"position: absolute; top: 8px; left: 8px; z-index: 24;",children:r}),e.jsxs(b,{children:[e.jsxs(o.Box,{$display:"flex",$dir:"row",$gap:8,sx:"min-width:0",children:[e.jsx(l.H,{as:"span",$bold:!0,$color:"white",$fontSize:24,$lineHeight:36,sx:"display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;",title:H,children:H}),S&&e.jsx(o.Box,{sx:"padding: .6rem 0 0 0; width: 18.33px; height: 18.33px; flex-shrink:0;",children:e.jsx(x.IsPaid,{})})]}),k&&e.jsx(a.P,{as:"span",$color:"white",$fontSize:14,$lineHeight:20,children:k}),(void 0!==B||A||L)&&e.jsxs($,{children:[void 0!==B&&e.jsxs(e.Fragment,{children:[e.jsx(p.CircularProgress,{variant:"determinate",value:B,style:{color:"green",width:18,height:18}}),e.jsxs(w,{children:[e.jsx(a.P,{$fontSize:10,$color:"grey-9",$lineHeight:14,children:"Progress"}),e.jsxs(a.P,{$fontSize:10,$color:"white",$bold:!0,$lineHeight:14,children:[B,"%"]})]})]}),A&&e.jsxs(v,{$addMarginLeft:void 0!==B,children:[e.jsx(c.Hourglass,{}),e.jsxs(q,{children:[e.jsx(a.P,{$fontSize:10,$color:"grey-9",$lineHeight:14,children:"Last online"}),e.jsx(a.P,{$fontSize:10,$color:"white",$bold:!0,$lineHeight:14,children:A})]})]}),L&&e.jsxs(P,{onClick:e=>{e.preventDefault(),e.stopPropagation(),L()},children:["Progress",e.jsx(h.ChevronRight,{})]})]}),i&&e.jsx(o.Box,{$display:"flex",$dir:"row",$gap:8,sx:"margin-top: 16px;",children:f.default.Children.toArray(i)})]})]})});
|
|
@@ -13,6 +13,7 @@ export interface PersonCardProps {
|
|
|
13
13
|
progress?: number;
|
|
14
14
|
lastOnline?: string;
|
|
15
15
|
containerSx?: string;
|
|
16
|
+
onProgressClick?: () => void;
|
|
16
17
|
}
|
|
17
|
-
export declare const PersonCard: ({ actions, chip, dotsActions, href, image, subtitle, sx, title, isPaidUser, progress, lastOnline, containerSx, }: PersonCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare const PersonCard: ({ actions, chip, dotsActions, href, image, subtitle, sx, title, isPaidUser, progress, lastOnline, containerSx, onProgressClick, }: PersonCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
//# sourceMappingURL=person.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../../../src/components/card/person/person.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;
|
|
1
|
+
{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../../../src/components/card/person/person.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AAOpF,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IACpD,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,GAAG,OAAO,CAAC,EAAE,CAAC;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,sIAcpB,eAAe,4CA+GjB,CAAC"}
|