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

Mojito secondary market is the platform to purchase NFT.

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