@mojito-inc/secondary-market/cjs/component/TraitsContainer.js

Mojito secondary market is the platform to purchase NFT.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),o=require("@mui/material/Grid"),l=require("@mui/material/Typography"),r=require("@mui/material/Box"),t=require("@mui/material/styles"),n=require("@mui/icons-material/KeyboardArrowDown"),d=require("@mui/icons-material/KeyboardArrowUp");exports.default=({traitsList:s})=>{var u,a,p,v,c,x,m,h,f;const g=t.useTheme(),[y,j]=i.useState(!1),T=i.useMemo((()=>y?s:null==s?void 0:s.slice(0,9)),[y,s]),S=i.useMemo((()=>{var e;return(null===(e=T.filter((e=>"TOTAL VIN"===e.description)))||void 0===e?void 0:e.length)>0}),[T]),w=i.useCallback((()=>{j(!y)}),[y,j]);return e.jsxs(r,{children:[e.jsxs(r,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"10px"},children:[e.jsx(l,{sx:{fontSize:"12px",fontWeight:"500",color:null===(a=null===(u=null==g?void 0:g.palette)||void 0===u?void 0:u.grey)||void 0===a?void 0:a[600],marginBottom:"10px"},children:"TRAITS"}),(null!==(p=null==s?void 0:s.length)&&void 0!==p?p:0)>3&&e.jsxs(l,{sx:{fontSize:"12px",display:"flex",justifyContent:"center",alignItems:"center",cursor:"pointer",color:null===(c=null===(v=null==g?void 0:g.palette)||void 0===v?void 0:v.grey)||void 0===c?void 0:c[600]},onClick:w,children:[y?"See Less":"See More",y?e.jsx(d,{sx:{fontSize:"16px",color:null===(m=null===(x=null==g?void 0:g.palette)||void 0===x?void 0:x.grey)||void 0===m?void 0:m[600]}}):e.jsx(n,{sx:{fontSize:"16px",color:null===(f=null===(h=null==g?void 0:g.palette)||void 0===h?void 0:h.grey)||void 0===f?void 0:f[600]}})]})]}),e.jsx(o,{container:!0,spacing:1,children:null==T?void 0:T.map((i=>{var t,n,d,s,u,a,p,v,c;return e.jsx(o,{item:!0,xs:4,children:e.jsxs(r,{sx:{padding:"8px 16px 8px 16px",border:S&&"TOTAL VIN"===i.description?`1px solid ${g.palette.primary.main}`:`1px solid ${null===(d=null===(n=null===(t=null==g?void 0:g.palette)||void 0===t?void 0:t.appDefaultColor)||void 0===n?void 0:n.secondary)||void 0===d?void 0:d.light}`,borderRadius:"4px",backgroundColor:null===(u=null===(s=null==g?void 0:g.palette)||void 0===s?void 0:s.grey)||void 0===u?void 0:u[900],display:"flex",flexDirection:"column",justifyContent:"center",minHeight:"59px",boxSizing:S&&"TOTAL VIN"===i.description?"content-box":void 0},children:[!(S&&"TOTAL VIN"===i.description)&&e.jsx(l,{sx:{fontSize:"12px",fontWeight:"500",color:null===(p=null===(a=null==g?void 0:g.palette)||void 0===a?void 0:a.grey)||void 0===p?void 0:p[600],whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:i.title}),e.jsx(l,{sx:{fontSize:"14px",fontWeight:"500",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",color:S&&"TOTAL VIN"===i.description?g.palette.primary.main:"inherit"},children:i.description}),e.jsx(l,{sx:{fontSize:"12px",fontWeight:"500",color:null===(c=null===(v=null==g?void 0:g.palette)||void 0===v?void 0:v.grey)||void 0===c?void 0:c[600],height:"20px"},children:i.percent?"TOTAL VIN"===i.description?i.percent:`${i.percent}%`:""})]})},i.title)}))})]})};