https://ssicevs.com/assets/PortfolioLines-Yex0EqJQ.js

1import{r as a,j as e}from"./metal-fx-C6GZ_SKA.js";import{S as A,e as M,T as m,d as R,R as _,h as i,E as C}from"./shared-OtDZU4QY.js";import{P}from"./PortfolioChart-DWg1Z1eW.js";import{T as k,b as F,C as K,u as c,d as $,q as D}from"./portfolioSeries-CHr0HCT8.js";import{eT as N}from"./index-D1yBc__G.js";import"./motion-BHwmuFpx.js";function L(){const v=a.useRef(null),[p,w]=a.useState(1),[f,h]=a.useState(null),[E,d]=a.useState(null),[b,S]=a.useState(null),n=b??E,o=k[p].days,{series:y,total:x}=a.useMemo(()=>F(K,o),[o]),l=f??o-1,r=x[l],u=r-x[0],g=u/x[0]*100,j=y.map(s=>({token:s.token,value:s.value[l],amount:s.amount[l],alloc:s.value[l]/r*100})).sort((s,t)=>t.value-s.value);return e.jsxs("div",{className:"w-full max-w-[700px] overflow-hidden rounded-lg border border-foreground/[0.04]",style:{background:M,boxShadow:"inset 0 1px 0 0 color-mix(in srgb, var(--foreground) 4%, transparent)",fontFamily:A},children:[e.jsxs("div",{className:"flex items-center gap-3 border-b border-foreground/[0.03] px-4 py-3",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"text-[10px] tracking-[0.12em] text-foreground/40",children:"Portfolio value"}),e.jsxs("div",{className:"mt-0.5 flex items-baseline gap-2",children:[e.jsx("span",{className:"tabular-nums text-[21px] font-semibold tracking-[-0.02em]",style:{color:m},children:c(r)}),e.jsxs("span",{className:"tabular-nums text-[11.5px] font-medium",style:{color:u>=0?R:_},children:[u>=0?"+":"−",c(Math.abs(u))," (",g>=0?"+":"",g.toFixed(1),"%)"]})]})]}),e.jsx("span",{className:"ml-auto flex items-center gap-0.5 rounded-lg border border-foreground

1/[0.04] p-0.5",children:k.map((s,t)=>e.jsxs("button",{type:"button",onClick:()=>{w(t),h(null)},className:`relative rounded-md px-2 py-1 text-[10.5px] transition-colors duration-200 ${p===t?"text-foreground/90":"text-foreground/40 hover:text-foreground/70"}`,children:[p===t&&e.jsx(N.span,{layoutId:"pf-lines-tf",className:"absolute inset-0 rounded-md bg-foreground/[0.07]",transition:{type:"spring",stiffness:400,damping:34}}),e.jsx("span",{className:"relative",children:s.key})]},s.key))})]}),e.jsx(P,{series:y,total:x,days:o,hover:f,setHover:h,solo:n,svgRef:v}),e.jsxs("div",{className:"border-t border-foreground/[0.03] px-4 pb-3 pt-3",children:[e.jsxs("div",{className:"mb-3",children:[e.jsxs("div",{className:"mb-1.5 flex items-baseline justify-between text-[9.5px]",style:{color:i},children:[e.jsxs("span",{children:["Allocation",f!==null?` · ${$(l,o)}`:""]}),e.jsx("span",{className:"tabular-nums",children:c(r)})]}),e.jsx("div",{className:"flex h-2 w-full gap-[2px] overflow-hidden rounded-full",children:j.map(s=>e.jsx(N.span,{className:"h-full first:rounded-l-full last:rounded-r-full",style:{background:s.token.color},animate:{width:`${s.alloc}%`,opacity:n&&n!==s.token.key?.2:1},transition:{duration:.25,ease:C},onMouseEnter:()=>d(s.token.key),onMouseLeave:()=>d(null)},s.token.key))})]}),e.jsxs("div",{className:"flex flex-col",children:[e.jsxs("div",{className:"grid grid-cols-[minmax(0,1fr)_58px_92px_84px] items-center pb-1.5 text-[9.5px]",style:{color:i},children:[e.jsx("span",{children:"Asset"}),e.jsx("span",{className:"text-right",children:"Alloc"}),e.jsx("span",{className:"text-right",children:"Amount"}),e.jsx("span",{className:"text-right",children:"Value"})]}),j.map(s=>{const t=n===s.token.key;return e.jsxs("button",{type:"button",onMouseEnter:()=>d(s.token.key),onMouseLeave:()=>d(null),onClick:()=>S(T=>T===s.token.key?null:s.token.key),className:"grid grid-cols-[minmax(0,1fr)_58px_92px_84px] items-center rounded-md py-1.5 text-left transition-colors",style:{background:t?"color-mix(in srgb, var(--foreground) 4%, transparent)":"transparent",opacity:n&&!t?.42:1},children:[e.jsxs("span",{className:"flex min-w-0 items-center gap-2",children:[e.jsx("span",{className:"h-2 w-2 shrink-0 rounded-full",style:{background:s.token.color}}),e.jsx("img",{src:`/lab-icons/t-${s.token.key}.svg`,alt:"",className:"h-4 w-4 shrink-0 rounded-full",draggable:!1}),e.jsx("span",{className:"truncate text-[11.5px] font-semibold",style:{color:m},children:s.token.symbol}),e.jsx("span",{className:"truncate text-[10px]",style:{color:i},children:s.token.name})]}),e.jsxs("span",{className:"text-right tabular-nums text-[11px]",style:{color:m},children:[s.alloc.toFixed(1),"%"]}),e.jsxs("span",{className:"text-right tabular-nums text-[11px]",style:{color:i},children:[D(s.amount)," ",s.token.symbol]}),e.jsx("span",{className:"text-right tabular-nums text-[11px] font-medium",style:{color:m},children:c(s.value)})]},s.token.key)})]}),e.jsxs("div",{className:"mt-1.5 flex items-center justify-between border-t border-foreground

1/[0.03] pt-2 text-[10px]",style:{color:i},children:[e.jsx("span",{children:b?"pinned — click the row again to release":"hover a row to isolate it · click to pin"}),e.jsxs("span",{className:"tabular-nums",children:["100% · ",c(r)]})]})]})]})}function G(){return e.jsx("div",{className:"flex w-full items-center justify-center p-4",children:e.jsx(L,{})})}export{G as Demo,L as default};