@soul-refiner/design-system 2.4.28 → 2.4.30
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.
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
9
|
${d}
|
|
10
|
-
`,...p},React__default.default.createElement(Container,{as:e,$size:l,href:t},!A&&React__default.default.createElement(Image__default.default,{alt:"avatar image",height:l,onError:()=>I(!0),quality:100,sizes:"96 | 72 | 64 | 56 | 48 | 40 | 36 | 32 | 24 | 16",src:a??i,width:l}),A&&React__default.default.createElement(_default.Default,null),React__default.default.createElement("div",null,React__default.default.createElement(r,null))),React__default.default.createElement(box.Box,{$dir:"row-reverse",$gap:7},
|
|
10
|
+
`,...p},React__default.default.createElement(Container,{as:e,$size:l,href:t},!A&&React__default.default.createElement(Image__default.default,{alt:"avatar image",height:l,onError:()=>I(!0),quality:100,sizes:"96 | 72 | 64 | 56 | 48 | 40 | 36 | 32 | 24 | 16",src:a??i,width:l}),A&&React__default.default.createElement(_default.Default,null),React__default.default.createElement("div",null,React__default.default.createElement(r,null))),(u||n)&&React__default.default.createElement(box.Box,{$dir:"row-reverse",$gap:7},React__default.default.createElement(TextContainer,{$textPosition:s},u&&React__default.default.createElement(heading.H,{as:"h3",$bold:!0,$color:"grey-2",$textClampLines:1,sx:"font-size: 26px;"},u),n&&React__default.default.createElement(paragraph.P,{$color:"grey-4",$textClampLines:1},n)),o&&React__default.default.createElement(box.Box,{sx:"padding: .6rem 0 0 0; width: 18.33px; height: 18.33px;"},React__default.default.createElement(g,null))),f&&React__default.default.createElement(TooltipContainer,{className:"tooltipContainer",$sx:c},f))},Container=(Avatar.displayName="Avatar",styled.styled.div`
|
|
11
11
|
flex-shrink: 0;
|
|
12
12
|
display: flex;
|
|
13
13
|
flex-flow: row nowrap;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),arrow_up=require("../../../icons/arrow/arrow_up.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),audioPlayer=require("../audio-player/audio-player.js"),playlistItem=require("./playlist-item.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),styled__default=_interopDefaultCompat(styled);const AudioPlaylist=({activeIndex:e,onProgress:t,playlist:a,previewImage:l,setMediaItem:i,subtitle:r,title:d})=>{var o="undefined"!=typeof window?window:null;const n=a?.[e],[u,p]=React__default.default.useState(!1),[s,
|
|
1
|
+
"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),arrow_up=require("../../../icons/arrow/arrow_up.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),audioPlayer=require("../audio-player/audio-player.js"),playlistItem=require("./playlist-item.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),styled__default=_interopDefaultCompat(styled);const AudioPlaylist=({activeIndex:e,onProgress:t,playlist:a,previewImage:l,setMediaItem:i,subtitle:r,title:d})=>{var o="undefined"!=typeof window?window:null;const n=a?.[e],[u,p]=React__default.default.useState(!1),[s,f]=React__default.default.useState(!1),[c,_]=React__default.default.useState(0);return React__default.default.createElement(Wrapper,{$fullscreen:u},React__default.default.createElement(ThumbnailWrapper,null,React__default.default.createElement(Image__default.default,{alt:"thumbnail",height:400,width:o?.innerWidth||500,src:l}),React__default.default.createElement(box.Box,{$dir:"column",sx:"padding: 100px 0px 160px; position: relative; z-index: 2; margin: 0px 160px;"},React__default.default.createElement(heading.H,{$bold:!0,$color:"white",$fontSize:64,$lineHeight:96},d),React__default.default.createElement(heading.H,{$color:"grey-8",$fontSize:28,$lineHeight:36,$semiBold:!0},r))),React__default.default.createElement(PlaylistWrapper,null,a.map((e,t)=>React__default.default.createElement(playlistItem.PlaylistItem,{duration:e.duration,key:e.id,playing:e.id===n?.id&&s,progress:c,onPause:()=>f(!1),onPlay:()=>{i(t),f(!0)},title:e.title,thumbnail:e.thumbnail}))),React__default.default.createElement(Shade,{$isFullscreen:u},React__default.default.createElement(Button,{onClick:()=>p(e=>!e)},u?React__default.default.createElement(arrow_up.ArrowUp,{color:"grey-0",size:24}):React__default.default.createElement(chevron_down.ChevronDown,{color:"white",size:24}))),!!n&&React__default.default.createElement(BottomBarWrapper,null,React__default.default.createElement(audioPlayer.AudioPlayer,{onListen:e=>{_(e),t&&t(e)},onPause:()=>f(!1),onPlay:()=>f(!0),playing:s,progress:c,src:n.src,thumbnail:n.thumbnail,title:n.title})))},Wrapper=styled__default.default.div`
|
|
2
2
|
${({$fullscreen:e})=>e?"height: 100vh;":"height: 744px;"}
|
|
3
3
|
width: 100vw;
|
|
4
4
|
position: relative;
|
|
@@ -52,6 +52,6 @@
|
|
|
52
52
|
flex-direction: column;
|
|
53
53
|
overflow-y: auto;
|
|
54
54
|
`,BottomBarWrapper=styled__default.default.nav`
|
|
55
|
-
position:
|
|
55
|
+
position: fixed;
|
|
56
56
|
z-index: 50000;
|
|
57
57
|
`;exports.AudioPlaylist=AudioPlaylist;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
box-sizing: border-box;
|
|
6
6
|
background-color: var(--color-blue-10);
|
|
7
7
|
border-right: 1px solid var(--color-grey-9);
|
|
8
|
-
`,InnerNavItem=({active:e,href:r,icon:a,label:t,
|
|
8
|
+
`,InnerNavItem=({active:e,href:r,icon:a,label:t,isPaidIcon:n,sx:l,onClick:o})=>React__default.default.createElement(Item,{$active:e,$sx:l,href:r||"#",scroll:!1,onClick:o},a,t,n),Item=styled.styled(Link__default.default)`
|
|
9
9
|
padding: 14px 16px;
|
|
10
10
|
display: flex;
|
|
11
11
|
gap: 16px;
|
|
@@ -6,7 +6,7 @@ import { DrawerProps } from '../../../components/surfaces/drawer/drawer';
|
|
|
6
6
|
declare const InnerNav: {
|
|
7
7
|
({ children }: React.PropsWithChildren): React.JSX.Element;
|
|
8
8
|
Item: {
|
|
9
|
-
({ active, href, icon, label, sx, onClick, }: InnerNavItemProps): React.JSX.Element;
|
|
9
|
+
({ active, href, icon, label, isPaidIcon, sx, onClick, }: InnerNavItemProps): React.JSX.Element;
|
|
10
10
|
displayName: string;
|
|
11
11
|
};
|
|
12
12
|
Dropdown: {
|
|
@@ -58,6 +58,7 @@ export interface InnerNavItemProps {
|
|
|
58
58
|
href?: string;
|
|
59
59
|
icon?: React.ReactElement;
|
|
60
60
|
label: React.ReactNode;
|
|
61
|
+
isPaidIcon?: React.ReactNode;
|
|
61
62
|
sx?: string;
|
|
62
63
|
onClick?: () => void;
|
|
63
64
|
}
|